Advanced Accessibility Global Accessibility Awareness Day 2018

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

ARIA

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?

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.

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"

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">

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>

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>

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>

Hiding and Showing Content

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

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>

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>

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>

(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>

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>

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

uwb.edu Demo

Mega Menus

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

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

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

Resources

“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 hadi@uw.edu More info: http://uw.edu/accessibility/events

Mega menu resources Terrill Thompson on mega menus: http://terrillthompson.com/blog/474 Smashing magazine on building accessible menu systems: https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/ Adobe Accessible Mega Menu jQuery plug-in: https://adobe-accessibility.github.io/Accessible-Mega-Menu/ Adobe on menu accessibility: https://blogs.adobe.com/accessibility/2013/05/adobe-com.html

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. 

Questions? Jeane Marty jeanem@uw.edu Pete Graff pgraff@uw.edu