16. ARIA essentials
• Role : type of ui component ,add semantics
• State/Property : decribe about specific role’s
attribute
• Tabindex : focus management , control user’s
navigation
• Keydown/press : event needed to be listened
for activate actions
18. Document structure Roles
• Organize content in a page ,not usually
interactive. Similar to html5 tags .
• Contains :
article columnheader definition directory
document group heading img list listitem
math note presentation region row
rowheader separator toolbar
20. Live region
• Managing content and presentation changes
• Relation:
– aria-controls
• Properties
– aria-live aria-busy aria-atomic aria-relevent
• Special live region
– alert status timer marquee log
21. In taobao
• word count notification
aria-controls=‘counter’
id=‘counter’
aria-live=‘polite’
22. Landmark roles
• Navigational regions , need AT’s navigation
function.
• Contains :
application banner complementary
contentinfo form main navigation search
25. Widget roles
• Type of a standalone widget or ui control like
on desktop.
• Contains :
alert button dialog gridcell marquee
menuitem menuitemcheckbox
menuitemradio option progressbar scrollbar
slider spinbutton tab tabpanel timer tooltip
treeitem combobox grid listbox menu
menubar radiogroup tablist tree …
27. Role and keydown
• hint:
– Keydown on Roles other an ‘application’ or
widget role will be intercepted by AT.
– Keydown event fired on element with widget role
should call stopPropagation and preventDefault
in order to let web application to handle it.
28. States/property
• Belongs to specific roles ,name starts with
“aria-”
• For example :
aria-label aria-labelledby aria-live
aria-hidden aria-activedescendant
aria-haspopup aria-controls …
29. In taobao
Now : aria-label aria-haspopup @ etao
Lack : aria-activedescendant aria-hidden
aria-activedescendant
aria-hidden
30. tabindex
• Manage focus among dom node
Attribute Tabindex Focusable with mouse or Tab Navigation
JavaScript via
element.focus()
not present Follows default behavior of Follows default behavior of
element (only form controls element
and anchors can receive
focus.)
zero - tabindex="0" yes In tab order relative to
element's position in
document
Positive - tabindex="X" yes Tabindex value directly
(where X is a positive integer specifies where this element
between 1 and 32768) is positioned in the tab order.
Negative - tabindex="-1" yes No, author must focus it with
element.focus() as a result of
arrow or other key press
