22
Accessible DHTML Implementation Aaron Leventhal IBM Senior Engineer Firefox accessibility lead Firefox 1.5
Accessible DHTMLImplementation
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- only tabindex <= “-1”
3. Not focusable default / no tabindex
Element “Navigability”
Issue: how does XHTML2implement these?
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
1. Find most specific elementcontaining click
2. If focusable, focus it
3. Else go to parent, repeat #2
Semantics
treespreadsheet
tab panel
menuslider
progressbar
applicationalert
description
required
invalid
selected
labeledby
describedby
multiselect
expanded
checkedhaspopup
& more …
& more …
valuenow
Accessible tree• Subset of the DOM tree
<table><html> <td> #text
<p>
<a>
<i>
#text
<td> #text
Exposed as MSAA or ATK• Name: e.g. “click here”• Role: ROLE_LINK• States: STATE_FOCUSABLE | STATE_FOCUSED | STATE_LINKED | STATE_TRAVERSED
#text
<div>
#text<div role=“”>
<tbody> <tr>
#text
No xhtml2:role
Accessible object implementation
ATRole
ATName Boolean
AT States
Base ATinterface
AdditonalAT interfaces
Often from <label>, attribute or inner content
Often from <label>, attribute or inner content Collected from attributes,
focus state & layout info
Collected from attributes,focus state & layout info
IAccessible orAtkComponent.
IAccessible orAtkComponent.
AtkTable, AtkValue, etc.AtkTable, AtkValue, etc.AT
Value
Acquired from GeckoAcquired from Gecko
Namespace+ Tag
Has xhtml2:role
Accessible object implementation
ATName Boolean
AT States
Base ATinterface
AdditonalAT interfaces
xhtml2:roleattribute
ATRole
ATValue
Namespace+ Tag
overrideUse generic
implementation for vanilla<div>, <span>, etc.
Use genericimplementation for vanilla
<div>, <span>, 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 → 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 constantRole constant
OR’d states always usedOR’d states always used
Attributeto state
rules
Attributeto state
rules
Name ruleName rule
Value ruleValue rule
Name computation
• eNameLabelOrTitle1. First try aaa:labeledby 2. Try typical rules for element,
e.g. <label for=“”>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 <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 to
EVENT_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 readonly disabled → 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
Role issues: strange combos,
conflicts, confusion
Other issuesNot 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: need more relation for diagrams
Issue: how to definenew relations?
Issue: how to definenew relations?
Issue: how to move on described handlers?
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: [email protected]
