Post on 25-Dec-2015
transcript
Responsive Design and Accessibility
Hans Hillen (TPG)
Material for this Course
www.paciellogroup.com/training/CSUN2013/responsive
or:
tinyurl.com/csun13-responsive
Links will be sent by email after the workshop
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 2
In This Workshop:
Introduction to Mobile Accessibility
Introduction to Responsive Design
How Responsive Design influences Accessibility
Color, Sizing and Reading Order
Supporting Screen Readers
Guidelines and Testing
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 3
Responsive Design and Accessibility - CSUN 2013 4
Training Objectives
Understand how people with disabilities use mobile devices and the barriers they typically face
Understand some of the techniques used to build accessible mobile sites
Learn what to test for and how to do so
Note: This training does not cover accessibility in native mobile apps, and we will be focusing on the main two platforms: iOS and Android02 / 25 / 13
Introduction to Mobile Accessibility
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 5
Responsive Design and Accessibility - CSUN 2013 6
What is mobile?
Not just phones… all portable electronicso Tablets, games consoles, TVs, etc.
o More users: cheaper technology reduces Digital Divide
Native appso Software written for specific mobile devices and their
operating systems and hardware features
o Note: May incorporate web content
Mobile Webo Sites and applications built for viewing on mobile browsers
o Note: Feature gap to native apps is narrowing due to standards such as HTML5 and ARIA
02 / 25 / 13
Responsive Design and Accessibility - CSUN 2013 7
What is mobile accessibility? Making a website or application more
accessible to people with disabilities using mobile devices
The basics are the same as on desktop:o Alternatives: images, audio, video
o Labeling: form controls, headings, buttons
o Good structure: landmarks, lists, heading levels
o Use native controls where possible
o Content order02 / 25 / 13
Mobile AccessibilityWho are we talking about?
Diverse user model – 4 main user groups:
o Vision
o Hearing
o Mobility
o Cognitive and learning
Assistive technology users
o Speech output (screen readers) or braille output (Bluetooth braille displays)
o Voice input
o Magnification
Access services users
o Captions
o Subtitles
o Audio description
o Sign language interpretation
802 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Mobile AccessibilityWho are we talking about? (continued)
Hidden disabilitieso Chronic fatigue
o Photo sensitivity
o Mental health
Agingo Spans various disabilities and user groups
o Often first-time users
o Note: Older people, like young children, find primary solid color easier to see and draw meaning from than pastel colors, etc.
902 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Mobile AccessibilityWho are we talking about? (continued)
Temporaryo Broken wrist
o Repetitive strain injury
o Tiredness
Culturalo Language
o Color and iconography
Technologyo Connectivity, data limitations, etc.
o Particular software and hardware requirements or preferences• mobileaccessibility.info Device Details
1002 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Shared web experienceso Common ground between mainstream users and
users with disabilities• Comparable to temporary disability (in the car, at
concerts, walking)• http://www.w3.org/WAI/mobile/experiences
o Empathy• Accessibility is about understanding people and the
barriers that they face.• Getting your own experience of accessibility helps you to
put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications
11
Mobile AccessibilityWho are we talking about? (continued)
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Mobile by definition is disabling for all…
Small screeno iPhone is 1/12 of a typical desktop screen
o 40-pixel finger is big on small targets
o Can be hard to reach some parts of the screen
Small text sizeso is like having low vision
Small input devices
Eyes-free usageo e.g. in car
o is like being blind
12
Mobile AccessibilityConstraints of a mobile environment
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Mobile by definition is disabling for all…
Reliant on toucho Not as usable in the rain
o Need to use special gloves
One-handed usage
Low light
Connectivity
Data limitations13
Mobile AccessibilityConstraints of a mobile environment (continued)
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Better integrated accessibility than desktop
Location and direction
Camera and augmented reality
Accelerometer and screen orientation
Touch screen
Proximity (NFC)
Environmental awareness (light/dark conditions)
14Possibilities!
Mobile AccessibilityCapabilities of a mobile environment
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
FaceTime used by the deaf
Custom vibrations as ringtone equivalents
Speeches given using iPad with Proloquo
HueVue app that helps color blind people identify colors
Braille:
o V-B-Reader app (Android) that enables Braille to be read using vibrating touch screens
o Touch-screen Braille writer
Innovative assistive technology that’s useful to all users!
o Apple’s Siri voice recognition
o Google Voice’s voicemail transcription
o Custom vibrations on iPhone and Android
15
Mobile AccessibilityEnabling features and innovations
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
16
Accessibility feature or setting User
Speech output Blind, low vision, cognitive
Zoom Low vision, cognitive, mobility
Inverse colors, brightness control Low vision, cognitive
Headphones Hearing, cognitive
Speak text Low vision, cognitive
Voice input Blind, low vision, cognitive, mobility
External / virtual keyboard, directional pad
Blind, mobility
Captioning Deaf, cognitive
Audio description Blind, low vision
Mobile AccessibilityHow do people with disabilities use mobile devices?
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
17
Mobile AccessibilityHow do people with disabilities use mobile devices?
Two main interaction methods
1. Explore by toucho Drag finger over screen
o Items under your finger are described by screen reader
o Double tap to open/activate
2. Gesture navigation02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Two main interaction methods
1. Explore by touch
2. Gesture navigationo Swipe right/left moves focus
to next/previous content in sequence
o Items are described by screen reader as focus moves
o Double tap to open/activate
18
Mobile AccessibilityHow do people with disabilities use mobile devices?
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Responsive Design and Accessibility - CSUN 2013 19
iOS accessibility features and API are more mature
Android devices have some good accessibility features and Google are working to improve• Current market share favors iOS and Android devices over other
vendors
oOther mobile platforms:• BlackBerry: Curve smartphones have free BlackBerry Screen Reader.
Good information on their site.• Symbian: Phones have accessibility features, including text-to-
speech, but platform currently has no accessibility API.• Windows Phone 8: Phones appears to have accessibility features but
no accessibility API.
Mobile AccessibilityThe current situation
02 / 25 / 13
Techniques for Mobile Accessibility
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 20
Principles of accessibility for the Mobile Web:
Use progressive enhancement
Use a responsive design approach
Use web standards as intended
Support native accessibility settings and assistive technology for your target platforms
21
Techniques for mobile accessibilityDevelopment strategy
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Use progressive enhancement
o Build for lowest common denominator device
o Use feature detection over browser detection – not all devices have the same levels of support for the same features
o Some devices have better support for ARIA and HTML5 by the browser and assistive technology, and color palettes and fonts in the operating system
o Even some basic HTML4 (e.g. the title attribute) is not supported in the same way as it is on desktop
o Note: In this training, we are talking about the Mobile Web with an emphasis on iOS. All techniques discussed are supported by iOS, but some platforms may not
22
Techniques for mobile accessibilityDevelopment strategy
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Use a responsive design approach
o We want content and functionality to adapt to the mobile interface
o Leverages CSS 3 media queries to enhance fluid layouts
No need to maintain two codebases – one for desktop, one for mobile
Can be built to principles of progressive enhancement
o Build for “mobile first” – focus on content and small screen then build up
o May be improved with JavaScript enhancements
Screens of 320-pixel width are typical but not guaranteed
More later on testing sites that use responsive design
Guidelines for Responsive Web Design
Responsive Web Design by Ethan Marcotte
23
Techniques for mobile accessibilityResponsive design
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Use web standards as intended
o Accessibility is already “baked in” (along with interoperability for browsers, platforms and assistive technology)
o Build core content using HTML, preferably HTML5
• For example, code a button as a <button> rather than a styled link. Screen readers announce the trait of an element before reading the accessible name (link text/label/text alternative). Users expect a link to open a resource and a button to carry out an action. It can be confusing when these are misused.
o Prefer standard control elements over custom implementations
o Enhance content with CSS, WAI-ARIA (for OS-like controls), etc.
24
Techniques for mobile accessibilityDevelopment strategy
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Mobile support for WAI-ARIA
Source: http://caniuse.com/#feat=wai-aria
25
Techniques for mobile accessibilityDevelopment strategy
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Support native accessibility settings and assistive technology for your target platforms
o Examples:
• Pinch zoom should not be suppressed
• In iOS, you can select text and have it announced (Settings > General > Accessibility > Speak Selection), so:• Use text over images of text
• Support text selection: suppressing the ability to copy/paste text also suppresses the ability to speak selection
26
Techniques for mobile accessibilityDevelopment strategy
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Inputting text, numbers, email addresses, URLs, search terms, etc.o Difficult using touch in general
o Especially hard for low vision, mobility or blind users
o Often people revert to Siri and voice input
Support predictive search (autocomplete widget)o Useful for dyslexics
Replace free input with more helpful controlso Drop downs, radio buttons, etc.
o Enhance using HTML5 input types
27
Techniques for mobile accessibilityForms
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
HTML5 input typeso Contextual keyboards in iOS with useful buttons (Previous, Next, Autofill)
helps users to avoid mistakes
o Degrade gracefully to text input elements
o Supported in Mobile Safari and Webkit (Android)
o Can use alternative JavaScript widgets as a fallback
o HTML5 support, solutions and workarounds
28
Techniques for mobile accessibilityForms
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Valid HTML is importantoWell formatted code is generally a good idea as it
ensures robustness when software needs to work with HTML
o Use the W3C Validation Service: http://validator.w3.org/
o Not all validation errors are relevant to ensuring accessibility• You can filter results for accessibility using the
Web Accessibility Toolbar or bookmarklet• Use Nu Markup Validation Service with this tool:http
://validator.w3.org/nu/29
Techniques for mobile accessibilityCode validation
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Introduction to Responsive Design
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 30
What is Responsive Design "Responsive web design (often
abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)."
Wikipedia
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 31
But What is It Really Though Basically, responsive design means MEDIA
QUERIES@media screen and (min-width: 980px) { /* desktop */}
@media screen and (min-width: 768px) and (max-width: 979px) { /* tablet (portrait) */}
@media screen and (max-width: 767px) { /* mobile (landscape) */}
@media screen and (max-width: 479px) { /* mobile (portrait)*/}
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 32
Support for Media Queries Supported in all modern browsers
o In desktop as well as mobile space
o but not in IE8 (Leave it! Don't try to hack)
o http://caniuse.com/css-mediaqueries
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 33
How Responsive Design Influences Accessibility
WHEN IN DOUBT:
General accessibility rules still apply in responsive design!
Follow WCAG 2.0:o Provide proper labeling, descriptions, and text
alternatives
o Ensure text is scalable, avoid using images of text
o Maintain a logical reading and tab order
o Ensure color contrast is sufficient, indicate focus programmatically and visually
o Use semantic markup
o Ensure content is keyboard accessible 02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 35
Which Space to Support
"Why can't we just limit the responsive behavior to mobile devices?"
"Why do we have to support keyboard accessibility on mobile devices? That's a desktop thing!"
-- Some angry designers in my past
What do you think the advantage is of responsive design on a desktop screen?02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 36
Responsive on Desktop
Ideal for screen magnifier users
Ideal for low vision users
Ideal for cognitively impaired users
Ideal for motor impaired users
So…Responsive is for mobile only? I think not!
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 37
Color and Size
Color Contrast
As a responsive page is modified between responsive break points, foreground may overlap background differently
This can cause color contrast issues that were not present in the desktop version of a page.
Testers: Keep on top of your designers!
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 39
Example of Responsive Color Contrast Issue
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 40
Color Contrast Solution
For risky resolutions, modify the background or foreground to avoid the issue
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 41
Text Size / Zooming
I prefer zoom over text-only resize over in page sizing controlso These days browsers apply proper text scaling as part of
zooming
o Supporting browser zooming is sufficient for WCAG 2.0 compliance
o Browser zooming is easier to support for developers, and less disruptive for the existing layout
Make RWD work for you: Increase of text size / zoom level should trigger responsive switch!
This already happens automatically in some browsers, but will have to be applied manually in others
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 42
Supporting Screen Readers
Reading Order Problem
Responsive design resizes, reflows and modifies content (no problem here yet)
In some cases, the visual order of content is rearranged, while the structural order is noto While the CSS layout changes, the underlying HTML
stays the same
Negative side effects: o Structural content order no longer matches visual
layout order
o Inconsistencies in visual order across responsive layouts are likely to cause confusion with end users
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 44
Problem Example
Search comes before menu
Search now comes before menu
Login button now comes before both
780px
480px
320px
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 45
People Affected
Sighted keyboard users:o Expect to traverse focusable elements in the UI in the
same order as the visual layout of the page
Screen reader users:o Will find it more difficult to follow instructions by sighted
people (e.g. “Click the second button to log in...”)
Screen magnifier users:o Will have more difficulty navigating with high magnification
factors (as the order changes depending on viewport size)
Cognitively impaired users (and all users, really): o Depend on consistency for a good user experience
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 46
Applicable WCAG 2.0 Success Criteria
Section 508 refresh will require compliance with:o 1.3.2 Meaningful Sequence: When the sequence in which
content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)
o 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)
o 3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA)
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 47
Solution It’s fine to resize, reflow, filter and
modify…o as long as the order of content stays
consistent:• visually • and in the document structure
Search field and menu always stay in the same order, even on smaller screens
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 48
Use of ARIA in Responsive Design
ARIA is supposed to be supported on mobile devices as well
IOS does a good job, but as usual support is by no means complete
Webkit on mobile is not necessarily the same as webkit on Desktop (accessibility wise)
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 49
Notifying Screen Readers In some cases, a responsive switch may cause more
than just a layout reflow.o Content can be filtered out
o Interactive controls may change into different types of UI• For example, a group of links may change into a dropdown button
o For a screen reader user it may not be clear that this change occurs,• e.g. when a window resizes or a tablet's orientation changes
because the user holds it differently.
In this case: Notify the user!o For example, a live region update "The content on this
page has been updated based on a change in the browser window size"
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 50
THE CSS Question
In Responsive Design, multiple controls may be present for the same behavioro Links at the top of the page in desktop view
o Dropdown button in mobile view
When CSS is disabled, there may be redundant content o This goes against CSS best practices (don't hide content that
shouldn't be there
o But removing it from the DOM just because a resize occurred isn't good either
What do you think, should this use of CSS be allowed for the sake of responsive design?
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 51
Data Tables
Very difficult to make accessible
Changing Layout of table will generally break what makes it accessibleo Changing display styles will also remove how
the table is exposed to AT
o IE does not allow different layout, which means you have to remove table related elements altogether
Failed Attempt
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 52
Recommended ResponsiveData Tables
Filament group has a good option:o Leave data table in tact
o Allow user to choose columns
Another Recommendation:o Allow users to switch to
original version of the table
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 53
Providing a Way Out
Responsive Design Can be confusing to inexperienced users, or users with specific expectations
Always allow users to switch to the default, desktop version of a site.
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 54
Guidelines and Testing
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 55
Mobile AccessibilityGuidelines and standards
The problem:
There is no one set of internationally accepted mobile guidelines and standards
WCAG was written for desktop
Mobile is more diverse than desktop
o More browser, OSs, hardware, software
o More agile and fast moving
There is no graded mobile browser support baseline similar to Yahoo!’s Browser Test Baseline
Without clear standards, we fall back on WCAG 2.0, which provides a sound foundation but is only the start of the story
5602 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Web Accessibility Initiative resources (now fairly dated)o Mobile Web Best Practices (MWBP) 1.0
o Web Content Accessibility Guidelines (WCAG) 2.0
o Relationship between MWBP and WCAG
Mobile Accessibility Guidelines by Funka Nu
Mobile Website Guidelines by the University of Austin
BBC Mobile Accessibility Guidelines by Henny Swano Coming soon!
o 72 technology-agnostic standards and guidelines
o Technology specific techniques – HTML, Android and iOS
o Getting to grips with a mobile accessibility strategy
57
Mobile AccessibilityGuidelines and standards: resources
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Responsive Design and Accessibility - CSUN 2013 58
Mobile TestingStrategy
Use site statistics from your own site to assess mobile OS and browser usage of your audience
Assess your existing mobile support strategy
o Which devices in your strategy have accessibility support?
Support most popular devices on the market
o Not all have good support for accessibility at the moment
• HTML5accessibility.com
• caniuse.com (can filter for mobile browsers)
o Monitor upcoming releases
• iOS Accessibility on apple.com
• Android Accessibility (eyes-free) – Note: currently not up to date
Monitor current user preferences
o WebAIM’s screen reader user surveys are useful here
Be aware of the laws governing accessibility in your country02 / 25 / 13
Mobile TestingStrategy: device usage
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 59
Make a test strategyo Henny Swan has developed a great starting
point• http://www.iheni.com/mobile-accessibility-tests/
oMost important to test with speech output only – on iOS, this means testing with VoiceOver
o Also, keep in mind:• Zoom only• Zoom with speech output• Invert colors
60
Mobile TestingStrategy
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Responsive Designo Create a baseline test for the site
oWork together with deign / developer team as much as possible
o Identify interface elements that change as different CSS media queries become active
o Test only the elements that change at each of the supported screen resolutions
o Remember to test both landscape and portrait
61
Mobile TestingStrategy
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Test without zoom or speech output features:o Is there sufficient contrast?
o Does color reinforce meaning rather than convey meaning alone?
o Are links visually evident?
o Are navigation cues clear?
o Is pinch/double-tap zoom supported (HTML only)?
o Are the correct keyboard/input types used in forms, i.e. tel, date, numbers, letters, etc.?
o Large areas of empty space are not present?
o Labels and form inputs are not separated by large areas of empty space?
62
Mobile Testing Checklist
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Test without zoom or speech output features (continued):o Can you complete all actions?
o Do pop ups fit within the viewport, i.e. you don’t have to swipe to find the close/submit/cancel buttons?
o Do pop ups have a close button?
o Is all content and functionality available by touch?
o There is a clear visible focus on links, form fields, buttons, etc. when tested with a keyboard (Android)?
o Text is selectable, i.e. users can copy and paste and use speak aloud options?
63
Mobile Testing Checklist
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Test with speech output only:o Note: On iOS devices, use the Rotor to test content
on elements like images, headings, containers/landmarks, forms, links, buttons etc.
o Are images labeled appropriately?
o Are decorative images ignored?
o Is the content order logical?
o Are landmarks labeled or have the appropriate heading announced with them?
o Does the content order logical?
o Do form fields have clear labels?64
Mobile Testing Checklist
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Test with speech output only (continued):o Is the appropriate keyboard used in forms, i.e. tel,
date, numbers, letters, etc.?
o Are data table headings read correctly?
o Are hints appropriate?
o Users are notified of navigation cues, i.e. if you can scroll pages/screen by swiping right when in portrait?
o Are changes of state announced?
o Does link text describe the target?
o Are images and links to the same target grouped into one touch zone?
65
Mobile Testing Checklist
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Test with speech output only (continued):o Can you complete all actions?
o Is content in a different language read correctly?
o Are buttons used for actions?
o Have the correct HTML controls been used?
o Is hidden content appropriate and necessary?
o Do pop ups have a close button?
o Does focus stay in the pop up rather than continue though the rest of the page/screen?
o Is all content and functionality available by swiping left and right and up and down?
66
Mobile Testing Checklist
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
How to test
Responsive Design and Accessibility - CSUN 2013
Responsive Design and Accessibility - CSUN 2013
Basicso No longer in touch-to-activate mode; now touch-to-
explore
o Double-tap to activate
o Horizontal swipes move focus between elements
o Vertical swipes move between landmarks (set via Rotor)
o The Rotor – a virtual wheel for changing modes
o Three-finger scrolling
Tips (gestures as of iOS 6)
o Three-finger triple tap = Speech Off
o Three-finger quadruple tap = Screen Curtain
Testing Accessibility on iOSVoiceOver
02 / 25 / 13 68
Testing Accessibility on iOSVoiceOver
1. Triple click the Home key to activate
2. Dial to open the Rotor
3. Swipe up/down to navigate parts
4. Swipe right/left for next/previous content
6902 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Testing Accessibility on iOSVoiceOver
1. Triple click the Home key to activate
2. Dial to open the Rotor
3. Swipe up/down to navigate parts
4. Swipe right/left for next/previous content
7002 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Testing Accessibility on iOSVoiceOver
1. Triple click the Home key to activate
2. Dial to open the Rotor
3. Swipe up/down to navigate parts
4. Swipe right/left for next/previous content
7102 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Responsive Design and Accessibility - CSUN 2013 72
These mostly “just work”, but must test in combination – e.g. VoiceOver running with Zoom may experience focus issues
Pinch zoom
Zoom (system-wide)
o Three-finger gestures for zoom control/movement
o Zoom up to 5x
Large Text
o Note: Only available in some of Apple’s own native apps
Invert Colors / Black on White
Captioned content (QuickTime)
Testing Accessibility on iOSOther accessibility features
02 / 25 / 13
Responsive Design and Accessibility - CSUN 2013
PracticePractice using accessibility features
VoiceOver on iOS has a VoiceOver Practice screen
Zoom can be practiced from its screen in Settings
02 / 25 / 13 73
Responsive Design and Accessibility - CSUN 2013
PracticeGet a feel for an accessible app
Use iOS system apps such as Mail, Notes, Calendar, Stocks
Useful cheat sheet – Learning iOS VoiceOver gestures: http://a11y.cc/iosvoref
02 / 25 / 13 74
http://youtu.be/t60voPIY5xY
75
Testing Accessibility on iOSVoiceOver: videos
http://youtu.be/QJr8HDviws0
http://youtu.be/OVA76LGyB1o02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013
Questions?
02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 76