designing accessible web experiences
Post on 20-Jul-2015
136 Views
Preview:
TRANSCRIPT
Global Accessibility Awareness Day:
Edward Chandler
Principal UX Consultant
May 2015
Designing Accessible Web Experiences
Outline
Introduction
What do we mean by accessibility
Knowing your customers
Best practice examples for designing accessible experiences
Strategy and Policy
Global Accessibility Awareness Day
Global Accessibility Awareness Day is a community-driven effort whose goal is to dedicate one day to raising the profile of and introducing the topic of digital (web, software, mobile app/device etc.) accessibility and people with different disabilities to the broadest audience possible
Global Accessibility Awareness Day
The idea of a Global Accessibility Awareness Day started after Joe Devon, an LA based developer wrote a blog post entitled:
“Accessibility know-how needs to go mainstream with developers”
This was picked up on Jennison Asuncion, an accessibility expert from Toronto
Thinking about web design
Design
Release
Build
Concept
If you’re lucky…
We have a problem…
Live
We’re going…
We need to change…
An inaccessible site locks disabled people out
Ultimately it is developers that enable web content to function with assistive devices used by disabled users by writing code that is accessible
Whilst web accessibility is delivered by the developers, its origins start with the management team, product owners and designers
Web accessibility is essential for equal opportunity
Open it up not dumb it down
What is web accessibility?
Tim Berners-Lee "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
Identifying web accessibility
Web Content Accessibility Guidelines 2.0
Grouped by four principles
• Perceivable
• Operable
• Understandable
• Robust
3 Success Criteria: Level A | Level AA |
Major Categories of Disabilities
Visual Blindness, low vision, colour blindness
Hearing Deaf and hard of hearing
Motor Inability to use a mouse, limited motor control
Cognitive Learning disability, distractibility, dyslexia
Outline
• Headings
• Images
• Forms
• Keyboard accessibility
• Colour and contrast
• Good web UX Design
HEADINGS AND STRUCTURE
Identifying heading and page structural elements (such as paragraphs and lists) allows blind people to use internal navigation ‘hotkeys’ provided by the screen reader to jump from section to section.
Using headings correctly aids navigation and page structure
IMAGES
Being a visual representation, providing a text description (alt text) enables blind people to understand the context of the image
What should the alt text be?
a) Dubai remixes the beat
b) Hello Tomorrow, Emirates
c) Experience iconic nights out in Dubai with Emirates Airlines
Keyboard accessibility
Important factors….
If the page has been designed by you to follow a flow
Imagine using a keyboard to navigate - what is the next thing that needs to happen?
Shouldn’t you decide what that reading order is for all users??
Shouldn’t you decide what needs to be visible to users??
Good web design also produces more accessible web experiences:
Simple and clear homepage
Navigation (IA)
Strong Product pages
Seamless checkout and payment
UX design enables better accessibility
Developers are at the coal face
But it starts with….
Design teams
And product owners / senior management team
User Centred Design Policy
It sets the agenda by:
Outlining responsibilities for all parties
Providing business reasons for engaging customers
Stating who the users /customers are
Providing a project management framework for including user needs and usability testing
It also manages expectations and means the business
delivers customer centric solutions
top related