responsive & mobile accessibility

What is a responsive site?

Understanding types of user impairment

Accessibility throughout a project

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

Keith Doyle, Navopia

Input devices

Touch & gestures

Voice Pointing devices

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

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

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

Dyslexia

ADHD

Attention Deficit Disorder

Learning disabilities

Asperger's Syndrome

Williams Syndrome

Autism

Dementia

Down Syndrome

Head injuries and stroke

Alzheimer’s disease

Stroke

Memory

Problem solving

Attention

Reading and verbal

Math comprehension

Visual comprehension

•

•

<header role=“banner”>

<aside role= “complimentary”>

<main role=“main”>

<footer role=“contentinfo”>

<nav role="navigation">

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

<header role=“banner”>

<aside role= “complimentary”>

<main role=“main”>

<footer role=“contentinfo”>

<nav role="navigation">

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

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.

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

• 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

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