Modern Web Accessibility with JavaScript & WAI-ARIA

Table of Contents

    Opera, Firefox, Chrome, IE, & Safari Logos with Car Engine In The Middle

    Abstract

    JavaScript is the one language that works on all web enabled devices! JavaScript is everywhere and essential for making modern websites and apps accessible. Modern screen readers have excellent support for WAI-ARIA. Learn to use the W3C's WAI-ARIA spec to create modern HTML & JavaScript web applications. See how ARIA enhancements work in different combinations of the newest browsers and screen readers.

    Slideshow URL

    http://pauljadam.com/moderna11y

    Presenter

    Paul J. Adam

    Deque Logo

    Accessibility Evangelist at Deque Systems, Inc.

    @pauljadam on Twitter

    Paul@PaulJAdam.com

    WCAG 2.0 Checklist that links to each understanding success criterion

    Slideshow

    Press the Left/Right Arrow Keys or Page Up/Down to navigate through slides, the Home key takes you home to the table of contents. Adjust text size in the Info dialog. Share this presentation on Twitter & Facebook.

    This slideshow has been developed with jQuery Mobile to create a universally accessible presentation that will work on any accessibility enabled device. PowerPoint & PDF formats are not universally accessible.

    Modern Screen Readers & Browsers

    Apple accessibility logo

    The modern accessible web can be used by browsers and screen readers that support WAI-ARIA.

    VoiceOver speech bubble reads: Mail. One new item. Double-tap to open. and Photo button. Switches camera to video.

    Browser/Screen Reader Combinations

    1. Internet Explorer 8+ & JAWS latest versions
    2. Firefox & NVDA latest versions
    3. Safari & VoiceOver latest versions (OS X & iOS)

    Can I use... WAI-ARIA Accessibility features

    NVDA logoNV Access logo

    How to use NVDA and Firefox to test your web pages for accessibility

    Picture of a shark and the words Freedom Scientific Presents, Surf's Up-Surfing the Internet with JAWS & MAGic.

    Surf's Up! - Surfing the Internet with JAWS and MAGic

    VoiceOver in Depth

    VoiceOver & JAWS make guesses on unlabelled form inputs to try and help their users. NVDA does not guess which makes it a great testing tool!

    Form Table Layout Test

    WAI-ARIA

    Accessible Rich Internet Applications (WAI-ARIA) 1.0

    Semantics is the science of meaning; in this case, used to assign roles, states, and properties that apply to user interface and content elements as a human would understand.

    Description, The contract model with accessibility APIs

    dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript

    Using WAI-ARIA in HTML - Practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification.

    ARIA Role, State, and Property Quick Reference

    Definitions of States and Properties (all aria-* attributes)

    WAI-ARIA 1.0 Authoring Practices - An author's guide to understanding and implementing Accessible Rich Internet Application.

    Roles

    A WAI-ARIA role is set on an element using a role attribute.

    <li role="menuitem">Open file…</li>

    States & Properties

    the values of properties (such as aria-labelledby) are often less likely to change throughout the application life-cycle than the values of states (such as aria-checked) which may change frequently due to user interaction

    <li role="menuitemcheckbox" aria-checked="true">Sort by Last Modified</li>

    Use ARIA attributes to control styling:

    CSS attribute selectors.

    [aria-invalid=true] {border : 2px solid red;}

    Accessible Name

    The name of a user interface element. The value of the accessible name may be derived from a visible (e.g., the visible text on a button) or invisible (e.g., the text alternative that describes an icon) property of the user interface element.

    A simple use for the accessible name property may be illustrated by an "OK" button. The text "OK" is the accessible name. When the button receives focus, assistive technologies may concatenate the platform's role description with the accessible name. For example, a screen reader may speak "push-button OK" or "OK button". The order of concatenation and specifics of the role description (e.g. "button", "push-button", "clickable button") are determined by platform accessibility APIs or assistive technologies.

    Landmark

    web rotor shown navigating by aria landmarks

    A type of region on a page to which the user may want quick access. Content in such a region is different from that of other regions on the page and relevant to a specific user purpose, such as navigating, searching, perusing the primary content, etc.

    Live Region

    Live regions are perceivable regions of a web page that are typically updated as a result of an external event when user focus may be elsewhere.

    Examples of live regions include a chat log, stock ticker, or a sport scoring section that updates periodically to reflect game statistics.

    aria-live, aria-relevant, aria-atomic, and aria-busy

    Widget

    Discrete user interface object with which the user can interact. Widgets range from simple objects that have one value or operation (e.g., check boxes and menu items), to complex objects that contain many managed sub-objects (e.g., trees and grids).

    Widget Roles

    The following roles act as standalone user interface widgets or as part of larger, composite widgets.

    The following roles act as composite user interface widgets. These roles typically act as containers that manage other, contained widgets.

    Document Structure

    The following roles describe structures that organize content in a page. Document structures are not usually interactive.

    Landmark Roles

    The following roles are regions of the page intended as navigational landmarks.

    Global States and Properties

    The following global states and properties are supported by all roles and by all base markup elements.

    Widget Attributes

    This section contains attributes specific to common user interface elements found on GUI systems or in rich internet applications which receive user input and process user actions. These attributes are used to support the widget roles .

    Widget attributes might be mapped by a user agent to platform accessibility API states, for access by assistive technologies, or they might be accessed directly from the DOM. User agents MUST provide a way for assistive technologies to be notified when states change, either through DOM attribute change events or platform accessibility API events.

    Live Region Attributes

    This section contains attributes specific to live regions in rich internet applications. These attributes may be applied to any element. The purpose of these attributes is to indicate that content changes may occur without the element having focus, and to provide assistive technologies with information on how to process those content updates. Some roles specify a default value for the aria-live attribute specific to that role. An example of a live region is a ticker section that lists updating stock quotes.

    1. aria-atomic
    2. aria-busy (state)
    3. aria-live
    4. aria-relevant

    Drag-and-Drop Attributes

    This section lists attributes which indicate information about drag-and-drop interface elements, such as draggable elements and their drop targets. Drop target information will be rendered visually by the author and provided to assistive technologies through an alternate modality.

    1. aria-dropeffect
    2. aria-grabbed (state)

    For more information about using drag-and-drop, see Drag-and-Drop Support in the WAI-ARIA Authoring Practices ([ARIA-PRACTICES]).

    Relationship Attributes

    This section lists attributes that indicate relationships or associations between elements which cannot be readily determined from the document structure.

    1. aria-activedescendant
    2. aria-controls
    3. aria-describedby
    4. aria-flowto
    5. aria-labelledby
    6. aria-owns
    7. aria-posinset
    8. aria-setsize

    General Steps for Building an Accessible Widget with WAI-ARIA

    1. Pick the widget type (role) from the WAI-ARIA taxonomy
    2. From the role, get the list of supported states and properties
    3. Establish the widget structure in the markup (parent/child)
    4. Repeat steps 1-3 for the children of the parent
    5. Establish keyboard navigation of the widget and plan for how it will be navigated to within the document
    6. Apply and manage needed WAI-ARIA states in response to user input events
    7. Synchronize the visual UI with accessibility states and properties for supporting user agents
    8. Showing and Hiding Sections in a Widget
    9. Support basic accessibility, such as alternative text on images
    10. Establish WAI-ARIA relationships between this widget and others
    11. Review widget to ensure that you have not hard coded sizes
    12. Compensate for Background Images when in High Contrast Mode
    13. Test with User agent, Assistive Technology, and People with disabilities

    Providing Keyboard Navigation for Widgets

    Reusable Component Libraries

    Rich internet applications are complex to author. To save time, it is often faster to use existing widget libraries that implement WAI-ARIA and that have already gone through:

    1. extensive assistive technology testing
    2. cross browser testing
    3. testing to ensure that the widgets respond to desktop settings
    4. testing to ensure that the widgets match a common keyboard style guide

    Some publicly available UI component libraries have already implemented WAI-ARIA. Authors can reuse such libraries to start developing accessible rich internet applications.

    Live Regions

    Simple Form Validation Using Only WAI-ARIA role=alert or aria-live=assertive

    role=status example

    WAI-ARIA Live Regions Updated

    Aria Live Regions

    Aria Live Regions, Atomic

    AJAX test cases using the WAI-ARIA Accessibility Markup

    OpenAjax Examples

    Universal Design

    Make your JavaScript device independent to be accessible.

    Mouse with a red circle crossed out.

    Keyboard with a red circle crossed out.

    Device independent event handlers

    Hover & Focus

    Focus Visible

    example where only hover is used

    a:hover { background-color: #d85a1a; color: #ffffff; }

    example where active and focus is used

    a:hover, a:active, a:focus { background-color: #d85a1a; color: #ffffff; }

    In CSS :hover only works with a mouse, use :focus anytime you use :hover to show keyboard focus

    <a href>, <button>, <input> are focusable by default and natively keyboard accessible. You should build your custom JavaScript controls out of these elements so you don't have to manually add keyboard access.

    Tabindex

    example form using tabindex plus 1 and has a messed up reading order

    NEVER USE tabindex=1+ (Always let the source code order dictate the focus & reading order)

    tabindex=”0” to make HTML elements keyboard focusable

    tabindex=”-1” to make elements focusable with JS sending the focus to that element using focus()

    Setting tabIndex in JavaScript

    Set HTML attribute tabIndex to 0 to place DOM elements in default tab order element.tabIndex = 0

    Set tabIndex = -1 to remove elements from tab order but still receive keyboard focus programmatically. element.focus();

    Languages

    Language Rotor settings items

    Languages with JAWS and MAGic on the Internet - Works on iOS

    <span lang="en-US">US English Text</span>

    VoiceOver Automatic Language Detection Demonstration - YouTube Video

    CSS3 Speech Verbosity

    Control CSS3 Speech Verbosity - Works on iOS

    Data Tables

    Accessible Data Tables with Static Headers

    Simple Data Tables

    Use table headers <th> with scope attributes to provide a unique column and row header identifier for each data cell.

    <th scope="col">Column Header</th>

    Complex Data Tables

    For complex data tables with two or more row or column headers the headers attribute is necessary on each data cell <td> with space seperated values pointing to the IDs of all its row and column headers.

    <td headers="id1 id2 id3">Complex Data Table Cell</td>

    Use a table caption with a heading element inside the caption. Summary not necessary on data tables, use the caption and easy to understand tables instead.

    <caption><h2>Table Caption</h2></caption>

    Layout Tables should never have data table attributes like summary, scope, headers. Don't use layout tables if CSS can do the job. WAI-ARIA role=presentation can suppress table cell semantics on a layout table and keep NVDA from announcing too much unnecessary info.

    Table Accessibility Test Case

    Focus Visibility

    Safari on OS X default focus outline.

    The default light blue focus outline style in Safari on OS X.

    Internet Explorer default focus outline is MUCH harder to see.

    IE's default focus outline, much harder to see the dotted outline.

    a { outline: none; } DON'T DO IT!

    eric meyer css reset may have already removed your focus style (outline:0) by default

    Custom Focus Outline with CSS

    Use CSS to enhance the visibility of user interface elements that are focused. jQuery Mobile's default focus indicator on UI buttons was too hard to see so I had to apply a custom outline with CSS.

    Showing a 4px light blue outline applied via CSS to buttons with focus.

    .ui-focus, .ui-btn:focus {
    outline: 4px solid #93BEE4;
    }

    HTML5 Audio & Video

    Safari HTML5 Audio and Video Guide

    <audio>

    Live <audio> demo

    <audio controls>
    <source src="song.ogg" type="audio/ogg" />
    <source src="song.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
    </audio> 

    <video>

    Live <video> demo

    <video width="320" height="240" autoplay controls>
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
    </video>
    <video src="video.ogv" controls>
    <object data="flvplayer.swf" type="application/x-shockwave-flash">
    <param value="flvplayer.swf" name="movie"/>
    </object>
    </video>

    Demo video with closed captions and closed audio descriptions track. Works on iOS.

    Instructions for creating videos with closed captions & closed audio descriptions track.

    Mobile Safari & VoiceOver for iOS have a bug where the <audio> and <video> elements are placed at the bottom of the focus order and you cannot give them a unique identifier.

    Transcripts, Captions, & Text or Audio Descriptions of A/V Content

    Definitions of Media Assets:

    Accessible Audio Descriptions for HTML5 Video

    Multimedia Accessibility FAQ - W3C's internal multimedia accessibility policy

    WebAIM Web Captioning Overview

    NCAM and Apple Publish "Creating Accessible iTunes U Content" (iTunes Videos) (PDF Guide)

    Accessible Video Examples

    NASA Podcasts all have Text Transcripts for each audio or video podcast!

    University of Washington DO-IT Video Transcript Example

    Video SEO Series: 7 Key Benefits of Web Video Transcripts & Captions

    Webcast Closed Captioning Samples (Working Windows Media Player Example)

    WebVTT

    WebVTT: The Web Video Text Tracks Format

    HTML5 WebVTT Example

    Video navigation using WebVTT Chapters

    IE10 Video Captioning Internet Explorer 10 <video> is now accessible with TTML and WebVTT <track> captioning support.

    HTML5 Text Alternatives

    HTML5: Techniques for providing useful text alternatives

    ARIA Examples

    WAI-ARIA techniques with code examples (and User Agent notes)

    OpenAjax Examples

    JavaScript Libraries with ARIA

    Try jQuerydojo toolkityui library

    Open source always wins over closed source.

    Open source JS libraries like jQuery are evolving with more accessibility and WAI-ARIA support with each iteration.

    YOU can contribute back to open-source projects to improve their accessibility for you and others.

    Some closed-source libaries like Sencha's frameworks don't even have any semantic HTML elements and instead are built out of a bunch of <div>s.

    Forms

    HTML5 & WAI-ARIA Forms with jQuery Validation

    1. Accessible Client-side Form Validation with HTML5
    2. Accessible Client-side Form Validation with HTML5 & WAI-ARIA
    3. Accessible Client-side Form Validation with HTML5, WAI-ARIA, & the jQuery Validation Plugin

    Accessible Browser Validation in HTML5

    Simple Form Validation Using WAI-ARIA aria-describedby, aria-required, aria-invalid, & jQuery .focus()

    Dialogs

    How do you make screen reader users aware of newly added content? Most dialogs are inserted into the bottom of the HTML source code/DOM so if you don't send focus to the dialogs a screen reader user will not hear the newly inserted content.

    New HTML content like dialogs should be inserted into the DOM directly after the element that activated it. Focus should be sent to and trapped inside the new dialog. The ESC key should close the dialog. Make sure the X (close) button is keyboard accessible and has a text alternative. When the dialog closes, focus should return to the element that activated it.

    Making an accessible dialog box

    Modals

    A big problem with modal dialogs, e.g. a photo lightbox with a grayed out background, is that focus is not trapped inside the active dialog but instead stuck underneath the dialog inside the grayed out content.

    role=dialog

    Alerts

    role=alertdialog

    Custom-Built Dialogs

    Make Dynamic Alerts And Dialogs Accessible

    Demos

    The Incredible Accessible Modal Window

    Accessible jQuery-ui Dialog Widget

    Using Aria role=dialog to expose a dialog (pop-up div box)

    jQuery UI Dialog

    Carousels & Sliders

    Need to have a method to pause or stop distracting content like an auto-sliding carousel.

    Many times the images have text embedded inside them which cannot be increased and often there is no full text alternative that matches the image text.

    Screenshot of the webkeyit slider that needs a few tweaks

    YUI Library Examples: Carousel Control: Using the Carousel ARIA Plugin

    http://shouldiuseacarousel.com

    Datepickers

    Date picker - Web Experience Toolkit (WET)

    Travelocity Advanced Flight Search Datepicker Live Real World Example

    Autocomplete

    jQueryUI Autocomplete

    Autocomplete Widget - Accessible jQuery-ui Components Demonstration

    Yahoo.com's Search based on YUI AutoComplete Control

    Accordions

    Accordion - jQuery UI

    You could also use aria-expanded=true/false

    Tabs

    Tabs - jQuery UI

    Example 34 - Tab Panel - OpenAjax Alliance Accessibility Examples (PROBLEM WITH role=application in NVDA/Firefox) - problem is when you TAB away from the tab and focus on the first heading, NVDA will not read the heading, however, if you remove role=application this problem goes away. Good example of how role=application is DANGEROUS!

    Advanced ARIA tip #1: Tabs in web apps

    Session Timeouts

    Session timeout shown as a javascript alert()

    Session timeout shown as a new browser window

    Session timeout shown as a modal dialog

    Don’t enforce timing in pages, or

    If a site has a timeout limit make sure the user is alerted to the timeout accessibly and they can extend the time before being booted out the system

    Can also give user control over timeouts, length, use

    Old fashioned JavaScript alert()'s work well to get the users attention even if they've left the browser window.

    Modal dialogs may not get the users attention of they're working in another app.

    Title Attributes

    Required for iframes

    Title = Help Tag in VoiceOver

    VoiceOver Utility, hints, speak help tag setting

    title on a link on google's logo on their search results page

    link to google home page with their title shown as the vo help tag

    <a class="gbqla" href="/webhp?hl=en&amp;tab=ww" onclick="gbar.logger.il(39)" title="Go to Google Home"></a>

    There's nothing really "wrong" with using the title attribute, but don't duplicate the link text in the title attribute. The title should provide additional, useful information if used.

    Titles will not work in mobile devices for sighted users, however, they will work with VoiceOver. On OS X VoiceOver reads the title attribute with an adjustable delay that is a bit long by default or the user can press VO+SHIFT+H to manually read it but they will not know of its presence unless they wait for the delay and hear it or manually activate it. VO calls it the Help Tag. On VO iOS the help tag (title) is spoken much faster than on OS X with no ability to manually activate it.

    The thing that everyone forgets about title attributes is that for Low Vision, mouse users who are zoomed in at extremely high levels the title attribute appears as a tool tip when they mouseover the HTML elements with a title. So a large graphic or UI element may be cut off from view but the title would appear and explain what they're looking at.

    The best accessibility criticism with title is that it does not work with the keyboard only or mobile devices. The browser developers could fix this though!

    jQuery UI title tooltip plugin so title works on focus?

    Mobile Accessibility

    web rotor set to navigate by headingsweb rotor settings items 1

    web rotor settings items 2web rotor settings items 3

    iAccessibility

    jquery mobile shown on two phones, and iPad, and a Nook tablet

    jQuery Mobile(open-source)

    Don't use Sencha Touch (closed-source)

    Place Label Above Input

    iPhone screenshot of gmail signup form with labels placed to the left. Labels are cut off when input's have focus due to iOS zooming in when the keyboard displays.

    By placing the label directly above the input you improve the experience for mobile and screen magnification users. When focus is in the input the label will no longer be cut off like in the below example of the Gmail sign up form where the label is placed to the left but cut off when viewed on an iPhone.

    Mobile Accessibility Survey

    WebAIM Screen Reader Survey #4 Mobile Findings

    TalkBack & Magnification Accessibility in Android 4.2+

    Session ID
    WEB-076
    Date & Time
    Friday, March 1, 2013 - 3:10 PM PST
    Location
    Manchester C - Deque, 2nd Floor

    Modern Web Editors

    IntelliSense Support for ARIA Roles in Visual Studio 2012

    Visual Studio 2012 makes accessibility easier. There’s now IntelliSense for ARIA roles, attributes and properties in HTML elements

    ARIA Properties Are Supported in IntelliSense

    Dreamweaver CS6 also includes code completion for WAI-ARIA now!

    The Future of Modern Web Accessibility

    Description, Example User Action: Scroll Down

    address browser independence for gestures and others user interactions

    For example, if a user wants to scroll down a page, they might use their finger on a touch screen, or click a scroll bar with a mouse, or use a scroll wheel, or press Page Down on a keyboard, or say "scroll down" with a voice command. All those different user actions can be translated into a simple IndieUI scroll event. (Specifically, scrollrequest(x/y), as shown in the illustration.)

    IndieUI Overview

    WAI-ARIA 1.1 - aria-describedat

    Info

    This presentation and slideshow template is always evolving, most ALT text should be added and correct. Please contact me if there are any issues.

    Press the Left/Right Arrow Keys or Page Up/Down to navigate through slides, the Home key takes you home to the table of contents. If you're using a screen reader you may need to use the pass through key first then hit arrow keys. Page up/down works with screen readers enabled without the need for a pass through key.

    JAWS Pass Key Through, INSERT+3

    NVDA NVDA+f2: pass Next Key Through

    Close

    Share

    Twitter Facebook Cancel