Advanced Accessibility ARIA and Dynamic Webpages Kate Deibel
Advanced Accessibility: ARIA and Dynamic Webpages Kate Deibel <kndeibel@syr. edu>
A Special Thanks This workshop is based on the amazing ARIA bootcamp workshop developed by Hadi Rangin, Jeane Marty, and many others in the University of Washington Accessibility group. https: //github. com/uwfrontendtech/aria-bootcamp 2018 -05 -30 Web Accessibility Summit, Columbia, MO 2
Usage of this Material Per the original creators of this workshop, the adapted materials within are shared under a Creative Commons License with the following stipulations: § Attribution § Non-commercial § Share. Alike https: //creativecommons. org/licenses/by-nc-sa/3. 0/ 2018 -05 -30 Web Accessibility Summit, Columbia, MO 3
Kate Deibel Ph. D in Computer Science & Engineering Currently: Inclusion & Accessibility Librarian, Syracuse University Libraries Previously: Web Applications Specialist, University of Washington Libraries Active speaker / teacher on: § Assistive technologies § Web accessibility § Inclusive education § Disability representation 2018 -05 -30 Web Accessibility Summit, Columbia, MO 4
Who are you? Briefly introduce yourself: § Your name § Where you work/are from § Why are you here § What you hope to learn 2018 -05 -30 Web Accessibility Summit, Columbia, MO 5
ARIA Basics This workshop will provide you with a basic understanding of ARIA. By the end, you will have learned: § What ARIA is? § Why ARIA matters § When to use and not use ARIA? § Several common ARIA templates § Where to learn more 2018 -05 -30 Web Accessibility Summit, Columbia, MO 6
Agenda § Overview § Semantic HTML § ARIA Landmarks, aria-label § Expanding/Collapsing Content § Forms, Live Regions, aria-describedby § Modal dialog § Next Steps & Resources 2018 -05 -30 Web Accessibility Summit, Columbia, MO 7
OVERVIEW 2018 -05 -30 Web Accessibility Summit, Columbia, MO 8
Introduction to Screen Readers Screen readers: § Provide audio feedback of screen interaction § Provide additional means to jump among a page Popular versions: § JAWS § NVDA § Voice. Over (Apple) § Chrome. Vox (not so popular) Survey of usage: https: //webaim. org/projects/screenreadersurvey/ 2018 -05 -30 Web Accessibility Summit, Columbia, MO 9
Screen reader demo https: //youtu. be/d. Ebl 5 jv. LKGQ 2018 -05 -30 Web Accessibility Summit, Columbia, MO 10
Recommendations Use NVDA (https: //www. nvaccess. org/) § Stands for Non-Visual Desktop Access § Open-Source § Free § Most compliant with standards Power user advice: § Open the NVDA speech viewer to see text output 2018 -05 -30 Web Accessibility Summit, Columbia, MO 11
Web Standards § Hypertext Markup Language (HTML) § Cascading Style Sheets (CSS) § ECMA 2. 62 (Java. Script) § Web Content Accessibility Guidelines (WCAG) 2. 0 There is a critical accessibility gap not covered by these standards… 2018 -05 -30 Web Accessibility Summit, Columbia, MO 12
Understanding the Gap (part 1) To understand this gap, let’s play a game. You’re going to be a screen reader user without ARIA. Turn away from the screen. I’ll pick an interface widget from a site and act as a screen reader. https: //www. w 3. org/TR/wai-aria-practices/ https: //getbootstrap. com/docs/4. 0/components/alerts/ Let’s try to use the web… 2018 -05 -30 Web Accessibility Summit, Columbia, MO 13
So what did you experience? § Confusion? § Getting lost? § Unexpected changes on a page? 2018 -05 -30 Web Accessibility Summit, Columbia, MO 14
Dynamic Pages Confound Screen Readers Here’s what was going on: § Scripts were changing the page § Sometimes CSS for hiding/showing § Sometimes changing the document object model Browsers did not announce such changes to tools like screen readers. At best, a screen reader could crudely monitor for changes after they happened. 2018 -05 -30 Web Accessibility Summit, Columbia, MO 15
Web Standards + ARIA § Hypertext Markup Language (HTML) § Cascading Style Sheets (CSS) § ECMA 2. 62 (Java. Script) § Web Content Accessibility Guidelines (WCAG) 2. 0 § Accessible Rich Internet Applications (ARIA) 1. 0 § Officially, WAI-ARIA (Web Accessibility Initiative) § Became a. W 3 C recommendation in 2014 2018 -05 -30 Web Accessibility Summit, Columbia, MO 16
What ARIA does § Communicates roles, states, and properties of interface elements to accessibility APIs, for the benefit of AT users. Answers questions like: § What is this? § How do I use it? § Is it on/selected/expanded/collapsed? § What just happened? 2018 -05 -30 Web Accessibility Summit, Columbia, MO 17
Understanding the Gap (part 2) Let’s play the game again. You’re going to be a screen reader user WITH ARIA. Turn away from the screen. I’ll pick an interface widget from a site and act as a screen reader. https: //www. w 3. org/TR/wai-aria-practices/ https: //getbootstrap. com/docs/4. 0/components/alerts/ Let’s try to use the web… 2018 -05 -30 Web Accessibility Summit, Columbia, MO 18
TO ARIA OR NOT TO ARIA… 2018 -05 -30 Web Accessibility Summit, Columbia, MO 19
The First Rule of ARIA “ With great power comes great responsibility. ” — Uncle Ben ARIA is powerful. If poorly applied, it will cause more problems and confusion than help. Hence, the first rule of ARIA is: No ARIA is better than bad ARIA! https: //www. w 3. org/TR/wai-aria-practices/#no_aria_better_bad_aria 2018 -05 -30 Web Accessibility Summit, Columbia, MO 20
The Second Rule of ARIA “ If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state, or property to make it accessible, then do so. ” Source: Notes on Using ARIA in HTML (W 3 C Working Draft) https: //www. w 3. org/TR/aria-in-html 2018 -05 -30 Web Accessibility Summit, Columbia, MO 21
The Second Rule of ARIA (simplified) Do NOT use ARIA if existing HTML tags already provide the same functionality!!! 2018 -05 -30 Web Accessibility Summit, Columbia, MO 22
Screen Readers and Semantics For screen readers, it is a lot easier if an element’s tag reflects what it does. Proper semantic HTML markup answers the question "What is this? " 2018 -05 -30 Web Accessibility Summit, Columbia, MO 23
What is this? It's a heading § Code it with <h 1>, <h 2>, etc. § Headings should form an outline of the page content § Don't skip levels in the outline 2018 -05 -30 Web Accessibility Summit, Columbia, MO 24
What is this? It's a label for a form field If it's a label for a form field, code it with <label> Example: <label for="address">Address</label> <input type="text" id="address"> 2018 -05 -30 Web Accessibility Summit, Columbia, MO 25
What is this? It's a button Code it with the <button> element Know the difference: § A button triggers an action (e. g. , submits a form, changes something on the current page) § A link takes users to a new location (on a new page or a specific location on the current page) 2018 -05 -30 Web Accessibility Summit, Columbia, MO 26
Exercise 1 – Semantic HTML Directory: § exercises/Exercise-1 -Semantic-HTML/ File: § _semantics. html Task: § There are multiple HTML elements in this file which are not fully semantic. Refactor to fix this. Solution: § semantics-solution. html 2018 -05 -30 Web Accessibility Summit, Columbia, MO 27
WHERE HTML FALLS SHORT, ARIA STEPS IN 2018 -05 -30 Web Accessibility Summit, Columbia, MO 28
ARIA Landmark Roles § role="main" § role=" banner" § role="navigation" § role="contentinfo" § role="complementary" § role="search" § role="form" § role="application" § role="presentation" 2018 -05 -30 Web Accessibility Summit, Columbia, MO 29
HTML 5 and ARIA Landmarks Some new HTML 5 semantic elements map to ARIA landmark roles: § <main role="main"> § <header role=" banner"><!-- sometimes--> § <nav role="navigation"> § <footer role="contentinfo"><!-- sometimes--> § <aside role="complementary"> 2018 -05 -30 Web Accessibility Summit, Columbia, MO 30
Describing Elements via ARIA § aria-label="Some label" § aria-labelledby="id_of_element" § aria-describedby="id_of_element" Example: <nav role="navigation" aria-label="Main menu"> <nav role="navigation" aria-labelledby="nav. Label 1"> 2018 -05 -30 Web Accessibility Summit, Columbia, MO 31
Exercise 2 – Landmark Roles and Labeling Directory: § exercises/Exercise-2 -Landmark-Roles-Labeling/ File: § _landmark. html Task: § Make use of semantic HTML elements (<header>, <nav>, <main>, <aside>, <footer>), ARIA roles, and labeling attributes to improve the overall accessibility of this page. Solution: § landmark-solution. html 2018 -05 -30 Web Accessibility Summit, Columbia, MO 32
EXPANDING / COLLAPSING CONTENT 2018 -05 -30 Web Accessibility Summit, Columbia, MO 33
Example: The "show more" button § Handled with j. Query § When clicked, toggles the display of supplemental text § When supplemental text is visible, button text changes to "Show less" 2018 -05 -30 Web Accessibility Summit, Columbia, MO 34
aria-controls attribute § aria-controls indicates that an interactive element changes another element on the page. § Changes can include hiding, expanding, etc. § Its value is the ID of the element being changed Example: <button aria-controls="collapsing. Panel"> 2018 -05 -30 Web Accessibility Summit, Columbia, MO 35
aria-expanded attribute § aria-expanded is a Boolean indicating that an element is hidden (closed) or visible (expanded) § Most often used in collapsing panels or accordion type widgets § Importantly, you place it on the controlling element and not the panel itself Example: <button aria-controls="collapsing" aria-expanded="false"> 2018 -05 -30 Web Accessibility Summit, Columbia, MO 36
aria-hidden attribute § Usually, when you want to hide something from a user, you use CSS display: none § Sometimes, you want to hide something from screen readers ONLY § aria-hidden indicates if an element is hidden or not from a screen reader 2018 -05 -30 Web Accessibility Summit, Columbia, MO 37
Pairing aria-hidden and aria-expanded aria-hidden is often paired with aria-expanded to further emphasize a collapsing panel's status Example: <button aria-controls="collapse. Panel" aria-expanded="false"> </button> <div id="collapsing. Panel" aria-hidden="true"></div> 2018 -05 -30 Web Accessibility Summit, Columbia, MO 38
Making the "show more" button accessible 1. First, make it a <button>. If <button> isn't possible, could use role="button" 2. Add aria-controls="id_of_controlled_element" 3. Add aria-expanded="false" 4. Optionally, add aria-hidden="true" to supplemental text 5. If button triggers a pop-up menu, add aria-haspopup="true" 6. As content is shown or hidden, use j. Query to change the values of aria-expanded and aria-hidden 2018 -05 -30 Web Accessibility Summit, Columbia, MO 39
Exercise 3 – Showing and Hiding Content Directory: § exercises/Exercise-3 -Showing-Hiding-Content/ File: § _show-hide. html § _show-hide. js Task: § Add appropriate ARIA attributes to the button element § Refactor _show-hide. js, to apply (and toggle) the ariaexpanded attribute and button text Solution: § show-hide-solution. html § show-hide-solution. js 2018 -05 -30 Web Accessibility Summit, Columbia, MO 40
ARIA IN FORMS 2018 -05 -30 Web Accessibility Summit, Columbia, MO 41
Label All Inputs If you have an input field, it should have an associated label element. Examples: <label for="name">Your name: </label> <input type="text" id="name"> <label for=”question">What did you learn? </label> <textarea id="question"></textarea> 2018 -05 -30 Web Accessibility Summit, Columbia, MO 42
<label> or aria-label? The various W 3 C specifications only require that form inputs have a label. § The specs do not favor the either approach. § Using either <label> or aria-label is valid. Is one better than the other? 2018 -05 -30 Web Accessibility Summit, Columbia, MO 43
Use <label> when possible § Native semantic elements are always best! § Remember that aria-label is ONLY exposed to screen reader users § Labels typically have text intended for all users § Using the <label> element encourages making that information visible to all users 2018 -05 -30 Web Accessibility Summit, Columbia, MO 44
Use HTML 5 required attribute § If a form field is required, the required attribute is used to indicate that in the form § Be sure to include a visual indicator that the field is required (usually through CSS on the label) Example: <label for="name" class="required">Name: </label> <input type="text" id="name" required> 2018 -05 -30 Web Accessibility Summit, Columbia, MO 45
aria-describedby for supplemental help text § Extra instructions can be provided and pointed to via the aria-describedby attribute. § Without this, it's unclear to the screen reader where instructions would be located Example: <label for="problem">Problem: </label> <textarea id="problem" ariadescribedby="help"></textarea> <p id="help"> Please include as much detail as possible, including browser and version. </p> 2018 -05 -30 Web Accessibility Summit, Columbia, MO 46
ARIA Live Regions Screen readers announce any changes to content (useful for alerts & error messages): § aria-live="assertive" interrupts user now § aria-live="polite" interrupts when user is idle § aria-atomic="true" to announce all content within element; otherwise announces only changed content § role="alert" behaves like aria-live="assertive" and some screen readers preface with "Alert!" 2018 -05 -30 Web Accessibility Summit, Columbia, MO 47
Exercise 4 – Forms Directory : § exercises/Exercise-4 -Forms/ File: § _forms. html § _forms. js Task: § In _forms. html, make use of the required attribute and alert role to improve the overall accessibility of the form. § In _forms. js, set the focus on the field or question which triggers an error. Solution: § forms-solution. html § forms-solution. js 2018 -05 -30 Web Accessibility Summit, Columbia, MO 48
MODAL DIALOGS 2018 -05 -30 Web Accessibility Summit, Columbia, MO 49
Modals A modal is that little page within a page. Making them accessible is tricky as they must: § Show independence from the rest of the page § Trap keyboard focus within the modal only § Be closeable via a button and the escape key 2018 -05 -30 Web Accessibility Summit, Columbia, MO 50
Making a dialog accessible 1. Add role="dialog" or role="alertdialog" on the outer dialog element 2. Be sure dialog has an <h 1> 3. Add aria-labelledby to outer dialog element that references the <h 1> 4. Place keyboard focus on first focusable element within dialog and trap keyboard within dialog (so users can't tab out) 2018 -05 -30 Web Accessibility Summit, Columbia, MO 51
Making a dialog accessible (cont. ) 5. Be sure dialog is positioned outside of all other content in the DOM (e. g. , as child of <body>) 6. When dialog is visible, add aria-hidden="true" to all content except the dialog 7. Be sure to remove aria-hidden (or set to false) when dialog is closed 8. Add support for escape key to close dialog (but if dialog includes form fields, warn user before closing that data will be lost!) 2018 -05 -30 Web Accessibility Summit, Columbia, MO 52
Exercise 5 – Modal Directory: § exercises/Exercise-5 -Modal/ File: § _modal. html § _modal. js Task: § Follow the instructions on the previous slides to ensure the modal accessible. Solution: § modal-solution. html § modal-solution. js 2018 -05 -30 Web Accessibility Summit, Columbia, MO 53
ONLY THE BEGINNING 2018 -05 -30 Web Accessibility Summit, Columbia, MO 54
Learning More about ARIA is very complicated and also new. Unfortunately, these two factors mean the web is full of bad applications of it. The best is to mimic certified best practices. This is the place to go for those example: https: //www. w 3. org/TR/wai-aria-practices/ 2018 -05 -30 Web Accessibility Summit, Columbia, MO 55
- Slides: 55