1 / 55

Advanced Accessibility: ARIA and Dynamic Webpages

Join the Web Accessibility Summit to learn the basics of ARIA, including its importance, when to use it, common templates, and additional resources.

millerc
Download Presentation

Advanced Accessibility: ARIA and Dynamic Webpages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Advanced Accessibility:ARIA and Dynamic Webpages Kate Deibel <kndeibel@syr.edu>

  2. 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 Web Accessibility Summit, Columbia, MO

  3. 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 • ShareAlike https://creativecommons.org/licenses/by-nc-sa/3.0/ Web Accessibility Summit, Columbia, MO

  4. Kate Deibel PhD 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 Web Accessibility Summit, Columbia, MO

  5. Who are you? Briefly introduce yourself: • Your name • Where you work/are from • Why are you here • What you hope to learn Web Accessibility Summit, Columbia, MO

  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 Web Accessibility Summit, Columbia, MO

  7. Agenda • Overview • Semantic HTML • ARIA Landmarks, aria-label • Expanding/Collapsing Content • Forms, Live Regions, aria-describedby • Modal dialog • Next Steps & Resources Web Accessibility Summit, Columbia, MO

  8. Overview Web Accessibility Summit, Columbia, MO

  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 • VoiceOver (Apple) • ChromeVox (not so popular) Survey of usage: https://webaim.org/projects/screenreadersurvey/ Web Accessibility Summit, Columbia, MO

  10. Screen reader demo https://youtu.be/dEbl5jvLKGQ Web Accessibility Summit, Columbia, MO

  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 Web Accessibility Summit, Columbia, MO

  12. Web Standards • Hypertext Markup Language (HTML) • Cascading Style Sheets (CSS) • ECMA 2.62 (JavaScript) • Web Content Accessibility Guidelines (WCAG) 2.0 There is a critical accessibility gap not covered by these standards… Web Accessibility Summit, Columbia, MO

  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.w3.org/TR/wai-aria-practices/ https://getbootstrap.com/docs/4.0/components/alerts/ Let’s try to use the web… Web Accessibility Summit, Columbia, MO

  14. So what did you experience? • Confusion? • Getting lost? • Unexpected changes on a page? Web Accessibility Summit, Columbia, MO

  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. Web Accessibility Summit, Columbia, MO

  16. Web Standards + ARIA • Hypertext Markup Language (HTML) • Cascading Style Sheets (CSS) • ECMA 2.62 (JavaScript) • Web Content Accessibility Guidelines (WCAG) 2.0 • Accessible Rich Internet Applications (ARIA) 1.0 • Officially, WAI-ARIA (Web Accessibility Initiative) • Became aW3C recommendation in 2014 Web Accessibility Summit, Columbia, MO

  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? Web Accessibility Summit, Columbia, MO

  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.w3.org/TR/wai-aria-practices/ https://getbootstrap.com/docs/4.0/components/alerts/ Let’s try to use the web… Web Accessibility Summit, Columbia, MO

  19. To ARIA or NOT TO ARIA… Web Accessibility Summit, Columbia, MO

  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.w3.org/TR/wai-aria-practices/#no_aria_better_bad_aria Web Accessibility Summit, Columbia, MO

  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 (W3C Working Draft)https://www.w3.org/TR/aria-in-html Web Accessibility Summit, Columbia, MO

  22. The Second Rule of ARIA (simplified) Do NOT use ARIA if existing HTML tags already provide the same functionality!!! Web Accessibility Summit, Columbia, MO

  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?" Web Accessibility Summit, Columbia, MO

  24. What is this? It's a heading • Code it with <h1>, <h2>, etc. • Headings should form an outline of the page content • Don't skip levels in the outline Web Accessibility Summit, Columbia, MO

  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"> Web Accessibility Summit, Columbia, MO

  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) Web Accessibility Summit, Columbia, MO

  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 Web Accessibility Summit, Columbia, MO

  28. Where HTML falls short, ARIA steps in Web Accessibility Summit, Columbia, MO

  29. ARIA Landmark Roles • role="main" • role=" banner" • role="navigation" • role="contentinfo" • role="complementary" • role="search" • role="form" • role="application" • role="presentation" Web Accessibility Summit, Columbia, MO

  30. HTML 5 and ARIA Landmarks Some new HTML5 semantic elements map to ARIA landmark roles: • <main role="main"> • <header role=" banner"><!-- sometimes--> • <nav role="navigation"> • <footer role="contentinfo"><!-- sometimes--> • <aside role="complementary"> Web Accessibility Summit, Columbia, MO

  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="navLabel1"> Web Accessibility Summit, Columbia, MO

  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 Web Accessibility Summit, Columbia, MO

  33. Expanding / collapsing content Web Accessibility Summit, Columbia, MO

  34. Example: The "show more" button • Handled with jQuery • When clicked, toggles the display of supplemental text • When supplemental text is visible, button text changes to "Show less" Web Accessibility Summit, Columbia, MO

  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="collapsingPanel"> Web Accessibility Summit, Columbia, MO

  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"> Web Accessibility Summit, Columbia, MO

  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-hiddenindicates if an element is hidden or not from a screen reader Web Accessibility Summit, Columbia, MO

  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="collapsePanel" aria-expanded="false"></button> <div id="collapsingPanel" aria-hidden="true"></div> Web Accessibility Summit, Columbia, MO

  39. Making the "show more" button accessible • First, make it a <button>. If <button> isn't possible, could use role="button" • Add aria-controls="id_of_controlled_element" • Add aria-expanded="false" • Optionally, add aria-hidden="true" to supplemental text • If button triggers a pop-up menu, add aria-haspopup="true" • As content is shown or hidden, use jQuery to change the values of aria-expanded and aria-hidden Web Accessibility Summit, Columbia, MO

  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 aria-expanded attribute and button text Solution: • show-hide-solution.html • show-hide-solution.js Web Accessibility Summit, Columbia, MO

  41. ARIA in Forms Web Accessibility Summit, Columbia, MO

  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> Web Accessibility Summit, Columbia, MO

  43. <label> or aria-label? The various W3C 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? Web Accessibility Summit, Columbia, MO

  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 Web Accessibility Summit, Columbia, MO

  45. Use HTML5 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> Web Accessibility Summit, Columbia, MO

  46. aria-describedbyfor supplemental help text • Extra instructions can be provided and pointed to via the aria-describedbyattribute. • Without this, it's unclear to the screen reader where instructions would be located Example: <label for="problem">Problem:</label> <textarea id="problem" aria-describedby="help"></textarea> <p id="help"> Please include as much detail as possible, including browser and version.</p> Web Accessibility Summit, Columbia, MO

  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!" Web Accessibility Summit, Columbia, MO

  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 Web Accessibility Summit, Columbia, MO

  49. Modal Dialogs Web Accessibility Summit, Columbia, MO

  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 Web Accessibility Summit, Columbia, MO

More Related