responsive & mobile accessibility
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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/1.jpg)
![Page 2: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/2.jpg)
What is a responsive site?
Understanding types of user impairment
Accessibility throughout a project
![Page 3: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/3.jpg)
![Page 4: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/4.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/5.jpg)
Input devices
Touch & gestures
Voice Pointing devices
![Page 6: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/6.jpg)
![Page 7: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/7.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/8.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/9.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/10.jpg)
![Page 11: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/11.jpg)
![Page 12: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/12.jpg)
![Page 13: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/13.jpg)
![Page 14: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/14.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/15.jpg)
Memory
Problem solving
Attention
Reading and verbal
Math comprehension
Visual comprehension
![Page 16: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/16.jpg)
![Page 17: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/17.jpg)
![Page 18: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/18.jpg)
![Page 19: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/19.jpg)
![Page 20: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/20.jpg)
![Page 21: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/21.jpg)
![Page 22: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/22.jpg)
![Page 23: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/23.jpg)
![Page 24: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/24.jpg)
![Page 25: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/25.jpg)
![Page 26: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/26.jpg)
![Page 27: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/27.jpg)
![Page 28: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/28.jpg)
![Page 29: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/29.jpg)
![Page 30: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/30.jpg)
![Page 32: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/32.jpg)
![Page 33: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/33.jpg)
•
•
![Page 34: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/34.jpg)
<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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/35.jpg)
<header role=“banner”>
<aside role= “complimentary”>
<main role=“main”>
<footer role=“contentinfo”>
<nav role="navigation">
<div id=“search” role=“search”>
![Page 36: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/36.jpg)
![Page 37: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/37.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/38.jpg)
<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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/39.jpg)
![Page 40: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/40.jpg)
![Page 41: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/41.jpg)
![Page 42: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/42.jpg)
![Page 43: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/43.jpg)
• 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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/44.jpg)
• 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](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/45.jpg)
![Page 46: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/46.jpg)
![Page 47: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/47.jpg)
![Page 48: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/48.jpg)
![Page 49: Responsive & Mobile accessibility](https://reader033.vdocument.in/reader033/viewer/2022061300/54c6e3f84a7959d7588b45ad/html5/thumbnails/49.jpg)