responsive design and accessibility

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

http://www.paciellogroup.com/training/CSUN2013/responsive



http://tinyurl.com/csun13-responsive



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



What is mobile? Not just phones… all portable electronics

o 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 featureso Note: May incorporate web content

Mobile Webo Sites and applications built for viewing on mobile browserso Note: Feature gap to native apps is narrowing due to

standards such as HTML5 and ARIA02 / 25 / 13


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, videoo Labeling: form controls, headings, buttonso Good structure: landmarks, lists, heading levelso Use native controls where possibleo Content order

02 / 25 / 13

Mobile AccessibilityWho are we talking about?

Diverse user model – 4 main user groups:o Visiono Hearingo Mobilityo Cognitive and learning

Assistive technology userso Speech output (screen readers) or braille output (Bluetooth braille displays)o Voice inputo Magnification

Access services userso Captionso Subtitleso Audio descriptiono Sign language interpretation

802 / 25 / 13 Responsive Design and Accessibility - CSUN 2013

Mobile AccessibilityWho are we talking about? (continued)

Hidden disabilitieso Chronic fatigueo Photo sensitivityo Mental health

Agingo Spans various disabilities and user groupso Often first-time userso Note: Older people, like young children, find primary

solid color easier to see and draw meaning from than pastel colors, etc.



Temporaryo Broken wristo Repetitive strain injuryo Tiredness

Culturalo Languageo Color and iconography

Technologyo Connectivity, data limitations, etc.o Particular software and hardware requirements or preferences

• mobileaccessibility.info Device Details


http://www.mobileaccessibility.info/device.cfm?lang=eng

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



http://www.w3.org/WAI/mobile/experiences

http://www.w3.org/WAI/mobile/experiences

Mobile by definition is disabling for all… Small screen

o iPhone is 1/12 of a typical desktop screeno 40-pixel finger is big on small targetso Can be hard to reach some parts of the screen

Small text sizeso is like having low vision

Small input devices Eyes-free usage

o e.g. in caro is like being blind

12

Mobile AccessibilityConstraints of a mobile environment


Mobile by definition is disabling for all… Reliant on touch

o Not as usable in the raino Need to use special gloves

One-handed usage Low light Connectivity Data limitations

13

Mobile AccessibilityConstraints of a mobile environment (continued)


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

Possibilities!

Mobile AccessibilityCapabilities of a mobile environment


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 recognitiono Google Voice’s voicemail transcriptiono Custom vibrations on iPhone and Android

15

Mobile AccessibilityEnabling features and innovations


http://youtu.be/jSADqRwFAV4

http://vbraille.cs.washington.edu/Applications



http://news.cnet.com/8301-17938_105-10213356-1.html

http://news.cnet.com/8301-17938_105-20118728-1/tablet-app-brings-new-touch-to-braille/

16

Accessibility feature or setting UserSpeech output Blind, low vision, cognitiveZoom Low vision, cognitive, mobilityInverse colors, brightness control Low vision, cognitiveHeadphones Hearing, cognitiveSpeak text Low vision, cognitiveVoice input Blind, low vision, cognitive,

mobilityExternal / virtual keyboard, directional pad

Blind, mobility

Captioning Deaf, cognitiveAudio description Blind, low vision

Mobile AccessibilityHow do people with disabilities use mobile devices?


17


Two main interaction methods1. Explore by toucho Drag finger over screeno Items under your finger are

described by screen readero Double tap to

open/activate2. Gesture navigation


Two main interaction methods1. Explore by touch2. 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




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

vendorsoOther 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


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


Use progressive enhancemento Build for lowest common denominator deviceo Use feature detection over browser detection – not all devices

have the same levels of support for the same featureso 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



Use a responsive design approacho We want content and functionality to adapt to the mobile interfaceo 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 upo 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


http://www.netmagazine.com/features/mobile-first

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

http://www.abookapart.com/products/responsive-web-design





Use web standards as intendedo 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



Mobile support for WAI-ARIA

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

25



http://caniuse.com/

http://caniuse.com/

http://caniuse.com/

http://caniuse.com/

Support native accessibility settings and assistive technology for your target platformso 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



http://www.iheni.com/mobile-accessibility-tip-dont-suppress-pinch-zoom/

http://www.iheni.com/mobile-accessibility-tip-dont-suppress-pinch-zoom/

Inputting text, numbers, email addresses, URLs, search terms, etc.o Difficult using touch in generalo Especially hard for low vision, mobility or blind userso 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


HTML5 input typeso Contextual keyboards in iOS with useful buttons (Previous, Next, Autofill)

helps users to avoid mistakeso Degrade gracefully to text input elementso Supported in Mobile Safari and Webkit (Android)o Can use alternative JavaScript widgets as a fallbacko HTML5 support, solutions and workarounds

28

Techniques for mobile accessibilityForms


http://html5accessibility.com/index-aria.html

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


http://validator.w3.org/

http://www.paciellogroup.com/blog/2012/02/wcag-2-0-parsing-error-bookmarklet/

http://www.paciellogroup.com/blog/2012/02/wcag-2-0-parsing-error-bookmarklet/

http://validator.w3.org/nu/



Introduction to 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)."

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


Support for Media Queries Supported in all modern browsers

o In desktop as well as mobile spaceo but not in IE8 (Leave it! Don't try to hack)o http://caniuse.com/css-mediaqueries


http://caniuse.com/css-mediaqueries

http://caniuse.com/css-mediaqueries

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 alternativeso Ensure text is scalable, avoid using images of texto Maintain a logical reading and tab order o Ensure color contrast is sufficient, indicate focus

programmatically and visuallyo Use semantic markupo Ensure content is keyboard accessible


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!


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!


Example of Responsive Color Contrast Issue


Color Contrast Solution

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


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

zoomingo Supporting browser zooming is sufficient for WCAG 2.0

complianceo 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 others02 / 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


Problem Example

Search comes before menu

Search now comes before menu

Login button now comes before both

780px

480px

320px


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


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)


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


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)


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


THE CSS Question In Responsive Design, multiple controls may be present

for the same behavioro Links at the top of the page in desktop viewo 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 thereo 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?


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 ATo IE does not allow different layout, which means

you have to remove table related elements altogether

Failed Attempt02 / 25 / 13 Responsive Design and Accessibility - CSUN 2013 52

https://dl.dropbox.com/u/573324/testcases/responsive-tables/index.html

Recommended ResponsiveData Tables Filament group has a good option:

o Leave data table in tacto Allow user to choose columns

Another Recommendation:o Allow users to switch to

original version of the table


http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/

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.


Guidelines and Testing


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


http://yuilibrary.com/yui/environments/

http://yuilibrary.com/yui/environments/

Web Accessibility Initiative resources (now fairly dated)o Mobile Web Best Practices (MWBP) 1.0o Web Content Accessibility Guidelines (WCAG) 2.0o 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 Swan

o Coming soon!o 72 technology-agnostic standards and guidelineso Technology specific techniques – HTML, Android and iOSo Getting to grips with a mobile accessibility strategy

57

Mobile AccessibilityGuidelines and standards: resources


http://www.w3.org/TR/mobile-bp/

http://www.w3.org/TR/WCAG/

http://www.w3.org/TR/mwbp-wcag/

http://www.funkanu.se/en/About-Funka/News/News-archive-en/Mobile-accessibility-guidelines/




http://www.utexas.edu/brand-guidelines/web-guidelines/mobile




http://www.iheni.com/getting-to-grips-with-a-mobile-accessibility-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 strategyo Which devices in your strategy have accessibility support?

Support most popular devices on the marketo 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 preferenceso WebAIM’s screen reader user surveys are useful here

Be aware of the laws governing accessibility in your country02 / 25 / 13

http://html5accessibility.com/

http://caniuse.com/

https://developer.apple.com/technologies/ios/accessibility.html

http://eyes-free.googlecode.com/svn/trunk/documentation/android_access/index.html

http://webaim.org/projects/screenreadersurvey4/

Mobile TestingStrategy: device usage


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



Responsive Designo Create a baseline test for the siteoWork together with deign / developer team as

much as possibleo Identify interface elements that change as

different CSS media queries become activeo Test only the elements that change at each of

the supported screen resolutionso Remember to test both landscape and portrait

61



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


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



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



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



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



How to test

Responsive Design and Accessibility - CSUN 2013


Basicso No longer in touch-to-activate mode; now touch-to-exploreo Double-tap to activateo Horizontal swipes move focus between elementso Vertical swipes move between landmarks (set via Rotor)o The Rotor – a virtual wheel for changing modeso Three-finger scrolling

Tips (gestures as of iOS 6)o Three-finger triple tap = Speech Offo Three-finger quadruple tap = Screen Curtain

Testing Accessibility on iOSVoiceOver

02 / 25 / 13 68


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



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


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


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://a11y.cc/iosvoref



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

http://youtu.be/t60voPIY5xY






http://youtu.be/OVA76LGyB1o

http://www.youtube.com/watch?v=QJr8HDviws0&feature=plcp


Questions?



responsive design and accessibility

Documents

accessibility csun

mobile accessibilitywho

native mobile apps

mobile browsersnote

accessibility aria

specific mobile devices

accessible mobile siteslearn

aria6responsive design