Hans hillen tpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 76

Responsive Design and Accessibility PowerPoint PPT Presentation


  • 114 Views
  • Uploaded on
  • Presentation posted in: General

Hans Hillen (TPG). Responsive Design and Accessibility. Material for this Course. www.paciellogroup.com /training/CSUN2013/ responsive o r: tinyurl.com /csun13- responsive Links will be sent by email after the workshop. In This Workshop:. Introduction to Mobile Accessibility

Download Presentation

Responsive Design and Accessibility

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Hans hillen tpg

Hans Hillen (TPG)

Responsive Design and Accessibility


Material for this course

Material for this Course

  • www.paciellogroup.com/training/CSUN2013/responsiveor:tinyurl.com/csun13-responsive

  • Links will be sent by email after the workshop

Responsive Design and Accessibility - CSUN 2013


In this workshop

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

Responsive Design and Accessibility - CSUN 2013


Training objectives

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 Android

Responsive Design and Accessibility - CSUN 2013


Introduction to mobile accessibility

Introduction to Mobile Accessibility

Responsive Design and Accessibility - CSUN 2013


What is mobile

What is mobile?

  • Not just phones… all portable electronics

    • Tablets, games consoles, TVs, etc.

    • More users: cheaper technology reduces Digital Divide

  • Native apps

    • Software written for specific mobile devices and their operating systems and hardware features

    • Note: May incorporate web content

  • Mobile Web

    • Sites and applications built for viewing on mobile browsers

    • Note: Feature gap to native apps is narrowing due to standards such as HTML5and ARIA

Responsive Design and Accessibility - CSUN 2013


What is mobile accessibility

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:

    • Alternatives: images, audio, video

    • Labeling: form controls, headings, buttons

    • Good structure: landmarks, lists, heading levels

    • Use native controls where possible

    • Content order

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility who are we talking about

Mobile AccessibilityWho are we talking about?

  • Diverse user model – 4 main user groups:

    • Vision

    • Hearing

    • Mobility

    • Cognitive and learning

  • Assistive technology users

    • Speech output (screen readers) or braille output (Bluetooth braille displays)

    • Voice input

    • Magnification

  • Access services users

    • Captions

    • Subtitles

    • Audio description

    • Sign language interpretation

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility who are we talking about continued

Mobile AccessibilityWho are we talking about? (continued)

  • Hidden disabilities

    • Chronic fatigue

    • Photo sensitivity

    • Mental health

  • Aging

    • Spans various disabilities and user groups

    • Often first-time users

    • Note: Older people, like young children, find primary solid color easier to see and draw meaning from than pastel colors, etc.

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility who are we talking about continued1

Mobile AccessibilityWho are we talking about? (continued)

  • Temporary

    • Broken wrist

    • Repetitive strain injury

    • Tiredness

  • Cultural

    • Language

    • Color and iconography

  • Technology

    • Connectivity, data limitations, etc.

    • Particular software and hardware requirements or preferences

      • mobileaccessibility.info Device Details

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility who are we talking about continued2

Mobile AccessibilityWho are we talking about? (continued)

  • Shared web experiences

    • 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

    • 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

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility constraints of a mobile environment

Mobile AccessibilityConstraints of a mobile environment

Mobile by definition is disabling for all…

  • Small screen

    • iPhone is 1/12 of a typical desktop screen

    • 40-pixel finger is big on small targets

    • Can be hard to reach some parts of the screen

  • Small text sizes

    • is like having low vision

  • Small input devices

  • Eyes-free usage

    • e.g. in car

    • is like being blind

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility constraints of a mobile environment continued

Mobile AccessibilityConstraints of a mobile environment (continued)

Mobile by definition is disabling for all…

  • Reliant on touch

    • Not as usable in the rain

    • Need to use special gloves

  • One-handed usage

  • Low light

  • Connectivity

  • Data limitations

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility capabilities of a mobile environment

Mobile AccessibilityCapabilities of a mobile environment

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

Possibilities!

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility enabling features and innovations

Mobile AccessibilityEnabling features and innovations

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

    • V-B-Reader app (Android) that enables Braille to be read using vibrating touch screens

    • Touch-screen Braille writer

  • Innovative assistive technology that’s useful to all users!

    • Apple’s Siri voice recognition

    • Google Voice’s voicemail transcription

    • Custom vibrations on iPhone and Android

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility how do people with disabilities use mobile devices

Mobile AccessibilityHow do people with disabilities use mobile devices?

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility how do people with disabilities use mobile devices1

Mobile AccessibilityHow do people with disabilities use mobile devices?

Two main interaction methods

  • Explore by touch

    • Drag finger over screen

    • Items under your finger are described by screen reader

    • Double tap to open/activate

  • Gesture navigation

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility how do people with disabilities use mobile devices2

Mobile AccessibilityHow do people with disabilities use mobile devices?

Two main interaction methods

  • Explore by touch

  • Gesture navigation

    • Swipe right/left moves focus to next/previous content in sequence

    • Items are described by screen reader as focus moves

    • Double tap to open/activate

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility the current situation

Mobile AccessibilityThe current situation

  • iOSaccessibility features and API are more mature

  • Android devices have some good accessibility features and Google are working to improve

    • Current market share favors iOSand Android devices over other vendors

  • Other 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.

Responsive Design and Accessibility - CSUN 2013


Techniques for mobile accessibility

Techniques for Mobile Accessibility

Responsive Design and Accessibility - CSUN 2013


Techniques for mobile accessibility development strategy

Techniques for mobile accessibilityDevelopment strategy

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

Responsive Design and Accessibility - CSUN 2013


Techniques for mobile accessibility development strategy1

Techniques for mobile accessibilityDevelopment strategy

  • Use progressive enhancement

    • Build for lowest common denominator device

    • Use feature detection over browser detection – not all devices have the same levels of support for the same features

    • Some devices have better support for ARIA and HTML5 by the browser and assistive technology, and color palettes and fonts in the operating system

    • Even some basic HTML4 (e.g. the title attribute) is not supported in the same way as it is on desktop

    • 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

Responsive Design and Accessibility - CSUN 2013


Techniques for mobile accessibility responsive design

Techniques for mobile accessibilityResponsive design

  • Use a responsive design approach

    • We want content and functionality to adapt to the mobile interface

    • 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

    • Build for “mobile first” – focus on content and small screen then build up

    • 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

Responsive Design and Accessibility - CSUN 2013


Techniques for mobile accessibility development strategy2

Techniques for mobile accessibilityDevelopment strategy

  • Use web standards as intended

    • Accessibility is already “baked in” (along with interoperability for browsers, platforms and assistive technology)

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

    • Prefer standard control elements over custom implementations

    • Enhance content with CSS, WAI-ARIA (for OS-like controls), etc.

Responsive Design and Accessibility - CSUN 2013


Techniques for mobile accessibility development strategy3

Techniques for mobile accessibilityDevelopment strategy

  • Mobile support for WAI-ARIA

Source: http://caniuse.com/#feat=wai-aria

Responsive Design and Accessibility - CSUN 2013


Techniques for mobile accessibility development strategy4

Techniques for mobile accessibilityDevelopment strategy

  • Support native accessibility settings and assistive technology for your target platforms

    • 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

Responsive Design and Accessibility - CSUN 2013


Techniques for mobile accessibility forms

Techniques for mobile accessibilityForms

  • Inputting text, numbers, email addresses, URLs, search terms, etc.

    • Difficult using touch in general

    • Especially hard for low vision, mobility or blind users

    • Often people revert to Siri and voice input

  • Support predictive search (autocomplete widget)

    • Useful for dyslexics

  • Replace free input with more helpful controls

    • Drop downs, radio buttons, etc.

    • Enhance using HTML5 input types

Responsive Design and Accessibility - CSUN 2013


Techniques for mobile accessibility forms1

Techniques for mobile accessibilityForms

  • HTML5 input types

    • Contextual keyboards in iOS with useful buttons (Previous, Next, Autofill) helps users to avoid mistakes

    • Degrade gracefully to text input elements

    • Supported in Mobile Safari and Webkit (Android)

    • Can use alternative JavaScript widgets as a fallback

    • HTML5 support, solutions and workarounds

Responsive Design and Accessibility - CSUN 2013


Techniques for mobile accessibility code validation

Techniques for mobile accessibilityCode validation

  • Valid HTML is important

    • Well formatted code is generally a good idea as it ensures robustness when software needs to work with HTML

    • Use the W3C Validation Service: http://validator.w3.org/

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

Responsive Design and Accessibility - CSUN 2013


Introduction to responsive design

Introduction to Responsive Design

Responsive Design and Accessibility - CSUN 2013


What is responsive design

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

Responsive Design and Accessibility - CSUN 2013


But what is it really though

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)*/

}

Responsive Design and Accessibility - CSUN 2013


Support for media queries

Support for Media Queries

  • Supported in all modern browsers

    • In desktop as well as mobile space

    • but not in IE8 (Leave it! Don't try to hack)

    • http://caniuse.com/css-mediaqueries

Responsive Design and Accessibility - CSUN 2013


How responsive design influences accessibility

How Responsive Design Influences Accessibility


When in doubt

WHEN IN DOUBT:

  • General accessibility rules still apply in responsive design!

  • Follow WCAG 2.0:

    • Provide proper labeling, descriptions, and text alternatives

    • Ensure text is scalable, avoid using images of text

    • Maintain a logical reading and tab order

    • Ensure color contrast is sufficient, indicate focus programmatically and visually

    • Use semantic markup

    • Ensure content is keyboard accessible

Responsive Design and Accessibility - CSUN 2013


Which space to support

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?

Responsive Design and Accessibility - CSUN 2013


Responsive on desktop

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!

Responsive Design and Accessibility - CSUN 2013


Color and size

Color and Size


Color contrast

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!

Responsive Design and Accessibility - CSUN 2013


Example of responsive color contrast issue

Example of Responsive Color Contrast Issue

Responsive Design and Accessibility - CSUN 2013


Color contrast solution

Color Contrast Solution

  • For risky resolutions, modify the background or foreground to avoid the issue

Responsive Design and Accessibility - CSUN 2013


Text size zooming

Text Size / Zooming

  • I prefer zoom over text-only resize over in page sizing controls

    • These days browsers apply proper text scaling as part of zooming

    • Supporting browser zooming is sufficient for WCAG 2.0 compliance

    • 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

Responsive Design and Accessibility - CSUN 2013


Supporting screen readers

Supporting Screen Readers


Reading order problem

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 not

    • While the CSS layout changes, the underlying HTML stays the same

  • Negative side effects:

    • Structural content order no longer matches visual layout order

    • Inconsistencies in visual order across responsive layouts are likely to cause confusion with end users

Responsive Design and Accessibility - CSUN 2013


Problem example

Problem Example

780px

480px

Search comes before menu

Search now comes before menu

320px

Login button now comes before both

Responsive Design and Accessibility - CSUN 2013


People affected

People Affected

  • Sighted keyboard users:

    • Expect to traverse focusable elements in the UI in the same order as the visual layout of the page

  • Screen reader users:

    • Will find it more difficult to follow instructions by sighted people (e.g. “Click the second button to log in...”)

  • Screen magnifier users:

    • Will have more difficulty navigating with high magnification factors (as the order changes depending on viewport size)

  • Cognitively impaired users (and all users, really):

    • Depend on consistency for a good user experience

Responsive Design and Accessibility - CSUN 2013


Applicable wcag 2 0 success criteria

Applicable WCAG 2.0 Success Criteria

  • Section 508 refresh will require compliance with:

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

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

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

Responsive Design and Accessibility - CSUN 2013


Solution

Solution

  • It’s fine to resize, reflow, filter and modify…

    • 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

Responsive Design and Accessibility - CSUN 2013


Use of aria in responsive design

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)

Responsive Design and Accessibility - CSUN 2013


Notifying screen readers

Notifying Screen Readers

  • In some cases, a responsive switch may cause more than just a layout reflow.

    • Content can be filtered out

    • Interactive controls may change into different types of UI

      • For example, a group of links may change into a dropdown button

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

    • For example, a live region update "The content on this page has been updated based on a change in the browser window size"

Responsive Design and Accessibility - CSUN 2013


The css question

THE CSS Question

  • In Responsive Design, multiple controls may be present for the same behavior

    • Links at the top of the page in desktop view

    • Dropdown button in mobile view

  • When CSS is disabled, there may be redundant content

    • This goes against CSS best practices (don't hide content that shouldn't be there

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

Responsive Design and Accessibility - CSUN 2013


Data tables

Data Tables

  • Very difficult to make accessible

  • Changing Layout of table will generally break what makes it accessible

    • Changing display styles will also remove how the table is exposed to AT

    • IE does not allow different layout, which means you have to remove table related elements altogether

  • Failed Attempt

Responsive Design and Accessibility - CSUN 2013


Recommended responsive data tables

Recommended ResponsiveData Tables

  • Filament group has a good option:

    • Leave data table in tact

    • Allow user to choose columns

  • Another Recommendation:

    • Allow users to switch to original version of the table

Responsive Design and Accessibility - CSUN 2013


Providing a w ay out

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.

Responsive Design and Accessibility - CSUN 2013


Guidelines and testing

Guidelines and Testing

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility guidelines and standards

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

    • More browser, OSs, hardware, software

    • 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

Responsive Design and Accessibility - CSUN 2013


Mobile accessibility guidelines and standards resources

Mobile AccessibilityGuidelines and standards: resources

  • Web Accessibility Initiative resources (now fairly dated)

    • Mobile Web Best Practices (MWBP) 1.0

    • Web Content Accessibility Guidelines (WCAG) 2.0

    • Relationship between MWBP and WCAG

  • Mobile Accessibility Guidelines by FunkaNu

  • Mobile Website Guidelines by the University of Austin

  • BBC Mobile Accessibility Guidelines by Henny Swan

    • Coming soon!

    • 72 technology-agnostic standards and guidelines

    • Technology specific techniques – HTML, Android and iOS

    • Getting to grips with a mobile accessibility strategy

Responsive Design and Accessibility - CSUN 2013


Mobile testing strategy

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

    • Which devices in your strategy have accessibility support?

  • Support most popular devices on the market

    • Not all have good support for accessibility at the moment

      • HTML5accessibility.com

      • caniuse.com(can filter for mobile browsers)

    • Monitor upcoming releases

      • iOS Accessibility on apple.com

      • Android Accessibility (eyes-free) – Note: currently not up to date

  • Monitor current user preferences

    • WebAIM’s screen reader user surveys are useful here

  • Be aware of the laws governing accessibility in your country

Responsive Design and Accessibility - CSUN 2013


Mobile testing strategy device usage

Mobile TestingStrategy: device usage

Responsive Design and Accessibility - CSUN 2013


Mobile testing strategy1

Mobile TestingStrategy

  • Make a test strategy

    • Henny Swan has developed a great starting point

      • http://www.iheni.com/mobile-accessibility-tests/

    • Most important to test with speech output only – on iOS, this means testing with VoiceOver

    • Also, keep in mind:

      • Zoom only

      • Zoom with speech output

      • Invert colors

Responsive Design and Accessibility - CSUN 2013


Mobile testing strategy2

Mobile TestingStrategy

  • Responsive Design

    • Create a baseline test for the site

    • Work together with deign / developer team as much as possible

    • Identify interface elements that change as different CSS media queries become active

    • Test only the elements that change at each of the supported screen resolutions

    • Remember to test both landscape and portrait

Responsive Design and Accessibility - CSUN 2013


Mobile testing checklist

Mobile Testing Checklist

  • Test without zoom or speech output features:

    • Is there sufficient contrast?

    • Does color reinforce meaning rather than convey meaning alone?

    • Are links visually evident?

    • Are navigation cues clear?

    • Is pinch/double-tap zoom supported (HTML only)?

    • Are the correct keyboard/input types used in forms, i.e. tel, date, numbers, letters, etc.?

    • Large areas of empty space are not present?

    • Labels and form inputs are not separated by large areas of empty space?

Responsive Design and Accessibility - CSUN 2013


Mobile testing checklist1

Mobile Testing Checklist

  • Test without zoom or speech output features (continued):

    • Can you complete all actions?

    • Do pop ups fit within the viewport, i.e. you don’t have to swipe to find the close/submit/cancel buttons?

    • Do pop ups have a close button?

    • Is all content and functionality available by touch?

    • There is a clear visible focus on links, form fields, buttons, etc. when tested with a keyboard (Android)?

    • Text is selectable, i.e. users can copy and paste and use speak aloud options?

Responsive Design and Accessibility - CSUN 2013


Mobile testing checklist2

Mobile Testing Checklist

  • Test with speech output only:

    • Note: On iOS devices, use the Rotor to test content on elements like images, headings, containers/landmarks, forms, links, buttons etc.

    • Are images labeled appropriately?

    • Are decorative images ignored?

    • Is the content order logical?

    • Are landmarks labeled or have the appropriate heading announced with them?

    • Does the content order logical?

    • Do form fields have clear labels?

Responsive Design and Accessibility - CSUN 2013


Mobile testing checklist3

Mobile Testing Checklist

  • Test with speech output only (continued):

    • Is the appropriate keyboard used in forms, i.e. tel, date, numbers, letters, etc.?

    • Are data table headings read correctly?

    • Are hints appropriate?

    • Users are notified of navigation cues, i.e. if you can scroll pages/screen by swiping right when in portrait?

    • Are changes of state announced?

    • Does link text describe the target?

    • Are images and links to the same target grouped into one touch zone?

Responsive Design and Accessibility - CSUN 2013


Mobile testing checklist4

Mobile Testing Checklist

  • Test with speech output only (continued):

    • Can you complete all actions?

    • Is content in a different language read correctly?

    • Are buttons used for actions?

    • Have the correct HTML controls been used?

    • Is hidden content appropriate and necessary?

    • Do pop ups have a close button?

    • Does focus stay in the pop up rather than continue though the rest of the page/screen?

    • Is all content and functionality available by swiping left and right and up and down?

Responsive Design and Accessibility - CSUN 2013


How to test

How to test

Responsive Design and Accessibility - CSUN 2013


Testing accessibility on ios voiceover

Testing Accessibility on iOSVoiceOver

  • Basics

    • No longer in touch-to-activate mode; now touch-to-explore

    • Double-tap to activate

    • Horizontal swipes move focus between elements

    • Vertical swipes move between landmarks (set via Rotor)

    • The Rotor – a virtual wheel for changing modes

    • Three-finger scrolling

  • Tips (gestures as of iOS 6)

    • Three-finger triple tap = Speech Off

    • Three-finger quadruple tap = Screen Curtain

Responsive Design and Accessibility - CSUN 2013


Testing accessibility on ios voiceover1

Testing Accessibility on iOSVoiceOver

  • Triple click the Home key to activate

  • Dial to open the Rotor

  • Swipe up/down to navigate parts

  • Swipe right/left for next/previous content

Responsive Design and Accessibility - CSUN 2013


Testing accessibility on ios voiceover2

Testing Accessibility on iOSVoiceOver

  • Triple click the Home key to activate

  • Dial to open the Rotor

  • Swipe up/down to navigate parts

  • Swipe right/left for next/previous content

Responsive Design and Accessibility - CSUN 2013


Testing accessibility on ios voiceover3

Testing Accessibility on iOSVoiceOver

  • Triple click the Home key to activate

  • Dial to open the Rotor

  • Swipe up/down to navigate parts

  • Swipe right/left for next/previous content

Responsive Design and Accessibility - CSUN 2013


Testing accessibility on ios other accessibility features

Testing Accessibility on iOSOther accessibility features

  • These mostly “just work”, but must test in combination – e.g. VoiceOverrunning with Zoom may experience focus issues

  • Pinch zoom

  • Zoom (system-wide)

    • Three-finger gestures for zoom control/movement

    • Zoom up to 5x

  • Large Text

    • Note: Only available in some of Apple’s own native apps

  • Invert Colors / Black on White

  • Captioned content (QuickTime)

Responsive Design and Accessibility - CSUN 2013


Practice

Practice

Practice using accessibility features

  • VoiceOver on iOS has a VoiceOver Practice screen

  • Zoom can be practiced from its screen in Settings

Responsive Design and Accessibility - CSUN 2013


Practice1

Practice

Get a feel for an accessible app

  • Use iOS system apps such as Mail, Notes, Calendar, Stocks

  • Useful cheat sheet – Learning iOSVoiceOvergestures: http://a11y.cc/iosvoref

Responsive Design and Accessibility - CSUN 2013


Testing accessibility on ios voiceover videos

Testing Accessibility on iOSVoiceOver: videos

http://youtu.be/t60voPIY5xY

http://youtu.be/QJr8HDviws0

Responsive Design and Accessibility - CSUN 2013

http://youtu.be/OVA76LGyB1o


Questions

Questions?

Responsive Design and Accessibility - CSUN 2013


  • Login