- 1.ARIArvoe rcq grwidgets Todd Kloots @todd
2.
http://yaccessibilityblog.com/library/understanding-aria-widgets.htmlThis
presentation has a corresponding blog post on the Yahoo!
Accessibility blog. 3. Screen ReadersRead the code (HTML)Read the
focused elementWhat is read:Element/Control
typeLabelPropertiesState changes 4. Demo
http://youtu.be/ZnlvBIfTQfIDemo of interacting with a checkbox
using VoiceOverthe screen reader for the Mac. Notice how VoiceOver
announces the control type (checkbox), the label (Send me offers),
and thecurrent state (checked and not checked).All this text is
announced to ensure that users of screen readers can perceive and
operate the widget. 5. Demo http://youtu.be/ZnlvBIfTQfIDemo of
interacting with a checkbox using VoiceOverthe screen reader for
the Mac. Notice how VoiceOver announces the control type
(checkbox), the label (Send me offers), and thecurrent state
(checked and not checked).All this text is announced to ensure that
users of screen readers can perceive and operate the widget. 6.
Widgets BreakThats the experience for existing widgets. But often
custom widgets dont work this well with screen readers. 7. See
HearFor custom controls, most often problems are caused when there
is a gap between the visual and audio user experience such that
users of screen readers do not have access to the sameinformation
as sighted users. 8. Primary Cause 9. The code doesnt
accuratelyexpress what you mean. 10. You ForgotOften this is
because either you forgot to use the right, most semantic markup
for the job. 11. You Are Limited
Or, reason #2: You are limited by the expressiveness of HTML.
For example, ideally youd declare a dialog using a tag, but for
lack of one you use a
with a class of dialog. 12. To understand ARIA widgets, lets
begin with an audit of how existing HTML form controls work. 13.
Widget Types In HTML, a widgets type is control by the tag name.
14. Widget Labels Gender In HTML you help the user distinguish one
widget from another by providing a unique label using the element.
15. HTML form controls also have properties that can be used to
congure their behavior. For example, a listbox can be congured to
support multiple selection using the multiple attribute. 16. Widget
Properties Most HTML form controls have associated properties for
conguring their behavior. 17. MaleLastly, HTML form controls have
states. For example, an option in a listbox can be declared
selected using the selected attribute. 18. Widget StatesMost HTML
form controls have associated properties for configuring their
state. Some of theses states, like checked, are managed for you by
the browserupdated automatically inresponse to user interaction.
Others, like disabled, are not. 19. Widgets Types(e.g. textbox,
checkbox, button) Labels (distinguish one instance from another)
Properties (e.g. readonly, multi-selectable, value) States (e.g.
selected, checked, disabled)So, there you have it. HTML form
controls have types, labels, properties and states. 20. Accessible
Info Types Labels Properties StatesAnd as we know from the checkbox
demonstration at the beginning of this presentation, all of these
various pieces of information are what the screen reader announces
to the user. 21. See HearThe goal being to ensure little, or no gap
in what sighted users see, and what users of screen readers hear.
22. Modern web applications often require more widgets than what is
provided natively in HTML. For example: tree controls, popup menus,
listviews, tabviews, etc. 23. In the future... 24.
In the future HTML will (hopefully) provide native semantics and
functionality for all of the widgets we need. For example, well
have new tags for all of the various widget types like menus,trees,
tabs, etc. 25.
- And well have attributes for state. For example, well be able
to declare menu has hidden using the hidden attribute. 26. EmailAnd
a menuitem as selected using the selected attribute. 27. YOU ARE
HEREBut currently, depending on the browser and device you are
supporting, you nd yourself in the middle: robust support for HTML
4.01 with emerging support for HTML 5 controls. 28. Go
Native?Native widget works as expected?Native widget is
accessible?Browser and platform constraints?Native supports
required style andbehavior customizations?And so every developer is
faced with the decision of whether or not to use a native HTML 5
control. There are many factors to consider. 29.
- EmailN
- Instant MessageI
- SMST
Often, due to lack of native semantics, we build widgets by falling
back to using structural HTML 4 and declaring types, properties and
stateusing class. 30.
We use class for everythingtype and state information. 31.
EmailN 32. Problems HTML 4 structural elements dontconvey
interactivity HTML 4 structural elements dont havestates State
information is often stored inclass attribute States in class
attributes are notstandardizedHowever, our current strategy often
results in custom controls being inaccessible to users of screen
readers. Primarily because we use class to declare everythingfrom
type to state. Andevery developer chooses different class names.
33. No Standardization
EmailNEmailNFor example, one developer might declare a menu
using the menu class, while another might use optionMenu. 34.
Problems HTML 4 structural elements dontconvey interactivity HTML 4
structural elements dont havestates State information is often
stored inclass attribute States in class attributes are
notstandardizedIf there were standardization browsers might be able
to actually infer meaning from the markup and send that information
back to the accessibility APIs used by screen readers so that
theycould notify users of the important pieces of
informationcontrol type, properties, state. 35. Solutions? 36. +
ARIAThis is the core value of ARIA: ARIA provides additional
semantics beyond what is available in current implementations of
HTML. As the spec indicates, its a bridging technologyllinggaps
between versions of the HTML specs. You can use ARIA with existing
HTML 4.01. 37. + ARIAAnd HTML 5. 38.
- EmailN
- Instant MessageI
- SMST
For example, while current versions of HTML dont yet dene semantics
for declaring menus, we can use ARIA to ll the gap. 39. ARIA is
well supported across all of the major browsers. 40. Three Types of
ARIA Attributes Roles(Control/Widget Type - e.g. menu, tab, etc.)
Properties (e.g. label, or has a popup menu) States (e.g. hidden,
or selected) 41. Setting the role Attribute
- // Native DOM node.setAttribute("role", "menu"); // jQuery
node.attr("role" "menu"); // YUI node.set("role" "menu");The role
attribute can be declared in markup, or set programmatically using
JavaScript. 42. Denitive Number of Roles
Like the elements type attribute, the ARIA role attribute can
only be set to one of several predened values. 43. Denitive Number
of Roles
44. Denitive Number of Roles menu tablist grid toolbar tree
slider 45. Widget Roles Atomic Widgets Container widgets Overlay
widgetsI think of the ARIA roles as being organized into three
categories. 46. Atomic Widget
Rolesspinbuttonsliderprogressbarbuttonradiotextboxcheckbox 47.
Container Rolesmenubartoolbargridlistboxradiogrouptree &
treegridtablist 48. Overlay Widget
Rolesdialogalertdialogmenutooltip 49. Roles Trump Native Semantics
- 50. Setting ARIA Properties Properties allow you to communicate
aspects of a control, for example: that a menu item has a popup
menu.ARIA properties are always prexed with "aria-". 51. Setting
ARIA Properties node.setAttribute("aria-haspopup", true);Properties
allow you to communicate aspects of a control, for example: that a
menu item has a popup menu.ARIA properties are always prexed with
"aria-". 52. Some Examples aria-haspopup aria-readonly
aria-controls aria-label aria-labelledby aria-describedby 53.
Setting ARIA StatesARIA states are used to communicate widget state
information you are likely already maintaining in a widget class
and rendering back to the view via markup and CSS. 54. Setting ARIA
Statesnode.setAttribute("aria-disabled", true);ARIA states are used
to communicate widget state information you are likely already
maintaining in a widget class and rendering back to the view via
markup and CSS. 55. Some Examples aria-hidden aria-disabled
aria-expanded aria-invalid 56. Native vs. ARIA