Mobile Accessibility & jQuery Mobile

Table of Contents

Abstract

Explore the world of accessibility on mobile devices -- including iOS, Android, and Windows mobile -- and how jQuery fits into the mobile accessibility landscape.

Slideshow URL

http://pauljadam.com/jquerymobilea11y

Presenter

Paul J. Adam

Deque Logo

Accessibility Evangelist at Deque Systems, Inc.

@pauljadam on Twitter

Paul@PaulJAdam.com

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.

iOS: VoiceOver & Zoom

VoiceOver Settings on iOS 7

VoiceOver Rotor

The VoiceOver Rotor is how users quickly navigate to semantic elements on your page.

RESPECT THE ROTOR!

To use the rotor do a 2-finger rotation gesture like your turning a knob. Keep rotating till you get to the semantic element you'd like to navigate by.

Navigate by Landmarks shown below.

Zoom

System zoom can work with VoiceOver together than the zoom view will follow the VoiceOver cursor's focus.

Subtitles & Captioning

HTML5 WebVTT Captions now working in iOS 7!!!

Accessibility Shortcut

Apple recommends that developers setting the Triple-Click Home Accessibility Shortcut to VoiceOver so you can quickly do accessibility testing of your sites and apps by pressing the home button 3 times to turn VO on and off easily.

I use this all the time!

iAccessibility Presentation for more details

Notes on Windows Phone

Windows Phone's have no screen reader accessibility support currently. Only Windows 8 tablets include the built in Narrator screen reader, zoom, and the more powerful tablets can run JAWS (paid) and NVDA (open source) screen readers in modes optimized for touch use or with normal keyboard interaction.

Android: TalkBack & Zoom

TalkBack in the Google Play store.

Nexus 4 (Android 4.2+) Accessibility Help (User Guide)

Hold hand over proximity sensor to silence TalkBack as opposed to iOS 2-finger tap.

TalkBack Settings

Speech

speech talkback settings

Display Speech Output has bad contrast, looks very bad on white backgrounds.

display speech output setting

Vibration Feedback (Replaced Kickback)

vibration feedback

Global Context Menu (kind of like a rotor in iOS but not)

global context menu

Explore by Touch

Explore by touch tutorial is basically the built in TalkBack user guide.

explore by touch tutorial

Magnification

magnification example

Use magnification gestures - Nexus 7 help

Temporarily magnify: Triple-tap & hold.
Magnify & pan: Triple-tap & hold, then drag your finger.
Toggle magnification mode in or out: Triple tap & release, or enter or exit an app to get out of magnification mode.
While you're in magnification mode, you can:
Pan: Drag two or more fingers across the screen.
Adjust zoom level: Pinch or expand using two or more fingers.

New Magnification Features in Android 4.2.2 - YouTube Video

Issues with Magnification and TalkBack Running Together

Magnification view does NOT follow TalkBack focus.

When you are zoomed in and open another app you lose your zoom :( iOS does both of these items correctly.

Accessible Android Browsers

Accessible Client-side Form Validation with HTML5 & WAI-ARIA Demo 2

WINNER = Firefox!!! Most robust accessibility of them all. Nightly build is the latest and greatest and supports aria-describedby. Best quick navigation options!

2nd place = Default Browser app included by default (The browser app has a special local context menu not available in Firefox, control navigation is like quick nav for form elements)

browser app local context menu

3rd place = Chrome and Dolphin, they both seem to be accessible but have similar levels of bugginess (quite a bit!)

TalkBack does tell you "edit text for telephone number" if it's an HTML5 input type=tel, have never seen this before.

aria-expanded=true|false works on TalkBack and most desktop screen readers but does NOT work on iOS with VoiceOver

Required attributes for form controls do seem to announce to TalkBack

Firefox for Android

New features for TalkBack users in Firefox for Android 24

What’s New for TalkBack users in Firefox 25 for Android

First round of accessibility support for Android in mobile Firefox | Marco’s accessibility blog
Quick Navigation keys now in nightly builds of Firefox native for Android | Marco’s accessibility blog

List of quick navigation keys for accessible Firefox for Android
Key Description
a Moves to next named anchor
b Moves to next button
c Moves to next combobox or listbox
e Moves to next text entry or password field
f Moves to next form field (button, combobox, text entry, radio button, slider, checkbox)
g Moves to next graphic
h Moves to next heading of any level
i Moves to next item in an unordered, ordered or definition list
k Moves to next hyperlink
l Moves to next unordered, ordered or definition list
p Moves to next page tab (in ARIA-enabled web apps)
r Moves to next radio button
s Moves to next separator
t Moves to next data table
x Moves to next checkbox

headings navigationlandmarks quick nav

Support for TalkBack’s Jelly Bean Explore By Touch now in Firefox for Android nightlies | Marco’s accessibility blog

firefox for android nightly

How to use TalkBack support in Firefox for Android for accessibility

Fragmentation

picture of many android phones representing fragmentation

Buy your phone directly from Google if you want to get the latest system updates without having to wait for your cellular carrier to approve them.

If you buy an Android phone from HTC it has the HTC Sense custom UI which may have a broken accessibility experience, same problem with Samsung TouchWiz. If you have one of these carrier phones you'd have to install a custom ROM to get to a stock Google UI.

Devices on Google Play - Either get a Nexus device or a Google Play edition (HTC One or Samsung Galaxy S 4)

Android Accessibility Presentation for more details

Don't Disable Pinch To Zoom!

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Disabling pinch to zoom is a WCAG violation. I've also seen this disable copy/paste and another built in iOS accessibility feature, Speak Selection.

DON'T RESTRICT USERS!

Mobile Browsers & Web View Apps

While there are many similarities between desktop and mobile web browsers and screen readers, there are also minor differences that are hard to keep track of unless discovered during actual device testing. E.g. some ARIA properties are supported in VoiceOver for OS X but not for iOS.

Follow WCAG 2.0 to make your websites and web view apps, e.g. PhoneGap, accessible to TalkBack users on Android.

WCAG 2.0 Checklist that links to each understanding success criterion

wcag checklist

Mobile accessibility debugging with Mobile Safari's Web Inspector

WAI-ARIA

Live regions, alerts

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

Landmarks

<nav role=navigation aria-label=Site Navigation>
<footer role=contentinfo aria-label=Footer>

name, role, value, state

aria-label="Accessible Name"
role="button"
aria-checked="true"
aria-expanded="true"

Not all ARIA properties work on all mobile devices, e.g. aria-expanded fails on iOS, on Android you have different browsers with different levels of support.

Modern Accessibility with JavaScript and WAI-ARIA presentation for more details

Custom UI Elements

divs, spans, imgs, <a with no href>

This Sencha Ext JS IMG custom UI element is NOT focusable, has no name, role, and cannot be activated with the keyboard.

<img role="presentation" id="tool-1018-toolEl" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-img x-tool-gear">

Fake button accessibility test

<div role=button tabindex=0 id=faux-button>Fake btn</div>

tabindex=0 makes the element focusable, role=button tells AT that it's a button

You can't just put role=button on your fake button and that's it... NOPE, you need device independent JavaScript event handlers TOO!

<script>
       $(document).ready(function(e) {
 $('#faux-button').on('keyup', function(e) {
 if(e.keyCode == '13'){
 alert("Ouch you hit ENTER on my fake button!");
 }
 });
 $("#faux-button").click(function(e) {
 alert("Ouch you clicked my fake button!");
 });
 });
 </script>

According to the ARIA spec you SHOULD also implement the SPACEBAR event handler.

use a <button> and life is way easier!

A <button> or <input> is already focusable natively, it also implements onClick JS events with the keyboard and not just the mouse!

<a href> is also focusable and onClick works BUT still have to add the role=button and SPACEBAR will NOT work.

<button>'s can be styled anyway you want so just use a button!

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

Forms: Validation & Usability

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

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 example of the Gmail sign up form where the label is placed to the left but cut off when viewed on an iPhone.

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

Responsive Accessible Data Tables with jQuery

Internationalization, Language, & Verbosity

VoiceOver can speak in 36 languages and dialects.

Language Rotor settings items

Set the lang attribute on the document as a whole or on parts of the document if it contains multiple languages.

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

Responsive Web Design

collapsing content, state indication, focusability, keyboard activation, role

touch friendly responsive menus

Pinch to zoom must allow scaling up to 200% to pass WCAG.

If content is hidden in a RWD view it must not be available to AT either.

Focus order should not be disrupt the meaning of the site as content shifts in RWD views.

jQuery Mobile - Going Responsive

The jQuery Mobile responsive sliding panels have problems with focus not going to the newly opened panel

jQuery Mobile

Widely Tested on Many Internet Connected Devices

Semantic HTML

Form elements - jQuery Mobile Demos

Areas for Improvement

Buttons shouldn't be 2 focusable elements

When using linear (swipe to the next element) navigation the default Button element is 2 focusable elements, the visible "Button element" <span> text, and also the <input type=button value="Button element">. VoiceOver only needs to see the input which gets its accessible name from the value attribute.

Using the Web Inspector with Mobile Safari I tested out applying aria-hidden=true to the non-semantic <span> element and now VO only focuses on the <input>! 1 element vs. 2.

Not sure that Flip Switches should be semantically identified as sliders? Or have an application landmark role?

Application role removed, slider ARIA removed, ARIA checkbox role and aria-checked=true state applied instead:

Dialogs don't close on ESC key, buttons are missing button roles and instead have a link role.

Hamburger Menu Missing State & Focus Outline

No collapsed state, no focus indicator visible :(

Table: Reflow Ignored by Screen Readers

WHY?? Does this semantically structured data table not appear as a data table to screen readers? VoiceOver for iOS and OS X thinks it's NOT a table!?

Bug caused by display: table-row-group; being applied to the table. Seems to suppress table semantics to accessibility APIs.

Using display:table has semantic effects in some screen readers

Table not found by VoiceOver

Disable the display: table-row-group; CSS property in your browser's developer tools.

Now table semantics appear to VoiceOver

Real World Examples

http://www.jqmgallery.com

Non-Semantic Mobile Frameworks

Sencha Touch live demo fail

Sencha Touch Kitchen Sink Live Demo

The fake back button is just a pretty looking <span>:

<span style="" id="ext-element-9" class="x-button-label">Back</span>

Nice how they have a class of button but no role=button?!

VoiceOver reads this as just Back, it's not even fousable with the TAB key. It's not keyboard focusable, no keyboard activation, no button role, and is actually 2 separate elements rather than 1.

First line of code to build the fake switch control element:

<div class="x-container x-field x-label-align-left x-toggle-field x-form-label-nowrap x-layout-box-item x-stretched" id="ext-togglefield-2">

Accessibility Testing with Mobile Devices

Learn VoiceOver gestures - iPhone User Guide

Practice VoiceOver gestures. Go to Settings > General > Accessibility > VoiceOver, then tap VoiceOver Practice. When you finish practicing, tap Done. If you don’t see the VoiceOver Practice button, make sure VoiceOver is turned on.

Here’s a summary of key VoiceOver gestures:

Navigate and read

Tap: Select and speak the item.

Swipe right or left: Select the next or previous item.

Swipe up or down: Depends on the rotor setting. See Use the VoiceOver rotor.

Two-finger tap: Stop speaking the current item.

Two-finger swipe up: Read all from the top of the screen.

Two-finger swipe down: Read all from the current position.

Two-finger scrub: Move two fingers back and forth three times quickly (making a “z”) to dismiss an alert or go back to the previous screen.

Three-finger swipe up or down: Scroll one page at a time.

Three-finger swipe right or left: Go to the next or previous page (such as the Home screen, Stocks, or Safari).

Three-finger tap: Speak additional information, such as position within a list or whether text is selected.

Four-finger tap at top of screen: Select the first item on the page.

Four-finger tap at bottom of screen: Select the last item on the page.

Activate

Double-tap: Activate the selected item.

Triple-tap: Double-tap an item.

Split-tap: As an alternative to selecting an item and double-tapping to activate it, touch an item with one finger, and then tap the screen with another.

Double-tap and hold (1 second) + standard gesture: Use a standard gesture. The double-tap and hold gesture tells iPhone to interpret the next gesture as standard. For example, you can double-tap and hold, and then without lifting your finger, drag your finger to slide a switch.

Two-finger double-tap: Answer or end a call. Play or pause in Music, Videos, Voice Memos, or Photos. Take a photo in Camera. Start or pause recording in Camera or Voice Memos. Start or stop the stopwatch.

Two-finger double-tap and hold: Change an item’s label to make it easier to find.

Two-finger triple-tap: Open the Item Chooser.

Three-finger triple-tap: Mute or unmute VoiceOver.

Three-finger quadruple-tap: Turn the screen curtain on or off.

Use VoiceOver with an Apple Wireless Keyboard

You can control VoiceOver using an Apple Wireless Keyboard paired with iPhone. See Use an Apple Wireless Keyboard.

Use VoiceOver keyboard commands to navigate the screen, select items, read screen contents, adjust the rotor, and perform other VoiceOver actions. Most commands use the Control-Option key combination, abbreviated in the table that follow as “VO.”

You can use VoiceOver Help to learn the keyboard layout and the actions associated with various key combinations. VoiceOver Help speaks keys and keyboard commands as you type them, without performing the associated action.

VoiceOver keyboard commands

VO = Control-Option

Turn on VoiceOver help: VO–K

Turn off VoiceOver help: Escape

Select the next or previous item: VO–Right Arrow or VO–Left Arrow

Double-tap to activate the selected item: VO–Space bar

Press the Home button: VO–H

Move to the status bar: VO–M

Read from the current position: VO–A

Read from the top: VO–B

Pause or resume reading: Control

Mute or unmute VoiceOver: VO–S

Open Notification Center: Fn–VO–Up Arrow

Open Control Center: Fn–VO–Down Arrow

Open the Item Chooser: VO–I

Double-tap with two fingers: VO–”-”

Adjust the rotor: Use Quick Nav (see below)

Swipe up or down: VO–Up Arrow or VO–Down Arrow

Adjust the speech rotor: VO–Command–Left Arrow or VO–Command–Right Arrow

Adjust the setting specified by the speech rotor: VO–Command–Up Arrow or VO–Command–Down Arrow

Turn the screen curtain on or off: VO–Shift–S

Return to the previous screen: Escape

Quick Nav

Turn on Quick Nav to control VoiceOver using the arrow keys.

Turn Quick Nav on or off: Left Arrow–Right Arrow

Select the next or previous item: Right Arrow or Left Arrow

Select the next or previous item specified by the rotor: Up Arrow or Down Arrow

Select the first or last item: Control–Up Arrow or Control–Down Arrow

Double-tap to activate the selected item: Up Arrow–Down Arrow

Scroll up, down, left, or right: Option–Up Arrow, Option–Down Arrow, Option–Left Arrow, or Option–Right Arrow

Adjust the rotor: Up Arrow–Left Arrow or Up Arrow–Right Arrow

You can also use the number keys on an Apple Wireless Keyboard to dial a phone number in Phone or enter numbers in Calculator.

Single-key Quick Nav for web browsing

When you view a webpage with Quick Nav on, you can use the following keys on the keyboard to navigate the page quickly. Typing the key moves to the next item of the indicated type. To move to the previous item, hold the Shift key as you type the letter.

Heading: H

Link: L

Text field: R

Button: B

Form control: C

Image: I

Table: T

Static text: S

ARIA landmark: W

List: X

Item of the same type: M

Level 1 heading: 1

Level 2 heading: 2

Level 3 heading: 3

Level 4 heading: 4

Level 5 heading: 5

Level 6 heading: 6

I make iOS Apps too

Mobilebility.com

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