Explore the world of accessibility on mobile devices -- including iOS, Android, and Windows mobile -- and how jQuery fits into the mobile accessibility landscape.
http://pauljadam.com/jquerymobilea11y
Accessibility Evangelist at Deque Systems, Inc.
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.
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.
System zoom can work with VoiceOver together than the zoom view will follow the VoiceOver cursor's focus.
HTML5 WebVTT Captions now working in iOS 7!!!
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!
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.
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.
Explore by touch tutorial is basically the built in TalkBack user guide.
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
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 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)
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
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
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 |
How to use TalkBack support in Firefox for Android for accessibility
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)
<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!
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
Simple Form Validation Using Only WAI-ARIA role=alert or aria-live=assertive
<nav role=navigation aria-label=Site Navigation>
<footer role=contentinfo aria-label=Footer>
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.
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.
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!
Safari HTML5 Audio and Video Guide
<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 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>
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.
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)
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)
HTML5 & WAI-ARIA Forms with jQuery Validation
Accessible Browser Validation in HTML5
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.
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>
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.
VoiceOver can speak in 36 languages and dialects.
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
Control CSS3 Speech Verbosity - Works on iOS
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
Form elements - jQuery Mobile Demos
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.
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.
No collapsed state, no focus indicator visible :(
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
Disable the display: table-row-group; CSS property in your browser's developer tools.
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">
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.
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.
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.
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.
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
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.
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
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