responsive & mobile accessibility

49

Upload: sigma-uk

Post on 27-Jan-2015

113 views

Category:

Design


2 download

DESCRIPTION

The number of users who are turning to their tablets and phones to browse information, shop for products and to watch videos is on the rise. At the same time, individuals with cognitive disabilities represent the largest single disability group worldwide. However, designing for this disability group is one of the most overlooked areas within the design and accessibility fields. As developers, how do we provide adaptable services across a range of devices which are fully inclusive and accessible while maintaining an excellent user experience? Chris and Rebecca will discuss the various conditions under the heading of cognitive disabilities and the design principles that we can use to cater for a wide range of abilities. They will walk you through from some the most important accessibility points you should consider when planning a new multi-device project and show you how to capitalise on each device's strengths to keep your users satisfied.

TRANSCRIPT

Page 1: Responsive & Mobile accessibility
Page 2: Responsive & Mobile accessibility

What is a responsive site?

Understanding types of user impairment

Accessibility throughout a project

Page 3: Responsive & Mobile accessibility
Page 4: Responsive & Mobile accessibility

A website which is complete and usable for any device and connection using a single URL per page

Keith Doyle, Navopia

Page 5: Responsive & Mobile accessibility

Input devices

Touch & gestures

Voice Pointing devices

Page 6: Responsive & Mobile accessibility
Page 7: Responsive & Mobile accessibility

Vision Ability to see, or process visual

information

Hearing Ability to hear, or process acoustic

information

Motor Ability to interact with a

device accurately and quickly

Cognitive Ability in mentally demanding areas such as reading, memory, attention,

or complex concepts or language

Modified from the BBC GEL Accessibility guidelines

Page 8: Responsive & Mobile accessibility

Vision Blindness, low vision & colour

blindness

Hearing Hearing loss

Motor Dyspraxia, RSI, arthritis and

cerebral palsy

Cognitive Down’s syndrome, Asperger’s and

dyslexia, Learning difficulties

Modified from the BBC GEL Accessibility guidelines

Page 9: Responsive & Mobile accessibility

Vision Forgot my glasses

Hearing Watching a video in a noisy environment

Motor Temporary injury such as a

broken wrist

Cognitive Tiredness, Stress, Hangover :D

Modified from the BBC GEL Accessibility guidelines

Page 10: Responsive & Mobile accessibility
Page 11: Responsive & Mobile accessibility
Page 12: Responsive & Mobile accessibility
Page 13: Responsive & Mobile accessibility
Page 14: Responsive & Mobile accessibility

Dyslexia

ADHD

Attention Deficit Disorder

Learning disabilities

Asperger's Syndrome

Williams Syndrome

Autism

Dementia

Down Syndrome

Head injuries and stroke

Alzheimer’s disease

Stroke

Page 15: Responsive & Mobile accessibility

Memory

Problem solving

Attention

Reading and verbal

Math comprehension

Visual comprehension

Page 16: Responsive & Mobile accessibility
Page 17: Responsive & Mobile accessibility
Page 18: Responsive & Mobile accessibility
Page 19: Responsive & Mobile accessibility
Page 20: Responsive & Mobile accessibility
Page 21: Responsive & Mobile accessibility
Page 22: Responsive & Mobile accessibility
Page 23: Responsive & Mobile accessibility
Page 24: Responsive & Mobile accessibility
Page 25: Responsive & Mobile accessibility
Page 26: Responsive & Mobile accessibility
Page 27: Responsive & Mobile accessibility
Page 28: Responsive & Mobile accessibility
Page 29: Responsive & Mobile accessibility
Page 30: Responsive & Mobile accessibility
Page 32: Responsive & Mobile accessibility
Page 33: Responsive & Mobile accessibility

Page 34: Responsive & Mobile accessibility

<header role=“banner”>

<aside role= “complimentary”>

<main role=“main”>

<footer role=“contentinfo”>

<nav role="navigation">

<div id=“search” role=“search”>

Page 35: Responsive & Mobile accessibility

<header role=“banner”>

<aside role= “complimentary”>

<main role=“main”>

<footer role=“contentinfo”>

<nav role="navigation">

<div id=“search” role=“search”>

Page 37: Responsive & Mobile accessibility

JAWS says: “Banner region start” and “Banner region end”. NVDA (Non Visual Desktop Access) 2012.3 says: “Banner region start” at the beginning of the banner landmark. VoiceOver on IOS says: “Landmark start” and “Landmark end”. Does not say which landmark it is. Talkback on Android says : “Banner” at the beginning of the landmark but does not identify the end of the landmark.

Page 38: Responsive & Mobile accessibility

<nav id=“popnav" aria-label=“Popular Navigation" role="navigation"> Voiceover iOS 7 “Popular Navigation, Landmark start”

Mixed support on older devices, so you should include meaningful text within landmarks to help users identify the context.

Page 39: Responsive & Mobile accessibility
Page 40: Responsive & Mobile accessibility
Page 41: Responsive & Mobile accessibility
Page 42: Responsive & Mobile accessibility
Page 43: Responsive & Mobile accessibility

• Some great checklists and guides available http://www.iheni.com/mobile-accessibility-tests/

http://www.w3.org/WAI/WCAG20/quickref/

http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile_access.shtml

http://www.sesameworkshop.org/assets/1191/src/Best%20Practices%20Document%

2011-26-12.pdf

• Listen to your sites on screen readers (Try turning your monitor off)

• Automated testers like achecker.ca Great learning device

• Expert reviews Abilitynet, RNIB – See it right, Independent evaluators

Page 44: Responsive & Mobile accessibility

• Access Talk (accessibility podcast) – http://accesstalk.co.uk/

• Chrome add on for colour blindness -

http://accessgarage.wordpress.com/2013/02/09/458/

• Speaking up speaking out – http://www.maccsuso.org.uk/

• Great blog post about including people with disabilities in user

research - http://www.usertesting.com/blog/2014/03/04/the-value-of-

involving-people-with-disabilities-in-user-research/

• Juicy Studio accessibility toolbar - https://addons.mozilla.org/en-

US/firefox/addon/juicy-studio-accessibility-too/

• WAVE Webaim accessibility evaluation tool - http://wave.webaim.org/

Page 45: Responsive & Mobile accessibility
Page 46: Responsive & Mobile accessibility
Page 47: Responsive & Mobile accessibility
Page 48: Responsive & Mobile accessibility
Page 49: Responsive & Mobile accessibility