Download Workshop Materials at https bit ly2 Gw
Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z Leveling Up Your Accessibility Skills: The ARIA Feat Kate Deibel <kndeibel@syr. edu> / @metageeky
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 Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z 2019 -02 -19 Code 4 Lib 2019 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/ Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z 2019 -02 -19 Code 4 Lib 2019 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 2019 -02 -19 Code 4 Lib 2019 4
ALA Midwinter: Future of Disability Access in Libraries bit. ly/2 FTMmfh 2019 -02 -19 Code 4 Lib 2019 5
Who are you? Briefly introduce yourself: § Your name § Where you work/are from § Why are you here § What you hope to learn Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z 2019 -02 -19 Code 4 Lib 2019 6
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 Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z 2019 -02 -19 Code 4 Lib 2019 7
Agenda § Overview § Semantic HTML § ARIA Landmarks, aria-label § Expanding/Collapsing Content § Forms, Live Regions, aria-describedby § Modal dialog § Next Steps & Resources Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z 2019 -02 -19 Code 4 Lib 2019 8
OVERVIEW Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z 2019 -02 -19 Code 4 Lib 2019 9
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/ 2019 -02 -19 Code 4 Lib 2019 10
Screen reader demo https: //youtu. be/d. Ebl 5 jv. LKGQ 2019 -02 -19 Code 4 Lib 2019 11
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 Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z 2019 -02 -19 Code 4 Lib 2019 12
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… Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z 2019 -02 -19 Code 4 Lib 2019 13
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… 2019 -02 -19 Code 4 Lib 2019 14
So what did you experience? § Confusion? § Getting lost? § Unexpected changes on a page? 2019 -02 -19 Code 4 Lib 2019 15
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. 2019 -02 -19 Code 4 Lib 2019 16
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 2019 -02 -19 Code 4 Lib 2019 17
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? Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z 2019 -02 -19 Code 4 Lib 2019 18
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… 2019 -02 -19 Code 4 Lib 2019 19
TO ARIA OR NOT TO ARIA… Download Workshop Materials at: https: //bit. ly/2 Gw 8 Ty. Z 2019 -02 -19 Code 4 Lib 2019 20
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 2019 -02 -19 Code 4 Lib 2019 21
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 2019 -02 -19 Code 4 Lib 2019 22
The Second Rule of ARIA (simplified) Do NOT use ARIA if existing HTML tags already provide the same functionality!!! 2019 -02 -19 Code 4 Lib 2019 23
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? " 2019 -02 -19 Code 4 Lib 2019 24
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 2019 -02 -19 Code 4 Lib 2019 25
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"> 2019 -02 -19 Code 4 Lib 2019 26
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) 2019 -02 -19 Code 4 Lib 2019 27
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 2019 -02 -19 Code 4 Lib 2019 28
WHERE HTML FALLS SHORT, ARIA STEPS IN 2019 -02 -19 Code 4 Lib 2019 29
ARIA Landmark Roles § role="main" § role=" banner" § role="navigation" § role="contentinfo" § role="complementary" § role="search" § role="form" § role="application" § role="presentation" 2019 -02 -19 Code 4 Lib 2019 30
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"> 2019 -02 -19 Code 4 Lib 2019 31
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"> 2019 -02 -19 Code 4 Lib 2019 32
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 2019 -02 -19 Code 4 Lib 2019 33
EXPANDING / COLLAPSING CONTENT 2019 -02 -19 Code 4 Lib 2019 34
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" 2019 -02 -19 Code 4 Lib 2019 35
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"> 2019 -02 -19 Code 4 Lib 2019 36
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"> 2019 -02 -19 Code 4 Lib 2019 37
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 2019 -02 -19 Code 4 Lib 2019 38
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> 2019 -02 -19 Code 4 Lib 2019 39
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 2019 -02 -19 Code 4 Lib 2019 40
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 2019 -02 -19 Code 4 Lib 2019 41
ARIA IN FORMS 2019 -02 -19 Code 4 Lib 2019 42
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> 2019 -02 -19 Code 4 Lib 2019 43
<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? 2019 -02 -19 Code 4 Lib 2019 44
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 2019 -02 -19 Code 4 Lib 2019 45
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> 2019 -02 -19 Code 4 Lib 2019 46
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> 2019 -02 -19 Code 4 Lib 2019 47
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!" 2019 -02 -19 Code 4 Lib 2019 48
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 2019 -02 -19 Code 4 Lib 2019 49
MODAL DIALOGS 2019 -02 -19 Code 4 Lib 2019 50
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 2019 -02 -19 Code 4 Lib 2019 51
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) 2019 -02 -19 Code 4 Lib 2019 52
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!) 2019 -02 -19 Code 4 Lib 2019 53
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 2019 -02 -19 Code 4 Lib 2019 54
ONLY THE BEGINNING 2019 -02 -19 Code 4 Lib 2019 55
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/ 2019 -02 -19 Code 4 Lib 2019 56
- Slides: 56