Accessible DHTML Implementation

1
Accessible DHTMLImplementation
Firefox 1.5

• Aaron Leventhal
• IBM Senior Engineer
• Firefox accessibility lead

2
Current support

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

3
Navigation Scenarios

• Simple controls are 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 wont take input
• Examples progress meter, alerts, doc structural
  elements
• Click to focus skips, goes up parent chain for
  focus
• On screen keyboards dont list them as choices
• Screen readers skip them in navigation order
• Voice input skips them during say what you see
  vocab buildup

4
Element Navigability

• Choices for elements normally not focusable
• Tab key focusable tabindex gt 0
• Script- or click- only tabindex lt -1
• Not focusable default / no tabindex

Issue how does XHTML2implement these?
5
Tab key focus

• How to cycle
• First Elements with tabindex gt 0
• (Navigate in tabindex order)
• Next All other focusable elements
• (Navigate in document order)

6
Click focus

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

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

• Subset of the DOM tree

lttdgt
text
lttablegt
lthtmlgt
lttbodygt
lttrgt
lttdgt
text
ltpgt
ltigt
text
ltagt

• Exposed as MSAA or ATK
• Name e.g. click here
• Role ROLE_LINK
• States
• STATE_FOCUSABLE
• STATE_FOCUSED
• STATE_LINKED
• STATE_TRAVERSED

ltdivgt
text
ltdiv rolegt
text
text
9
No xhtml2role
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 ltlabelgt, attribute or inner content
Collected from attributes,focus state layout
info
10
Has xhtml2role
Namespace Tag
xhtml2roleattribute
Use genericimplementation for vanillaltdivgt,
ltspangt, etc.
override
Accessible object implementation
ATRole
AdditonalAT interfaces
ATValue
Base ATinterface
ATName
BooleanAT States
11
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 aaavaluenowunknow
  n (progressbar)

12
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.
  valuenowunknown ? 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!

13
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
ORd states always used
Attributeto staterules
14
Name computation

• eNameLabelOrTitle
• First try aaalabeledby
• Try typical rules for element, e.g. ltlabel
  forgt
• Finally try title attribute
• eNameOkFromChildren
• Loop through DOM subtree
• Append text or text equivalent for each node
• If image or using displayblock, insert spaces
  (to avoid jammed-together words)

15
Special cased roles

• application, dialog, document, alert
• The only roles allowed on ltbodygt/lthtmlgt
• 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

16
Mutations
DOMNodeInserted /Removed
InternalLayoutEvents

• EVENT_SHOW or EVENT_HIDE
• plus
• EVENT_REORDER on the container forchanging
  children

17
Attribute changes

• aaavaluenow ? EVENT_VALUE_CHANGE
• aaa checked expanded readonly
  disabled ? EVENT_STATE_CHANGE
  required invalid
• xhtml2roleaaamultiselect ? EVENT_REORDER

18
Selection changes

• Change to attribute aaaselection
• MultiselectIf inside a container with
  multiselecttrue, fire
• EVENT_SELECTION_WITHIN on container
• EVENT_SELECTION_ADD or _REMOVE on child
• Single selectWhen aaaselectedtrue, fire
• EVENT_SELECTION

19
Relations

• Exposed in fields
• labeledby ? name
• describedby ? description
• Exposed via relation support in APIs
• Labeled_by
• Label_for
• Described_by
• Description_for

20
Role issues

• Not implemented in Firefox
• Role extensibility via RDF
• Expose role inheritance via new APIs,e.g.
  Schedule -gt Calendar -gt 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
21
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?
22
For more info
Authors http//www.mozilla.org/access/dhtml Rol
e table http//www.mozilla.org/access/windows/at
-apisroletable Source code http//lxr.mozilla.
org/seamonkey/source/accessible Email
aleventh_at_us.ibm.com