Accessible DHTML Implementation

Firefox 1.5 Accessible DHTMLImplementation Aaron Leventhal IBM Senior Engineer Firefox accessibility lead

Current support • Navigation: keyboard & mouse • Semantics • Roles: 42, not yet author extensible • Properties • States • Value • Relations • Events (automatic)

Navigation Scenarios • Simple controlsare in tab order • Examples: checkbox, slider • Container controls group focusable children • Examples: trees, lists, radio groups, spreadsheets • The last focused child is in the tab order • Other children can be focused via the pointer • Key navigation managed by the container widget (often arrows) • Non-interactive content won’t take input • Examples: progress meter, alerts, doc structural elements • Click to focus skips, goes up parent chain for focus • On screen keyboards don’t list them as choices • Screen readers skip them in navigation order • Voice input skips them during “say what you see” vocab buildup

Element “Navigability” Choices for elements normally not focusable: • Tab key focusable tabindex >= “0” • Script-or click- only tabindex <= “-1” • Notfocusable default / no tabindex Issue: how does XHTML2implement these?

Tab key focus How to cycle: • First: Elements with tabindex > “0” (Navigate in tabindex order) • Next: All other focusable elements (Navigate in document order)

Click focus • Find most specific elementcontaining click • If focusable, focus it • Else go to parent, repeat #2

Semantics spreadsheet Roles alert application tree slider menu & more … description progressbar tab panel valuenow invalid Properties labeledby multiselect required & more … selected checked haspopup describedby expanded

Accessible tree • Subset of the DOM tree <td> #text <html> <table> <tbody> <tr> <td> #text <p> <i> #text <a> • Exposed as MSAA or ATK • Name: e.g. “click here” • Role: ROLE_LINK • States: • STATE_FOCUSABLE | • STATE_FOCUSED | • STATE_LINKED | • STATE_TRAVERSED <div> #text <div role=“”> #text #text

No xhtml2:role Namespace + Tag Accessible object implementation ATRole AdditonalAT interfaces ATValue AtkTable, AtkValue, etc. Base ATinterface ATName Acquired from Gecko BooleanAT States IAccessible or AtkComponent. Often from <label>, attribute or inner content Collected from attributes,focus state & layout info

Has xhtml2:role Namespace + Tag xhtml2:roleattribute Use genericimplementation for vanilla<div>, <span>, etc. override Accessible object implementation ATRole AdditonalAT interfaces ATValue Base ATinterface ATName BooleanAT States

Each mapped role [1-4] • Role name as a string, e.g. “checkbox” • Role constant for API • Name rule • eNameLabelOrTitle • eNameOkFromChildren • Value rule • eNoValue • eHasValueMinMax • Can support unknown value via aaa:valuenow=“unknown” (progressbar)

Each mapped role [5-6] 5. States always on for that role • Role “secret” → STATE_PROTECTED • Role “spreadsheet” → STATE_MULTISELECTABLE 6. Attribute → state rules • Name/value pairs to AT states,e.g. valuenow=“unknown” → STATE_MIXED • For some ‘bool’ attributes: set/unset is important!If checked is set → checkableif selected is set → selectableif expanded is set → expandable • “false” always means false, unlike HTML!

A simple mapping {"menuitem", ROLE_MENUITEM, eNameOkFromChildren, eNoValue, eNoReqStates, {"haspopup", BOOL_STATE, STATE_HASPOPUP}, {"checked", BOOL_STATE, STATE_CHECKED | STATE_CHECKABLE}, {"checked", "false", STATE_CHECKABLE}, END_ENTRY} Role constant Name rule Value rule OR’d states always used Attributeto staterules

Name computation • eNameLabelOrTitle • First try aaa:labeledby • Try typical rules for element, e.g. <label for=“”> • Finally try title attribute • eNameOkFromChildren • Loop through DOM subtree • Append text or text equivalent for each node • If image or using display:block, insert spaces (to avoid jammed-together words)

Special cased roles • “application”, “dialog”, “document”, “alert” • The only roles allowed on <body>/<html> • Indicates class of document • Can also occur on any element • “alert” inside of document • Fires alert event whenever made visible or changed • “presentation” • Hides element from accessible hierarchy • If on table, cells w/o own role not exposed • “menu”, “menuitem” • Show/hide translated toEVENT_MENUSTART, EVENT_MENUEND, EVENT_MENUPOPUPSTART, EVENT_MENUPOPUPEND

Mutations DOMNodeInserted /Removed InternalLayoutEvents • EVENT_SHOW or EVENT_HIDE • – plus – • EVENT_REORDER on the container forchanging child[ren]

Attribute changes • aaa:valuenow → EVENT_VALUE_CHANGE • aaa: checked expanded readonlydisabled → EVENT_STATE_CHANGE required invalid • xhtml2:roleaaa:multiselect → EVENT_REORDER

Selection changes • Change to attribute aaa:selection • MultiselectIf inside a container with multiselect=“true”, fire • EVENT_SELECTION_WITHIN on container • EVENT_SELECTION_ADD or _REMOVE on child • Single selectWhen aaa:selected=“true”, fire • EVENT_SELECTION

Relations Exposed in fields: • “labeledby” → name • “describedby” → description Exposed via relation support in APIs: • Labeled_by • Label_for • Described_by • Description_for

Role issues Not implemented in Firefox: • Role extensibility via RDF • Expose role inheritance via new APIs,e.g. Schedule -> Calendar -> Table • Navigation role API (unclear API model) • Natural role vs. navigation role • Multiple roles • Unclear model & use cases • Strange possibilities,e.g. a radio button that is also a spreadsheet! Role issues: strange combos,conflicts, confusion

Other issues Not implemented in Firefox: • Advanced relations, extensible relations • Needed for SVG accessibility • Event handler descriptions • Firefox needs UI model … context menu? Issue: need more relation for diagrams Issue: how to definenew relations? Issue: how to move on described handlers?

For more info: Authors: http://www.mozilla.org/access/dhtml Role table: http://www.mozilla.org/access/windows/at-apis#roletable Source code: http://lxr.mozilla.org/seamonkey/source/accessible Email: aleventh@us.ibm.com

Accessible DHTML Implementation