Responsive & Mobile accessibility
•
4 likes•3,153 views
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.
Recommended
Recommended
More Related Content
More from Nexer Digital
More from Nexer Digital (20)
Recently uploaded
Recently uploaded (20)
Responsive & Mobile accessibility
- 2. What is a responsive site? Understanding types of user impairment Accessibility throughout a project
- 4. A website which is complete and usable for any device and connection using a single URL per page Keith Doyle, Navopia
- 7. 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
- 8. 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
- 9. 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
- 14. Dyslexia ADHD Attention Deficit Disorder Learning disabilities Asperger's Syndrome Williams Syndrome Autism Dementia Down Syndrome Head injuries and stroke Alzheimer’s disease Stroke
- 15. Memory Problem solving Attention Reading and verbal Math comprehension Visual comprehension
- 33. • •
- 34. <header role=“banner”> <aside role= “complimentary”> <main role=“main”> <footer role=“contentinfo”> <nav role="navigation"> <div id=“search” role=“search”>
- 35. <header role=“banner”> <aside role= “complimentary”> <main role=“main”> <footer role=“contentinfo”> <nav role="navigation"> <div id=“search” role=“search”>
- 37. 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.
- 38. <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.
- 43. • 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
- 44. • 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/
Editor's Notes
- Different software will be used
- “When doing research on accessibility it seems to be common that accessibility can often be done only once on a project or towards the end and be a small selection of employee’s responsibility….
- “But, accessibility isn’t something you do at the end. It should be shared across the team – knowledge sharing – make the entire team be responsible for accessibility and teach each other” When accessibility is considered early and throughout design, it can be seamlessly and elegantly integrated with overall product design. Incorporating accessibility early decreases the time and money to design accessible products and increases the positive impact that accessibility can have on design overall. If accessibility is only addressed late in product design, it can be very costly to make required design changes. Furthermore, accessibility “tacked on” at the end is usually much less effective for people with disabilities and less beneficial for others.
- “A project starts with the specification, this can include objectives, user and business goals, functionality requirements and coming up with ideas.”
- “Cognitive impairment means any sort of cognitive disorder that impairs functioning and understanding. A person with a congnitive impairment is likely to have greater difficulty with one or more mental tasks compared with someone without a cognitive impairment. It is an impairment that can have broad user groups which are difficult to narrow down and because of this it is often overlooked. Definitions for different cognitive impairments include…
- - Say impairments - Looking at cognitive disabilities in terms of the clinical definitions is difficult when trying to understand your users challenges – especially when trying to make decisions on how to improve your site. However…
- Clinical impairments can also be broken down into functional definitions. Using these groups will allow you make improvements to your site at concept and design time that will provide real value to your users.
- Lengthy interactive processes, such as those required to purchase items online, should be kept as simple and brief as possible. To focus the users&apos; attention on specific tasks, the interaction should probably be broken up into separate pages, but help users keep track of their progress so they do not get lost in the process. - Clear labelling Gov.uk have created manageable chunks by using links and separated content into different sections. They also use ‘next’
- Lengthy interactive processes, such as those required to purchase items online, should be kept as simple and brief as possible. To focus the users&apos; attention on specific tasks, the interaction should probably be broken up into separate pages, but help users keep track of their progress so they do not get lost in the process. - Clear labelling Gov.uk have created manageable chunks by using links and separated content into different sections. They also use ‘next’
- Lengthy interactive processes, such as those required to purchase items online, should be kept as simple and brief as possible. To focus the users&apos; attention on specific tasks, the interaction should probably be broken up into separate pages, but help users keep track of their progress so they do not get lost in the process. - Clear labelling Gov.uk have created manageable chunks by using links and separated content into different sections. They also use ‘next’
- Indicate stages by providing a clear timeline and use numbers and stage titles Helps with attention as it keeps the user focused and aids with memory
- Highlight where the user is using colour Provide a clear headline
- Highlight where the user is using colour Provide a clear headline
- Highlight where the user is using colour Provide a clear headline
- Less likely to mis-spell Sets exppectations Allows for quick ‘Idea change’
- On forms – using links to errors at the top of a form makes it easier for screen readers to find the errorError messages should be as explanatory as possible, telling users what they did wrong and how to fix the problem. Link at the top of the form that goes directly to the errors is also good for screenreaders but it also makes it easier for those wth cognitive impairments because the error is then easy to find
- Solution - Provide 1mm inactive space around elements - Balance enough information density and target ability of UI elements - Standard touch size of 7-10mm
- “There are many things you can do in the design phase to improve readability including… Clear visual hierarchy Good background contrast against the text 10 – 15 words per line 120 – 150% line height
- However, it is important to make sure your text is easy to read and understand. To aid this you can use tools such as read-able.com that looks at the text on your website and evaluates what age range would easily understand your website content.
- The Accessible Rich Internet Applications Suite, defines a way to make web content more accessible to people with disabilities. It especially helps with dynamic content and advanced user interfaces Landmark roles States and properties