When, and When Not, To Use Aria Attributes for Accessibility

Lightning Talk for Charlotte Front-End Developers Meetup

Transcript

1. When, and When Not, 
 To Use Aria Attributes
 for Accessibility Van J. Wilson @vanwilson Lightning Talk for Charlotte Front-End Developers Meetup February 23, 2017
2. What is this “Aria” thing?
7. NO, NOT THOSE ARIAS !
8. ARIA Accessible Rich Internet Applications
9. WAI-ARIA • The Web Accessibility Initiative (WAI) created the ARIA specification to define “a way to make Web content and Web applications more accessible to people with disabilities”.
10. https://www.w3.org/TR/wai-aria-1.1/
11. https://developer.mozilla.org/en-US/docs/Web/ Accessibility/ARIA
12. Example Use of Aria Attributes • A “tab” widget from a front-end UI framework example from 
 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ An_overview_of_accessible_web_applications_and_widgets
13. <!-- This is a tabs widget. How would you know, looking only at the markup? --> <ol> <li id="ch1Tab"> <a href="#ch1Panel">Chapter 1</a> </li> <li id="ch2Tab"> <a href="#ch2Panel">Chapter 2</a> </li> <li id="quizTab"> <a href="#quizPanel">Quiz</a> </li> </ol> <div> <div id="ch1Panel">Chapter 1 content goes here</div> <div id="ch2Panel">Chapter 2 content goes here</div> <div id="quizPanel">Quiz content goes here</div> </div>
14. <!-- Now *these* are Tabs! --> <!-- We've added role attributes to describe the tab list and each tab. --> <ol role="tablist"> <li id="ch1Tab" role="tab"> <a href="#ch1Panel">Chapter 1</a> </li> <li id="ch2Tab" role="tab"> <a href="#ch2Panel">Chapter 2</a> </li> <li id="quizTab" role="tab"> <a href="#quizPanel">Quiz</a> </li> </ol> <div> <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. --> <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div> <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div> <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div> </div>
15. https://www.w3.org/TR/html-aria/
16. Rules For Aria Attributes • Use if no native HTML element or attribute with the semantics and behavior you require already built in. • Do not change native semantics. • All interactive ARIA controls must be usable with the keyboard. • Do not use role="presentation" or aria-hidden="true" on a visible focusable element . • All interactive elements must have an accessible name.
17. Aria Alone Isn’t Enough Aria DOES: ✅ modify accessibility tree Aria DOES NOT: ❌ modify element appearance ❌ modify element behavior ❌ add focusability ❌ ad keyboard event handling
18. Sometimes, Aria Is Too Much <input type=“checkbox” role=“checkbox”> is redundant, and could lead to mistakes. <input type=“checkbox” role=“checkbox”>
19. Aria for Older Browsers <div role=“header”> <div role=“navigation”> <div role=“main”> <div role =“complementary”> <div role=“article”> <div role=“footer”>
20. Use HTML5 Elements <header> <nav> <main> <aside> <article> <footer>
21. More Resources • https://www.udacity.com/course/web-accessibility-- ud891 • https://bocoup.com/blog/getting-started-with- voiceover-accessibility