1. Advanced Accessibility Global Accessibility Awareness Day 2018

2. Agenda ARIA Landmarks Roles Labeling Expanding/Collapsing Content Demo
Mega Menu
Resources

3. ARIA

4. What does ARIA do?
Set of attributes that communicate roles, states, and properties of interface elements to accessibility APIs, for the benefit of AT users.
Answers questions such as:
What is this?
How do I use it?
What is its current state (is it on/selected/expanded/collapsed)?
What just happened?

5. The First Rule of ARIA
If you can use a native HTML element or attribute with the semantics and behavior you require, instead of re-purposing an element and adding an ARIA role, state, or property to make it accessible, then do so.

6. ARIA Landmark Roles role="main" role="banner" role="navigation"
role="contentinfo"
role="complementary"
role="search"
role="form"
role="application"
role="main"
role="banner"
role="navigation"
role="contentinfo"
role="complementary"
role="search"
role="form"
role="application"

7. Landmark Roles & HTML5 <main role="main">
<header role="banner"> (sometimes)
<nav role="navigation">
<footer role="contentinfo"> (sometimes)
<aside role="complementary">
<main role="main">
<header role="banner"> (sometimes)
<nav role="navigation">
<footer role="contentinfo"> (sometimes)
<aside role="complementary">

8. Describing or labeling with ARIA: aria-label
<nav role="navigation" aria-label="main menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
</ul>
</nav>

9. Describing or labeling with ARIA: aria-labelledby
<div aria-labelledby="headline">
<h1 id="headline">Wild fires spread
<div aria-labelledby="headline">
<h1 id="headline">Wild fires spread across the San Diego Hills</h1>
Strong winds expand fires ignited by high temperatures ...
</div>

10. Describing or labeling with ARIA: aria-describedby
<label for="question">What have you learned today about ARIA?</label>
<textarea id="question" aria-describedby="instructions" required></textarea>
<div id="instructions">Please include at least three lessons learned.</div>
<textarea id="question" aria-describedby="instructions"
required></textarea>
<div id="instructions">Please include at least three lessons learned.</div>

11. Hiding and Showing Content

12. The “show more” button
When clicked, toggles the display of supplemental text
When supplemental text is visible, button text changes to “Show less”
Handled with JavaScript

13. Make it a button
<p>This page … and their solutions. <button id=“text-control”>Show less</button>
</p>
<p>This page … and their solutions. <span id="text-control">Show less</span> </p>

14. Add aria-controls
<button id="text-control" aria-controls="supplemental-text">Show less</button>
<p id="supplemental-text">As an example, this text is initially
<button id="text-control">Show less</button>
<p id="supplemental-text">As an example, this text is initially "hidden” from the user … and understanding?</p>
<button id="text-control" aria-controls="supplemental-text">Show less</button>
<p id="supplemental-text">As an example, this text is initially "hidden” from the user … and understanding?</p>

15. Add aria-expanded
<button id="text-control" aria-controls="supplemental-text” aria-expanded="true">Show less</button>
<p id="supplemental-text">As an example, this text is initially "hidden” from the user … and understanding?</p>
<button id="text-control" aria-controls="supplemental-text">Show less</button>
<p id="supplemental-text">As an example, this text is initially "hidden” from the user … and understanding?</p>

16. (Optionally) add aria-hidden
<button id="text-control" aria-controls="supplemental-text" aria-expanded="true">Show less</button>
<p id="supplemental-text" aria-hidden="false">As an example, this text is initially "hidden” from the user … and understanding?</p>
<button id="text-control" aria-controls="supplemental-text" aria-expanded="true">Show less</button>
<p id="supplemental-text”>As an example, this text is initially "hidden” from the user … and understanding?</p>

17. Wire with JavaScript
<button id="text-control" aria-controls="supplemental-text" aria-expanded="false">Show more</button>
<p id="supplemental-text" aria-hidden="true">As an example, this text is initially "hidden” from the user … and understanding?</p>
<button id="text-control" aria-controls="supplemental-text" aria-expanded="true">Show less</button>
<p id="supplemental-text" aria-hidden="false">As an example, this text is initially "hidden” from the user … and understanding?</p>

18. Making a “show more” button accessible
Make it a <button>, and if <button> isn’t possible, use role=“button”
Add aria-controls=“id_of_controlled_elem”
Add aria-expanded=“false”
Optionally, add aria-hidden=”true” to content being hidden/shown
If button triggers pop-up menu, add aria-haspopup=“true”
As content is shown/hidden, us JS to change values of aria-expanded and aria-hidden attributes

19. uwb.edu Demo

20. Mega Menus

21. Determine the design pattern
Mega Menu
Is a container of navigation links with expandable panels of sub navigation
generally global
may include headers in addition to lists and other semantic elements
A good conceptual model is a table of contents
take away the CSS and it is just links
Often confused with an application menu because of the way it is laid out
Application Menu
Is a collection of menu buttons that perform functions
a wysiwyg editor bar for example

22. High level differences in implementation
Mega Menu
The keyboard model allows tabbing from link to link when a panel is opened
Links (and headers) show up on the respective lists within assistive devices
Application Menu
Has a tab stop only at the beginning then the arrow and other key navigation takes over

23. Technical specs Mega Menu Application Menu
Seek the expertise of ATC, specifically Hadi Rangin and Terrill Thompson
Examine the Adobe Accessible Mega Menu jQuery plug-in
Peruse the collected articles in the resource section of this presentation
Examine UW examples: washington.edu, uwb.edu
Application Menu
WAI-ARIA Authoring Practices 1.1 Menu/Menu Bar

24. Resources

25. “Explore with Hadi” meetups
Second Thursday of every month Mary Gates Hall 064D, 9–10 a.m.
A friendly, informal gathering to explore websites, provide feedback, and discuss web accessibility
Send ideas/topics to
More info:

26. Mega menu resources
Terrill Thompson on mega menus:
Smashing magazine on building accessible menu systems:
Adobe Accessible Mega Menu jQuery plug-in:
Adobe on menu accessibility:

27. The current state of accessibility
Front-end Technologies Community of Practice Friday, June 1st, 10–11:30 a.m. UW Tower Visitor’s Dining Room
Terrill Thompson, Hadi Rangin, and Dan Comden will provide a big picture overview of W3C design patterns, as well as the state of support among assistive technologies and accessibility efforts within the W3C, JavaScript library, and Drupal/WordPress communities. 

28. Questions?
Jeane Marty
Pete Graff