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.

• EmailInstant MessageSMS

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.
  • EmailInstant MessageSMS

• 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.

• EmailInstant MessageSMS

• 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
  • • When compared alongside native semantics, ARIA attributes look and feel less alien. For example, I like to think of ARIA roles as tags in attribute form. And ARIA attributes are just likenative attributes, just with an aria- prex. 57. Using roles, states, and properties Set via JavaScript using setAttribute() Remember properties and states require "aria-" prexnode.setAttribute("aria-hidden", false);node.setAttribute("aria-haspopup", true); Denitive number of roles, states and properties ARIA trumps existing semantics 58. Implementation Tips 59. Dening Controls 60. In the interest of Progressive Enhancement, when building custom widgets always start with the closest native semantics and supplement with ARIA 61. Dene Semantics Start with closest structural HTML Add ARIA 62. Styling State 63. Styling Roles, States and Properties a:focus { } a:active { } a:hover { } button[disabled] { background: ...; }For native HTML form controls, CSS enables the styling of states using pseudo classes and attributes selectors. 64. Styling Roles, States and Properties .menu.hidden { } .menuitem.selected { } .menuitem.disabled { }For custom widgets, developers have typically used class names. 65. Styling Roles, States and Propertiesul[role=menu] {}button[aria-haspopup] {background: ...;}li[aria-disabled=true] {color: #ccc;}ul[aria-hidden=true] {display: none;}Since ARIA uses attributes, ideally we could simply leverage attribute selectors for styling ARIA widget types, and states. 66. Styling Roles, States and Properties ul[role=menu] { } button[aria-haspopup] { background: ...; } li[aria-disabled] { color: #ccc; } ul[aria-hidden] { display: none; }For ARIA attributes that accept a boolean, we can make the CSS even more terse by just testing the presence of the attribute. 67. Styling Roles, States and Properties li[aria-disabled] { color: #ccc; } ul[aria-hidden] { display: none; } // Set disabled node.setAttribute(aria-disabled, true); // Unset disabled node.removeAttribute(aria-disabled);Wed set the attributes using setAttribute(), and unset them using removeAttribute(). 68. However, if you need to support older IEs (6 & 7) this wont work. IE 6 doesnt provide support for attribute selectors. Additionally, IE 7 supports attribute selectors, but when attributes are setusing setAttribute() they dont trigger the change in style expressed in CSS. 69. Styling Roles, States and Properties // Semantically express state node.setAttribute(aria-disabled, true); // Style state node.addClass(disabled);So, if you need to support older versions of IE you need to touch the DOM twice for every state update: once to set the ARIA role (to ensure the state change is communicated to users ofscreen readers), another time to set the class for visual style. 70. LabelsARIA provides some additional means of labeling widgets beyond the tag. 71. For example, all widgets need to be labeled, but sometimes the visual design doesnt call for the label. 72. Label Composite Widgets System Folders
      • Inbox
      • Drafts
      Personal Folders
      • Folder 1
      • Folder 2
      Historically weve solved this problem by just hiding the label off screen using CSS. 73. Label Composite Widgets
      • Inbox
      • Drafts
      Personal Folders
      • Folder 1
      • Folder 2
      ARIA provides two new methods for labeling widgets:1. The aria-label attribute allows you to specify a label that is not rendered visually.2. The aria-labelledby attribute allows you to use the text of another element in the DOM as the label. 74. The aria-describedby Property node.setAttribute("aria-describedby", "[node_id]");Additionally, ARIA provides the "aria-describedby" attribute which enables you to provide the id of the element whose text supplies a longer description for a widget. 75. One of the most straightfoward uses of the "aria-described" attribute is for alert dialogs. 76.
      Confirm Close

      Your message has not been sent. Do you want to save it in your Drafts folder?

      Save to Drafts Dont Save Keep Writing
      For alert dialog widgets, use the aria-describedby attribute to specifying the message the dialog contains. 77. The aria-describedby Property
      Press Ctrl + [, or Ctrl + ] to switch tabs.
      • Another use case for aria-describedby would be if you want to provide additional instructional/tutor text for users of screen readers. For example, to alert users of the keyboard shortcutsavailable for operating a widget. 78. The aria-describedby Propertyvar description = document.createElement("div");description.id = "description";// Hide off screen via CSSdescription.className = "hidden";document.body.appendChild(description);tabView.setAttribute("aria-describedby", "description");Since the aria-describedby attribute takes an id, you often need to hide the element containing description off screen using CSS. 79. .element-invisible {position: absolute !important;height: 1px; width: 1px;overflow: hidden;clip: rect(1px 1px 1px 1px); /* IE6, IE7 */clip: rect(1px, 1px, 1px, 1px);} http://snook.ca/archives/html_and_css/hiding-content-for-accessibilityMy current, preferred method of hiding content that still needs to be accessible to users of screen readers. 80. Repair Nesting 81. Repairing Nesting
      ARIA widgets require a direct parent-child relationship. Nodes between elements with the declared ARIA roles can result in problems for the end user. 82. http://youtu.be/7SuJH5fT_ZQ 83. Repairing Nesting This is correctable by using the ARIA presentation roles to hide these intermediary nodes, thus restoring a direct parent-child relationship. 84. http://youtu.be/7SuJH5fT_ZQ 85. Keyboard Access 86. Not providing the expected keyboard shortcuts for ARIA widgets is analogous to building a car and not adding the steering wheel. 87. If you implement keyboard shortcuts, you need to make sure that you implement the right ones. Otherwise it would be like getting in a car, and nding a joystick instead of a steering wheel. 88. Widget Keyboard Patterns Task KeyFocus Next or PreviousTab / Shift + Tab / ArrowsChange selection, , , Expand / Collapse , , , ExitEscClick SpacebarDefault ActionEnterImplementing keyboard navigation across all of the various widget types involves handling a very few number of keys. 89. Use Live Regions 90. Screen ReadersRead the code (HTML)Read the focused elementWhat is read: Element/Control type Label Properties State changesTo understand the value of live regions, lets revisit the fundamentals of how screen readers have traditionally worked: they read the currently focused element. 91. In modern web apps often parts of the UI are continually updated asynchronously. For example, on Twitter the top of the timeline will update to notify you when new tweets have arrived. Thisinformation will go unnoticed by users of screen readers unless the user manually moves focus to this region of the page.It is this category of problem that ARIA live regions aim to solve. 92. Live Twitter Hack
      1 new Tweet
      ARIA live regions enable developers to communicate to the screen reader that a region of the page will be dynamically updated. When that update occurs the change will be announced tothe user, even if they are focused on another control on the page.You can try this yourself using the DOM inspector to set the aria-live attribute on the timeline in Twitter. 93. Live Region Use Cases Involuntary asynchronous updates Progress indicators Speaking instructions to the user 94. ARIA Live Regions polite assertive offThe aria-live attribute accepts three values. polite indicates the change should be communicated when the user ceases to be busy, assertive that the change should be announced assoon as possible.Any element can be made into a live region by adding the aria-polite attribute. 95. ARIA Live Regions
      additions* removals text* all(additions removals text)*default valuesDevelopers can control what type of information is announced using the aria-relevant attribute. 96. Roles that are live regions by defaultalertstatustimermarqueelogSome ARIA roles are live regions by default, and dont require the use of the aria-live attribute. 97.

      hey - let me knowwhen you are available.id like to discuss a fixwith you

      conversation.appendChild(message);A browser-based messenger application is the perfect use case for ARIA live regions. For example, a user sends someone a message. 98.

      hey - let me know when you are available. id like to discuss a fix with you

      thanks

      conversation.appendChild(message);Then appends another line. 99.

      hey - let me knowwhen you are available.id like to discuss a fixwith you

      thanks

      yt?

      conversation.appendChild(message);With each update, the recipient would hear the text being appended to the conversation, even though he/she might not have focus on it at the time. 100. msgList.innerHTML = messages;Often regions of the DOM are updated using innerHTML. If these regions are ARIA live regions, the screen read wont be able to distinguish the delta of the change between the old and newdata and will just begin announcing the entire change. 101. msgList.setAttribute("aria-live", "polite"); msgList.innerHTML = "Sorting Messages"; ... msgList.innerHTML = "Sorting Complete"; msgList.setAttribute("aria-live", "off"); msgList.innerHTML = messages; msgList.one(.list-view-item).focus();This slide illustrates how we used a live region to notify users of screen reader of updates to the message list in Yahoo! Mail. Before we write the new HTML into the message list, we rstreplace it with some user-friendly help text. Then we toggle the live region off so as not to trigger a the announcement of the entire contents of the message list when we change theinnerHTML. Lastly, when the redraw is complete, we simply focus the rst message in the list to let the user know it they can resume interacting with the control. 102. Y! Search Suggest uses a live region to create a console that outputs instructions to the user as they are interacting with the control. 103. Y! Search Suggest uses a live region to create a console that outputs instructions to the user as they are interacting with the control. 104. ARIA Live Regionsvar region = document.createElement("div");region.setAttribute("aria-live", "polite");document.body.appendChild(region);...var message = document.createElement("p");message.innerHTML = "Search suggestions are...";// Remove previous messageregion.innerHTML = "";// Append new message to be announcedregion.appendChild(message); 105. ReviewCreate a Live RegionUse "aria-live" or one of the Live Region rolesControl when text is spokenSet "aria-live" to desired valueControl what is spokenSet "aria-relevant" to desired value 106. Code https://gist.github.com/klootsWorking examples of ARIA widgets can be found on my github account. 107. Thanks.