Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hitting the high notes
with ARIA
Ted Drake, Intuit Accessibility
Silicon Valley Code Camp,
October 2013
Sunday, October 6,...
Goals
• Screen Reader Introduction
• Introduce ARIA
• Use it today
• Examples
Sunday, October 6, 13
The goal of this talk ...
Screen
Readers
Sunday, October 6, 13
Screen readers are used primarily by people with vision disabilities. However, they a...
Sunday, October 6, 13
This short video shows how a screen reader announces the content and role of an element,
such as a l...
Sunday, October 6, 13
This short video shows how a screen reader announces the content and role of an element,
such as a l...
Sunday, October 6, 13
This short video shows how a screen reader user can navigate around a page by examining
the header t...
Sunday, October 6, 13
This short video shows how a screen reader user can navigate around a page by examining
the header t...
What is ARIA?
Sunday, October 6, 13
a·ri·a
ˈärēə/
noun Music
noun: aria; plural noun: arias
1.
a long, accompanied song for a solo voice,
typically one in an ...
A·RI·A
ˈärēə/
nounTechnology
noun: aria; 
1.
WAI-ARIA (Web Accessibility Initiative -
Accessible Rich Internet Application...
Basics
• HTML attributes
• Good support
• Easy
• Bridge to HTML5
• No visual impact
Sunday, October 6, 13
ARIA is a set of...
ARIA Rules
1. Don’t use ARIA if
native tag is available.
2. See #1
Sunday, October 6, 13
The best user experience is creat...
ARIA > HTML
Sunday, October 6, 13
ARIA has more importance than HTML.
When you put ARIA on a tag, it will supercede the ta...
I’m a link that points to
the same page and
says “Button”
Before ARIA
Sunday, October 6, 13
In this example, we have a lin...
<a href=”#”>
! Button
</a>
Sunday, October 6, 13
This is the code for the link that looks like a button. It will be announ...
I’m a button that says
“Button”
After ARIA
Sunday, October 6, 13
In this example, we have a link that has been styled to l...
<a href=”#” role=”button”>
! Button
</a>
Sunday, October 6, 13
In this example, we are using the ARIA role attribute to re...
Roles
• Widget: role=”alert”
• Composite: role=”grid”
• Document Structure: role=”img”
• Landmark: role=”search”
• w3.org/...
Landmarks
• Search Form: role=”search”
• Main: role=”main”
• Nav: role=”navigation”
• Header: role=”banner”
Sunday, Octobe...
Landmarks
<form role=”search”>
<label for=”q”>Search</label>
<input type=”search” id=”q” name=”q”>
<button>submit</button>...
States
• aria-disabled=”true | false”
• aria-expanded=”true | false | undefined”
• aria-hidden=”true | false”
• aria-invali...
I’m a disabled button
that says “Disabled
Button”
After ARIA
Sunday, October 6, 13
In this example, we have a span that ha...
<a href=”#”
role=”button” aria-disabled=”true”>
! Disabled Button
</a>
Sunday, October 6, 13
In this example, we added ari...
<button disabled>
Disabled Button
</button>
Sunday, October 6, 13
This shows how it is much easier to use the native tags ...
Properties
• aria-live=”polite | assertive | off”
• aria-label=”string”
• aria-describedby=”string”
• aria-haspopup=”true ...
Live Regions
• aria-live=”polite”: announced after user
stops interacting with page.
• aria-live=”assertive”: interrupts u...
Sunday, October 6, 13
This example from the University of Illinois Urbana-Champagne shows how aria-live
announced new cont...
Sunday, October 6, 13
This example from the University of Illinois Urbana-Champagne shows how aria-live
announced new cont...
Screen Reader Problems
Sunday, October 6, 13
Sunday, October 6, 13
This shows how pseudo buttons are not focusable via tab key and are announced as a text
string, not ...
Sunday, October 6, 13
This shows how pseudo buttons are not focusable via tab key and are announced as a text
string, not ...
Sunday, October 6, 13
This short video shows a common pattern where the search form has no label. Further, the
input is us...
Sunday, October 6, 13
This short video shows a common pattern where the search form has no label. Further, the
input is us...
Sunday, October 6, 13
This video is a bit more difficult to understand. It shows a data table that uses divs instead of
a ...
Sunday, October 6, 13
This video is a bit more difficult to understand. It shows a data table that uses divs instead of
a ...
ARIA to the
Rescue
Sunday, October 6, 13
Let’s go back to our earlier examples and show how ARIA can fix those common issue...
Sunday, October 6, 13
This video shows how role=”button” makes a link sound just like a real button.
<a href=”#” role=”but...
Sunday, October 6, 13
This video shows how role=”button” makes a link sound just like a real button.
<a href=”#” role=”but...
Sunday, October 6, 13
This form fixes the search form by adding role=”search” to the form tag. This sets it as a
landmark.
...
Sunday, October 6, 13
This form fixes the search form by adding role=”search” to the form tag. This sets it as a
landmark.
...
Sunday, October 6, 13
This example isn’t perfect. But it does show how these divs can be given the data table
semantics by...
Sunday, October 6, 13
This example isn’t perfect. But it does show how these divs can be given the data table
semantics by...
ARIA Form
• role=”alert”
• aria-describedby=”emailerror”
• aria-invalid=”true”
Sunday, October 6, 13
So far, this presenta...
Sunday, October 6, 13
This form has an email input that is validated as the user leaves the input (onBlur). The video
show...
Sunday, October 6, 13
This form has an email input that is validated as the user leaves the input (onBlur). The video
show...
role=”alert”
<p role="alert" id="emailerror">
Please enter a valid email
address
</p>
Sunday, October 6, 13
Adding role=”a...
Original input
<input
type="email"
required
id="email"
name="email" >
Sunday, October 6, 13
Invalid input
<input
type="email"
required
id="email"
name="email"
aria-invalid=”true”
aria-describedby=”emailerror” >
Sun...
Sunday, October 6, 13
Repeat the video to show how this works.
Sunday, October 6, 13
Repeat the video to show how this works.
Key Takeaways
• ARIA is easy and safe to use.
• Use basic HTML before reaching into the
ARIA bag
• ARIA provides informati...
T: @ted_drake
S: slideshare.net/7mary4
U: last-child.com
Y: youtube.com/7mary4responding
E: ted_drake@intuit.com
Thank You...
Upcoming SlideShare
Loading in …5
×

Hitting the accessibility high notes with ARIA

6,240 views

Published on

ARIA (Accessible Rich Internet Applications) allows web developers to make their complex web applications accessible. This presentation will introduce ARIA attributes and how they establish landmarks, states, and roles. Learn how to use the basic elements that belong on every application. This presentation will also show more advanced topics, such as invalid form inputs, live regions, and fixing divitis.

View this presentation with accessible transcript: http://www.last-child.com/accessibility-high-notes-aria/

Published in: Technology, Design

Hitting the accessibility high notes with ARIA

  1. 1. Hitting the high notes with ARIA Ted Drake, Intuit Accessibility Silicon Valley Code Camp, October 2013 Sunday, October 6, 13 This presentation on ARIA was created for the Silicon Valley Code Camp, 2013 by Ted Drake.
  2. 2. Goals • Screen Reader Introduction • Introduce ARIA • Use it today • Examples Sunday, October 6, 13 The goal of this talk to to de-mystify ARIA and encourage engineers to make their sites more accessible by using it correctly. This talk will be focused on new users, but should also provide interesting content and examples for more advanced users.
  3. 3. Screen Readers Sunday, October 6, 13 Screen readers are used primarily by people with vision disabilities. However, they are also used as a middle layer for automated testing and for people with cognitive and physical disabilities. Screen readers interpret the user’s interaction and the applications responses.
  4. 4. Sunday, October 6, 13 This short video shows how a screen reader announces the content and role of an element, such as a link or form input.
  5. 5. Sunday, October 6, 13 This short video shows how a screen reader announces the content and role of an element, such as a link or form input.
  6. 6. Sunday, October 6, 13 This short video shows how a screen reader user can navigate around a page by examining the header tags. The user can also navigate via landmarks, form elements, links, images, and other types of elements on the page.
  7. 7. Sunday, October 6, 13 This short video shows how a screen reader user can navigate around a page by examining the header tags. The user can also navigate via landmarks, form elements, links, images, and other types of elements on the page.
  8. 8. What is ARIA? Sunday, October 6, 13
  9. 9. a·ri·a ˈärēə/ noun Music noun: aria; plural noun: arias 1. a long, accompanied song for a solo voice, typically one in an opera or oratorio. Sunday, October 6, 13 An aria is the solo performance during an opera that brings people to their feet.
  10. 10. A·RI·A ˈärēə/ nounTechnology noun: aria;  1. WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a draft technical specification published by the World Wide Web Consortium that specifies how to increase the accessibility of dynamic content and user interface components Sunday, October 6, 13 WAI ARIA is a web standard established as a bridging technique to provide accessibility to dynamic web sites.
  11. 11. Basics • HTML attributes • Good support • Easy • Bridge to HTML5 • No visual impact Sunday, October 6, 13 ARIA is a set of HTML attributes that provide information to the user via the browser and assistive technology. ARIA has good support via browsers and screen readers, but not as good for other assistive technology. Don’t depend on ARIA if possible. ARIA’s basic elements are easy to understand and code ARIA is a bridge technology until HTML5 is completely supported. It’s ok to combine and should be future proof.
  12. 12. ARIA Rules 1. Don’t use ARIA if native tag is available. 2. See #1 Sunday, October 6, 13 The best user experience is created with the semantic HTML tags. ARIA is meant to fix areas that cannot use existing native elements. Use <button> instead of role=”button”, <table> instead of role=”grid”, and <img> instead of role=”img” too many people are using crap code because it is part of a platform, given in a demo, or think it’s easier to style a blank element. Don’t do this. Use the correct tag to give your site structure. If you are stuck using bad code, use ARIA to make it work, but you are still stuck with a bad foundation. http://www.w3.org/TR/aria-in-html/#first-rule-of-aria-use
  13. 13. ARIA > HTML Sunday, October 6, 13 ARIA has more importance than HTML. When you put ARIA on a tag, it will supercede the tag’s value. This includes role, state, and properties.
  14. 14. I’m a link that points to the same page and says “Button” Before ARIA Sunday, October 6, 13 In this example, we have a link that has been styled to look like a button. <a href=”#”>Button</a>
  15. 15. <a href=”#”> ! Button </a> Sunday, October 6, 13 This is the code for the link that looks like a button. It will be announced as an internal link, as the href value is #.
  16. 16. I’m a button that says “Button” After ARIA Sunday, October 6, 13 In this example, we have a link that has been styled to look like a button. <a href=”#” role=”button”>Button</a>
  17. 17. <a href=”#” role=”button”> ! Button </a> Sunday, October 6, 13 In this example, we are using the ARIA role attribute to redefine a link as a button. This will cause the screen reader to ignore the href. Links should take the user to a new page or chunk of content. Buttons should trigger an action.
  18. 18. Roles • Widget: role=”alert” • Composite: role=”grid” • Document Structure: role=”img” • Landmark: role=”search” • w3.org/TR/wai-aria/roles Sunday, October 6, 13 Alert is a widget role. Adding this role suggests an interface and may be standalone or part of a group. Alert will prompt the browser to announce the content when this object changes, such as when an alert appears on a page. Grid is a composite role. There’s a complex arrangement of sub-roles. Grid allows a set of divs to act like a table. Img is a structure role. It describes the structural elements and are not interactive. Landmarks are regions that can be used for navigation to key elements of an application. http://www.w3.org/TR/wai-aria/roles
  19. 19. Landmarks • Search Form: role=”search” • Main: role=”main” • Nav: role=”navigation” • Header: role=”banner” Sunday, October 6, 13 landmarks define content areas on a page. These match HTML5 tags and can be combined. They provide alternate navigation opportunities for users. Firefox is the only browser that currently surfaces the native HTML5 tag roles to assistive technology. So <nav role=”navigation”> is good.
  20. 20. Landmarks <form role=”search”> <label for=”q”>Search</label> <input type=”search” id=”q” name=”q”> <button>submit</button> </form> Sunday, October 6, 13 Adding role=”search” to the form tag allows a user to quickly move to the search form from anywhere in the page. Note, this goes on the form, not the input.
  21. 21. States • aria-disabled=”true | false” • aria-expanded=”true | false | undefined” • aria-hidden=”true | false” • aria-invalid=”true | false | grammar | spelling” • aria-selected=”true | false | undefined” Sunday, October 6, 13 States represent the current state of an object and can change as the user interacts with the application. Many are tied to specific roles and cannot be used indiscriminately. Many of these states are already commonly used in HTML elements
  22. 22. I’m a disabled button that says “Disabled Button” After ARIA Sunday, October 6, 13 In this example, we have a span that has been styled to look like a button. <a href=”#” role=”button”>Button</a>
  23. 23. <a href=”#” role=”button” aria-disabled=”true”> ! Disabled Button </a> Sunday, October 6, 13 In this example, we added aria-disabled=”true” to the link to let users know this isn’t just a button, it’s a disabled button. It would be easier to simply use <button disabled>Disabled Button</button>
  24. 24. <button disabled> Disabled Button </button> Sunday, October 6, 13 This shows how it is much easier to use the native tags and avoid fixing stuff with ARIA http://www.w3.org/TR/html401/interact/forms.html#h-17.12
  25. 25. Properties • aria-live=”polite | assertive | off” • aria-label=”string” • aria-describedby=”string” • aria-haspopup=”true | false” Sunday, October 6, 13 Properties attributes don’t change frequently. They describe special features for an object aria-live: describes how a browser/screen reader should announce content when it changes, ie polite waits for the user to pause. aria-label: provides a label when the standard text label is not available. It will also over-write any existing text labels. aria-describedby: is treated similar to the title attribute. It announces optional information that provides context. aria-haspopup: clicking on this link or button will generate a new chunk of content, such as a dropdown menu or dialog window.
  26. 26. Live Regions • aria-live=”polite”: announced after user stops interacting with page. • aria-live=”assertive”: interrupts user • aria-live=”off”: no announcement • role=”alert”: inherits aria-live=”assertive” Sunday, October 6, 13
  27. 27. Sunday, October 6, 13 This example from the University of Illinois Urbana-Champagne shows how aria-live announced new content. There is a message box that will interrupt the reading of the text box. The message box is using aria-live=”assertive” http://test.cita.illinois.edu/aria/live/
  28. 28. Sunday, October 6, 13 This example from the University of Illinois Urbana-Champagne shows how aria-live announced new content. There is a message box that will interrupt the reading of the text box. The message box is using aria-live=”assertive” http://test.cita.illinois.edu/aria/live/
  29. 29. Screen Reader Problems Sunday, October 6, 13
  30. 30. Sunday, October 6, 13 This shows how pseudo buttons are not focusable via tab key and are announced as a text string, not an interactive element test page: http://fyvr.net/a11y/fake-real-buttons.html
  31. 31. Sunday, October 6, 13 This shows how pseudo buttons are not focusable via tab key and are announced as a text string, not an interactive element test page: http://fyvr.net/a11y/fake-real-buttons.html
  32. 32. Sunday, October 6, 13 This short video shows a common pattern where the search form has no label. Further, the input is using the value attribute to contain a pseudo-placeholder. The value is cleared when the user places focus into the input. This fails because the input now has no label, no placeholder, and no value. The placeholder attribute is not consistently supported and will not be announced if a user moves back into the input after a value has been entered.
  33. 33. Sunday, October 6, 13 This short video shows a common pattern where the search form has no label. Further, the input is using the value attribute to contain a pseudo-placeholder. The value is cleared when the user places focus into the input. This fails because the input now has no label, no placeholder, and no value. The placeholder attribute is not consistently supported and will not be announced if a user moves back into the input after a value has been entered.
  34. 34. Sunday, October 6, 13 This video is a bit more difficult to understand. It shows a data table that uses divs instead of a standard table markup. the screen reader announces the content as a series of simple strings. The selected icons are not announced, as they are empty spans with background images. Test page: http://fyvr.net/a11y/payroll-table.html
  35. 35. Sunday, October 6, 13 This video is a bit more difficult to understand. It shows a data table that uses divs instead of a standard table markup. the screen reader announces the content as a series of simple strings. The selected icons are not announced, as they are empty spans with background images. Test page: http://fyvr.net/a11y/payroll-table.html
  36. 36. ARIA to the Rescue Sunday, October 6, 13 Let’s go back to our earlier examples and show how ARIA can fix those common issues.
  37. 37. Sunday, October 6, 13 This video shows how role=”button” makes a link sound just like a real button. <a href=”#” role=”button”>foo</a>
  38. 38. Sunday, October 6, 13 This video shows how role=”button” makes a link sound just like a real button. <a href=”#” role=”button”>foo</a>
  39. 39. Sunday, October 6, 13 This form fixes the search form by adding role=”search” to the form tag. This sets it as a landmark. The input receives a label via aria-label=”search” The placeholder attribute is not a substitute for a label.
  40. 40. Sunday, October 6, 13 This form fixes the search form by adding role=”search” to the form tag. This sets it as a landmark. The input receives a label via aria-label=”search” The placeholder attribute is not a substitute for a label.
  41. 41. Sunday, October 6, 13 This example isn’t perfect. But it does show how these divs can be given the data table semantics by using the role=”grid” and appropriate children roles. The blue dots are also given text: supported and not supported. This could have been built with a basic data table in the start.
  42. 42. Sunday, October 6, 13 This example isn’t perfect. But it does show how these divs can be given the data table semantics by using the role=”grid” and appropriate children roles. The blue dots are also given text: supported and not supported. This could have been built with a basic data table in the start.
  43. 43. ARIA Form • role=”alert” • aria-describedby=”emailerror” • aria-invalid=”true” Sunday, October 6, 13 So far, this presentation has given examples of using ARIA to restore semantics and add landmarks. Let’s see how a few small changes can make significant usability improvements that were not possible with basic html. This example will use role=”alert” on an input’s error message. The invalid form input will also get aria-invalid=”true” and aria-describedby to point to the error message.
  44. 44. Sunday, October 6, 13 This form has an email input that is validated as the user leaves the input (onBlur). The video shows how the screen reader will announce the alert as soon as it appears. When the user goes back to the input, they are told the input is invalid and the error message is repeated.
  45. 45. Sunday, October 6, 13 This form has an email input that is validated as the user leaves the input (onBlur). The video shows how the screen reader will announce the alert as soon as it appears. When the user goes back to the input, they are told the input is invalid and the error message is repeated.
  46. 46. role=”alert” <p role="alert" id="emailerror"> Please enter a valid email address </p> Sunday, October 6, 13 Adding role=”alert” to an element will trigger the screen reader to announce the content whenever it changes. In this page, the content is announced when the display status is changed from display:none to display:block. Also note, there is an id on this element. This will be used by aria-describedby attribute.
  47. 47. Original input <input type="email" required id="email" name="email" > Sunday, October 6, 13
  48. 48. Invalid input <input type="email" required id="email" name="email" aria-invalid=”true” aria-describedby=”emailerror” > Sunday, October 6, 13 After the input has been identified as invalid, we will need to add some attributes. aria-invalid=”true” lets the user know when an input is invalid. Add this attribute in your logic that uses a style or content to visually identify invalid inputs. aria-describedby points to the id value of the error message. This will be announced as the input has focus.
  49. 49. Sunday, October 6, 13 Repeat the video to show how this works.
  50. 50. Sunday, October 6, 13 Repeat the video to show how this works.
  51. 51. Key Takeaways • ARIA is easy and safe to use. • Use basic HTML before reaching into the ARIA bag • ARIA provides information on role, state, and property • Make your forms more accessible with ARIA • Stop the div-itis Sunday, October 6, 13
  52. 52. T: @ted_drake S: slideshare.net/7mary4 U: last-child.com Y: youtube.com/7mary4responding E: ted_drake@intuit.com Thank You! Sunday, October 6, 13

×