iAccessibility

Next
  1. iAccessibility

iAccessibility

Next

iAccessibility

Apple accessibility logo

@PaulJAdam on Twitter

Paul@PaulJAdam.com iMessage me too ;)

www.PaulJAdam.com

 

Vision, Hearing, Learning, Physical & Motor

Next

Vision

vision

Hearing

hearing

Learning, Physical & Motor

Learning, Physical & Motor

VoiceOver

Next

VoiceOver

VoiceOver settingsVoiceOver settings screen 2

Zoom & Large Text

Next

Zoom

zoom settings

Zoom now works together with VoiceOver on iOS 6. Like JAWS & ZoomText.

unzoomed iphonezoomed iphone

Large Text

large text settings56pt text in Messages app.56pt text in email app on iPad.

Invert Colors

Next

Invert Colors

High contrast capability. Can also be useful for nighttime reading.

safari page normal colorssafari page invert colors

Speak Selection & Speak Auto-text

Next

Speak Selection

Speak selection settingsSpeak selection dialectsselecting a paragraph of text and the speak button appearsspeak selection highlighting in action

Speak Auto-text

Automatically speak auto-corrections and auto-capitalizations. This works with VO off as well. You'll hear your auto-correct mistakes before you send them ;)

Hearing

Next

Hearing

hearingsounds and vibration patterns settingsvibration pattern text tone contactsreminder alerts custom vibration patterncreating a new custom vibration patternvideos settings closed captions

Learning

Next

Guided Access

guided access settingsTriple-click Home Accessibility Options include: Guided Access, VoiceOver, Invert Colors, Zoom, and AssistiveTouchguided access selecting buttons to disableentering a pass codeguided access now enabled

Physical & Motor

Next

Physical & Motor

physical and motor settings

Assistive Touch

assistive touch siri, favorites, device, home buttonaccess to hardware device buttonsaccess to gestures, shake, screenshot, and multitaskingassistive touch settingscreating a new rotor-like gesture

Home-click Speed

home click speed settings

Incoming Calls

incoming calls settings

Triple-click Home

Next

Triple-click Home

Apple recommends that all developers set this option for quick access to accessibility testing features.

triple-click settingsTriple-click Home Accessibility Options include: Guided Access, VoiceOver, Invert Colors, Zoom, and AssistiveTouch

Maps

Next

Maps

maps label size settingsmaps small labelsmaps large labels

Using IOS 6 MAPS With Voiceover

Siri & VoiceControl

Two iPhones. The iPhone in the foreground is displaying the Voice Control screen awaiting a spoken command. There is a large cancel button at the bottom.  The iPhone in the background shows iPhone dialing

iOS Voice Commands Not for iPad :(

Hold down home button for a few seconds until it beeps then say a command. Hold headset button for iPhone earbuds.

siri what can i say

Siri FAQ

http://www.apple.com/iphone/features/siri.html

Blind user shown in Apple Siri Promo video.

Siri Commands

 

Blind Photography

Next

Blind Photography

Number, size, and location of faces announced by VoiceOver.

Panorama photos also tell a VoiceOver user to "Slow Down", and "Move Up/Down"

voiceover accessible face detectionvoiceover accessible panorama

FaceTime

Next

FaceTime

Guy with a hearing aid signing through FaceTime for iPhone   Two kids signing through an iPod touchZVRS app banner with two women signing

ZVRS App (Video Relay Services)
Still waiting for Apple to advertise VoiceOver on TV.

FaceTime only works over WiFi . For 3G video calls try Skype or Fring. Tango is recommended for Accessibility

Default Apps are Great for Cognitive Accessibility

Next

Cognitive Accessibility

We all have problems remembering things. These included apps are great for cognitive accessibility!

Reminders

Calendar

Notes

These all sync between iPads, iPhones, and Macs via iCloud.

 

"Hidden" VoiceOver Features

Next

Item Chooser

item chooser showing site map selected

Items selected in the item chooser also announce their screen location.

Label Element

tweet compose buttonlabel element fixing icn nav bar dark compose tweetlabel element changed to compose tweet

New iOS 6 Accessibility Features

Next

New iOS 6 Accessibility Features

Tap labels to set focus on explicitly connected inputs. Ever try to tap a tiny little radio button in iOS 5? Very hard! Now you can just tap the label giving users a large tap target.

Highlight Selection

Guided Access for Students with Autism

Home-click Speed

Made for iPhone Hearing Aids

Custom Vibration Patterns for All Notifications

VoiceOver and Zoom Work Together! & AssistiveTouch

Accessibility Actions - rotor setting that allows easy access to custom gestures like swipe right to delete.


Testing for Accessibility

Next

Testing for Accessibility

Screen Curtain

To turn off the display while you use VoiceOver, triple-tap the screen with three fingers.

Keyboard Commands

White iPad 2 with apple bluetooth keyboard.iPhone 4 with bluetooth slider case

VoiceOver Keyboard Commands for iOS 4.1 and Later

VoiceOver Commands / Keyboard Shortcuts

Navigate using a Bluetooth Keyboard on your iOS Device

Gesture Commands

Bookmarklets

Favelets for Checking Web Accessibility

Before & After (Good & Bad) Testing Playgrounds

W3C's Before and After Demonstration

Accessible University 2.0

Use a Checklist

WCAG 2.0 Checklist

Mobile Safari Accessibility

Next

Mobile Safari Accessibility

Web Rotor

web rotor set to navigate by headingsweb rotor settings items 1

web rotor settings items 2web rotor settings items 3

navigate images settings

VoiceOver Web Rotor Video Demonstration

Reader

yahoo articleyahoo article cleaned up in reader

Readability

Website article show before using Redability.Website article screen shot taken after running Redability on the iPad.

Readability Bookmarklets for iOS

Readability Native iOS App

Languages

Next

Languages

VoiceOver works in over 30 languages

Language Rotor

Language Rotor settings items

Automatic Language Detection

Languages with JAWS and MAGic on the Internet

VoiceOver Automatic Language Detection Demonstration

Learn a Foreign Language

You too can pass Spanish class!

Proofreading

VoiceOver also great for proofreading important emails or presentations, hint, hint ;)

Accessible Websites and Web View Apps

Next

Accessible Websites and Web View Apps

Simple Mobile & Screen Magnification Usability & Accessibility Enhancements

Place Label Above Input

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.

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.

Position Formatting Instructions Below Input with CSS

input format 5 digits below the input

Using CSS you can enclose formatting instructions in a span tag and position them directly under the input so they are still visible when zoomed in.

Hiding Labels Using CSS

3 input phone number fields with labels visually hidden

You may want to visually hide some labels where the input might be obvious to most sighted users. We can use CSS positioning to do this. The code for this comes from the WebAIM article, CSS in Action: Invisible Content Just for Screen Reader Users.

HTML5 Forms & jQuery Validation

Next

HTML5 Forms & jQuery Validation

HTML5 Input Types

DEVELOPERS Y U NO USE HTML5 INPUT TYPES?

Comparison of Input Types and Displayed Keyboard on the iPhone
type=text type=email type=tel
 

 

 

Default keyboard displays alphabet characters with first letter capitalized by default. Email keyboard displays alphabet with additional @ and . symbol. Tel keyboard displays 10-digit numeric phone keypad with +, *, and # key.

Date type displays a date spinner popover on the iPad.Date spinner control replaces standard keyboard on iPhone.

iPhone Keyboard Comparison Screenshots
with Pattern Attribute
input type=number input type=number pattern=”[0-9]*”
The number type without a pattern attribute displays a keyboard with many small number and symbol buttons. The number type with a pattern attribute displays the 10-digit keypad with very large buttons similar to the tel keyboard.

HTML5 Validation

Accessible Client-side Form Validation with HTML5

Does not work on iOS :(

Screenshots of Different Input Types with the Required Attribute in Action on Mac OS X Lion
Browser Text Checkbox Radio
Chrome First Name * textbox focused Popover ! Please fill out this field. Checkbox focused * I agree to terms of service. Popover ! Please check this box if you want to proceed. Gender * fieldset legend Male radio button focused Popover ! Please select one of these options. Female radio button.
Firefox First Name * textbox red border focused Popover Please fill out this field. Checkbox focused red border * I agree to terms of service. Popover Please check this box if you want to proceed. Gender * fieldset legend Male radio button red border focused Popover Please select one of these options. Female radio button red border.

Enhancing Forms with ARIA

Screenshot of a form that only indicates required fields by coloring their labels red. A big red circle with a line through it is placed over the screenshot.Are you kidding me meme face accessibility blog

aria-required=”true”

The easiest enhancement is to add the aria-required=”true” attribute to all required fields in your form.

Below is a screenshot of the VoiceOver Caption Panel on OS X Lion which provides an excellent way to visualize ARIA/screen reader output if you’re deaf or hard of hearing or don’t want to annoy others in the room with your computer speaking everything out loud. I think it would be cool if iOS could do this as well!

Label reads: First Name *, VO output speaks: First Name * required edit text

Don’t worry about having the HTML5 required attribute and the aria-required=”true” attribute and causing repetition. All the screen readers I’ve tested only speak required once. Here aria-required is your fallback for browsers who do not support HTML5 like Internet Explorer. This way screen readers which support ARIA will speak the ARIA attribute when used with IE and ignore the HTML5 attribute.

aria-describedby

password format instructions connected to input with aria-describedby

aria-label

Only works in iOS if there is not a connected label. Otherwise, label overrides aria-label.

jQuery Validation

Accessible Client-side Form Validation with HTML5, WAI-ARIA, & the jQuery Validation Plugin

 

WAI-ARIA

Next

WAI-ARIA

wai-aria badge

Introduction to WAI ARIA

Safari HTML Reference - Supported Accessibility Roles

Table describing mapping of WAI-ARIA roles to accessibility APIs.

Set of ARIA Test Cases - Code Talks Wiki

web rotor shown navigating by aria landmarks

Mobile Web Apps

Next

Mobile Web Apps

jQuery Mobile

jquery mobile shown on 4 different phones

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

Docs and Demos

Form Element Gallery

Sites That Behave Like Apps

Configuring Web Applications - Safari Web Content Guide

<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link rel="apple-touch-startup-image" href="/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<audio> and <video>

Next

<audio> and <video>

<video>

<audio>

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

HTML5rocks Audio + Video

Safari HTML5 Audio and Video Guide

Everything you need to know about HTML5 video and audio

YouTube App

new youtube app search by closed captionsyoutube app CC buttonselect no subtitles or english

youtube app video shown with captions

Native App Accessibility

Next

Native App Accessibility

supporting accessibility does not impact your ability to innovate and create beautiful iPhone applications

Apple Docs

Interface Builder Accessibility Attributes

labels traits hints in interface builder

The UI Accessibility programming interface defines the following attributes:

- (BOOL)isAccessibilityElement
- (NSString *)accessibilityLabel
- (UIAccessibilityTraits)accessibilityTraits
- (CGRect)accessibilityFrame
- (NSString *)accessibilityHint
- (NSString *)accessibilityValue

Make an image view accessible

UIImageView *view = [[UIImageView alloc] initWithImage:image]; view.accessibilityLabel = @"Apple Logo";


@property BOOL isAccessibilityElement
■ Return YES to make VoiceOver see this element ■ Default is YES for UIKit controls
@property(copy) NSString *accessibilityLabel
■ A textual representation of the element

Best Practices

• Use short, concise labels
■ Good: “Add city”
■ Bad: “Adds a city to the list of cities”
• Don’t include the type information in the label ■ Good: “Remove city”
■ Bad: “Remove city button”

@property(copy) NSString *accessibilityHint
■ Optional
■ Provides more information to aid VoiceOver users
@property UIAccessibilityTraits accessibilityTraits
■ Defines behavior
■ Bitmask of integers

Enhance the Accessibility of Table Views

Testing with Accessibility Inspector in the iOS Simulator

Using Accessibility Inspector to Test Your Application

turning ax inspector on in iOS simulatorax inspector showing label, value, traits, and frame coordinates, voiceover cursor show as rectangle around objectax inspector shown inactive, done by clicking the x close button, needs to be inactive to simulate scrolling

grouping accessibility children

@property BOOL shouldGroupAccessibilityChildren
■ Group items together to control the order VoiceOver visits elements

uiaccessibilitytraitheader

UIAccessibilityTraits UIAccessibilityTraitHeader
■ New trait in order to mark elements as a header

 

Check if Assistive Technology Running?

Next

Check if Assistive Technology Running?

Useful API for Accessibility Apps
BOOL UIAccessibilityIsVoiceOverRunning()
■ Is VoiceOver on?
- (void)accessibilityElementDidBecomeFocused
■ Did VoiceOver focus move to an element?
UIAccessibilityAnnouncementNotification
■ Tell VoiceOver to speak something

/*
Assistive Technology

Use UIAccessibilityIsVoiceOverRunning() to determine if VoiceOver is running.
Listen for UIAccessibilityVoiceOverStatusChanged to know when VoiceOver starts or stops.
*/
UIKIT_EXTERN BOOL UIAccessibilityIsVoiceOverRunning() NS_AVAILABLE_IOS(4_0);
UIKIT_EXTERN NSString *const UIAccessibilityVoiceOverStatusChanged NS_AVAILABLE_IOS(4_0);

// Returns whether system audio is mixed down from stereo to mono.
UIKIT_EXTERN BOOL UIAccessibilityIsMonoAudioEnabled() NS_AVAILABLE_IOS(5_0);
UIKIT_EXTERN NSString *const UIAccessibilityMonoAudioStatusDidChangeNotification NS_AVAILABLE_IOS(5_0);

// Returns whether the system preference for closed captioning is enabled.
UIKIT_EXTERN BOOL UIAccessibilityIsClosedCaptioningEnabled() NS_AVAILABLE_IOS(5_0);
UIKIT_EXTERN NSString *const UIAccessibilityClosedCaptioningStatusDidChangeNotification NS_AVAILABLE_IOS(5_0);

// Returns whether the system preference for invert colors is enabled.
UIKIT_EXTERN BOOL UIAccessibilityIsInvertColorsEnabled() NS_AVAILABLE_IOS(6_0);
UIKIT_EXTERN NSString *const UIAccessibilityInvertColorsStatusDidChangeNotification NS_AVAILABLE_IOS(6_0);

// Returns whether the app is running under Guided Access mode.
UIKIT_EXTERN BOOL UIAccessibilityIsGuidedAccessEnabled() NS_AVAILABLE_IOS(6_0);
UIKIT_EXTERN NSString *const UIAccessibilityGuidedAccessStatusDidChangeNotification NS_AVAILABLE_IOS(6_0);

Accessibility Notifications

Tell VoiceOver something happened
• When a few items change, VoiceOver should “update”
UIAccessibilityPostNotification( UIAccessibilityLayoutChangedNotification, nil);
• When the screen changes, VoiceOver should “reset”
UIAccessibilityPostNotification( UIAccessibilityScreenChangedNotification, nil);

State

/*
Informs whether the receiving view should be considered modal by accessibility. If YES, then
elements outside this view will be ignored. Only elements inside this view will be exposed.
default == NO
*/
@property(nonatomic) BOOL accessibilityViewIsModal NS_AVAILABLE_IOS(5_0);


@property BOOL accessibilityElementsHidden
■ Tells VoiceOver to ignore all elements contained within

@property CGPoint accessibilityActivationPoint
■ The point where VoiceOver will simulate a touch event
- (BOOL)accessibilityPerformEscape
■ Allows VoiceOver to cancel or exit a modal state

iOS 6 new stuff

New VoiceOver API
- (BOOL)accessibilityPerformMagicTap
■ Control what happens when user does two-finger double-tap

/*
Implement accessibilityPerformMagicTap on an element, or the application, in order to provide a context-sensitive action.
For example, a music player can implement this to start and stop playback, or a recording app could start and stop recording.
Return YES to indicate that the action was handled.
default == NO
*/
- (BOOL)accessibilityPerformMagicTap NS_AVAILABLE_IOS(6_0);

Move VoiceOver focus

■ Use the element as the argument when posting
UIAccessibilityLayoutChangedNotification or UIAccesibilityScreenChangeNotification
UIButton *moveToButton = ...
UIAccessibilityPostNotification( UIAccessibilityScreenChangedNotification, moveToButton);

 

UIAccessibility Header Files

Next

Read the header files!

accessibility header files in xcode

#import <UIKit/UIAccessibilityAdditions.h>
#import <UIKit/UIAccessibilityConstants.h>
#import <UIKit/UIAccessibilityElement.h>
#import <UIKit/UIAccessibilityIdentification.h>
#import <UIKit/UIAccessibilityZoom.h>

/*
UIAccessibility

UIAccessibility is implemented on all standard UIKit views and controls so
that assistive applications can present them to users with disabilities.

Custom items in a user interface should override aspects of UIAccessibility
to supply details where the default value is incomplete.

For example, a UIImageView subclass may need to override accessibilityLabel,
but it does not need to override accessibilityFrame.

A completely custom subclass of UIView might need to override all of the
UIAccessibility methods except accessibilityFrame.
*/
@interface NSObject (UIAccessibility)

 

/*
Accessibility Traits

Traits are combined in a mask to help assistive applications understand
the meaning and intended use of a particular accessibility element.

UIKit applies appropriate traits to all standard controls, however the
following traits may be used in conjunction with custom controls.

When setting accessiblity traits, combine custom traits with
[super accessibilityTraits]. An incorrect combination of custom traits
will cause accessibility clients to incorrectly interpret the element.
Use common sense when combining traits.
*/
typedef uint64_t UIAccessibilityTraits;

// Used when the element has no traits.
UIKIT_EXTERN UIAccessibilityTraits UIAccessibilityTraitNone;

// Used when the element should be treated as a button.
UIKIT_EXTERN UIAccessibilityTraits UIAccessibilityTraitButton;

// Used when the element should be treated as a link.
UIKIT_EXTERN UIAccessibilityTraits UIAccessibilityTraitLink;

// Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
UIKIT_EXTERN UIAccessibilityTraits UIAccessibilityTraitHeader NS_AVAILABLE_IOS(6_0);

// Used when the text field element should also be treated as a search field.
UIKIT_EXTERN UIAccessibilityTraits UIAccessibilityTraitSearchField;

// Used when the element should be treated as an image. Can be combined with button or link, for example.
UIKIT_EXTERN UIAccessibilityTraits UIAccessibilityTraitImage;

Direct Interaction, Drag & Drop

Next

Direct Interaction

piano app great for direct interaction

Using direct interaction
@implementation PianoView
- (id)initWithFrame:(CGRect)frame {
...
KeyView *aKey = [KeyView new];
aKey.isAccessibilityElement = YES;
aKey.accessibilityLabel = @"A";
.... }
- (UIAccessibilityTraits)accessibilityTraits {
return UIAccessibilityTraitAllowsDirectInteraction;
}
- (BOOL)isAccessibilityElement {
return YES; }

Drag & Drop

Using announcements
#define Post UIAccessibilityPostNotification
- (void)continueTracking:(id)touch {
if (isNearEdge(touch))
Post(UIAccessibilityAnnouncementNotification,
@"Nearing %@ border", borderLabel(touch));
if (isOnEmptySpace(touch))
Post(UIAccessibilityAnnouncementNotification,
@"On empty space. Lift finger to cancel");
if (isOnDifferentIcon(touch))
Post(UIAccessibilityAnnouncementNotification,
@"On top of Artists. Lift finger to replace");
}

Apple's Accessibility Videos & Tutorials

Next

Apple's Accessibility Videos & Tutorials

Apple Developer Center Videos

WWDC2012

Accessibility for iOS - Raising the Bar
View in iTunes
Presentation Slides

Improving Accessibility in Books
View in iTunes
Presentation Slides

WWDC2011

Combining Web Accessibility and Automation on iOS
View in iTunes
Presentation Slides

iOS Accessibility - Making great accessible apps
View in iTunes
Presentation Slides

WWDC2010

Accessibility on iPhone OS
View in iTunes
Presentation Slides

Safari Development Resources

Improving Accessibility in Web Applications


Stanford Fall 2010

stanford ios programming class accessibility presentation

Developing Apps for iOS
Accessibility On IOS Make an app for everyone
View In iTunes

Accessibility Inspirational Video

Developers in Action - Making a difference. One app at a time.
Per Busch
Ariadne GPS app
Speech Language Pathology

Apple Accessibility Developer Mailing List

Accessibility-dev

Email Apple at accessibility@apple.com

App Wins

Next

App Wins

iTunes

Next

iTunes

universal access logo and itunes ax logo

captions shown on video content
audio descriptions options on iPhone
language subtitles options on iPhone

Creating Accessible iTunes U Content Videos in iTunes

Creating Accessible iTunes U Content PDF

Example Video with Closed Captions and Closed Descriptions

iBooks

Next

iBooks

iBooks notes and bookmarks shown in action

iBooks with largest text on Verdana

Creating ePubs

Creating ePub files with Pages

A table of contents is automatically generated, which allows readers to jump quickly to any chapter title, heading, or subheading in the book. Review your document to be certain that appropriate paragraph styles are applied to all chapters, titles, headings, and subheadings in your document.

Then open the Document inspector and click TOC (table of contents). Select all of the paragraph styles that you want to appear in the TOC, and then click Update.

Reformat any images, shapes, or other objects in your document to make them inline objects.

How to make your own epub books for iBooks

Adding Alt Text to iBook ePubs

Making Image in ePub Documents for the iPad Accessible

  1. Export to ePub from Pages for Mac.
  2. Expand with Stuffit Expander.
  3. Find .xhtml files.
  4. Edit with Dreamweaver.
  5. Add Alt text.
  6. Convert back to ePub with Calibre.

Or Just Use iBooks Author

asf

AppleTV

Next

AppleTV

apple tv 2 with remote

Apple TV with VoiceOver is amazing! I have never had independent access to so many movies and television programs. Thank you, #apple

http://twitter.com/#!/TaiBlas/status/9809514329022464

Apple TV (2nd generation): Apple Continues to Set the Accessibility Standard

Caption your iTunes Content

Searching for Closed Captioned Content in iTunes U

Search Tech-Ease 4 All in iTunes for some CC content.

VoiceOver in action on Apple TV 2nd gen and activating captions.


Dialog

Info

This presentation is ever enolving, most ALT text should be added now and correct. Please contact me if there are any issues.

You can use the left and right arrow keys to navigate but if you're using a screen reader you may need to invote the pass through key first then hit arrow keys.

JAWS Pass Key Through, INSERT+3

NVDA NVDA+f2: pass Next Key Through

Close

Share

Twitter Facebook Cancel