Accessible DHTML Implementation Aaron Leventhal IBM Senior Engineer Firefox accessibility lead Firefox 1.5

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

Navigation Scenarios 1. Simple controls are in tab order –Examples: checkbox, slider 2. 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) 3. 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

Choices for elements normally not focusable: 1. Tab key focusable tabindex >= “0” 2. Script- or click- onlytabindex <= “-1” 3. Not focusable default / no tabindex Element “Navigability” Issue: how does XHTML2 implement 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 1.Find most specific element containing click 2.If focusable, focus it 3.Else go to parent, repeat #2

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

Accessible tree Subset of the DOM tree # text #text #text Exposed as MSAA or ATK Name: e.g. “click here” Role: ROLE_LINK States: STATE_FOCUSABLE | STATE_FOCUSED | STATE_LINKED | STATE_TRAVERSED #text #text #text

No xhtml2:role Accessible object implementation AT Role AT Name Boolean AT States Base AT interface Additonal AT interfaces Often from, attribute or inner content Collected from attributes, focus state & layout info IAccessible or AtkComponent. IAccessible or AtkComponent. AtkTable, AtkValue, etc. AT Value Acquired from Gecko Namespace + Tag

Has xhtml2:role Accessible object implementation AT Name Boolean AT States Base AT interface Additonal AT interfaces xhtml2:role attribute AT Role AT Value Namespace + Tag override Use generic implementation for vanilla,, etc.

Each mapped role [1-4] 1.Role name as a string, e.g. “checkbox” 2.Role constant for API 3.Name rule eNameLabelOrTitle eNameOkFromChildren 4.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 → checkable if selected is set → selectable if 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 OR’d states always used Attribute to state rules Name rule Value rule

Name computation eNameLabelOrTitle 1.First try aaa:labeledby 2.Try typical rules for element, e.g. 3.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 / –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 to EVENT_MENUSTART, EVENT_MENUEND, EVENT_MENUPOPUPSTART, EVENT_MENUPOPUPEND

Mutations DOMNode Inserted / Removed Internal Layout Events EVENT_SHOW or EVENT_HIDE – plus – EVENT_REORDER on the container for changing child[ren]

Attribute changes aaa:valuenow → EVENT_VALUE_CHANGE aaa: checked expanded readonly disabled → EVENT_STATE_CHANGE required invalid xhtml2:role aaa:multiselect → EVENT_REORDER

Selection changes Change to attribute aaa:selection Multiselect If inside a container with multiselect=“true”, fire –EVENT_SELECTION_WITHIN on container –EVENT_SELECTION_ADD or _REMOVE on child Single select When 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 define new relations? Issue: how to move on described handlers?

For more info: Authors: Role table: at-apis#roletable at-apis#roletable Source code: