Delivering Accessible Experiences for Everyone
-
Upload
invotra -
Category
Technology
-
view
56 -
download
3
Transcript of Delivering Accessible Experiences for Everyone
What is accessible experience?
What does user experience entail?
The application must:
● Be intuitive
● Be easy to use; usable
● Have clear expectations; nothing unexpected happens
● Reduce the number of page loads or clicks a user must take
Defining user experience (UX)
What is accessible experience?
● Must achieve at least level A of the WCAG 2.0
● Ideally achieving level AA
● Your site must be:○ Perceivable○ Operable○ Understandable○ Robust
Defining accessibility
What is accessible experience?
● Moving away from a box-ticking exercise to one that involves the user at the forefront of design
● Shifting your perspective to an accessibility point of view
● Carrying over the methodology from UX to accessibility
● Use personas with different disabilities:○ Visual○ Auditory○ Physical○ Cognitive
Combining user experience with accessible experience
Understanding the current experience
● Use the same methodology from UX
● Provide scenarios and assign realistic tasks
● Keep in touch with the people you meet
Meet with users
Understanding the current experience
Ask:
● What accessibility software users expect
● How accessibility software users find the experience
Record:
● Where accessibility software users navigate
● How accessibility software users navigate
● Comments from the accessibility software users
Get an opinion
Understanding the current experience
● It can be different for each person
● What’s the individual’s way of navigating?
● Can the individual still use the site with their own preference?
Find out how AS users use the site
What did we find out?
What’s that person’s disability?
● Visual - complete blindness / poor eyesight
● Auditory
● Physical / mobility
● Cognitive
People have different needs depending on their disability
What did we find out?
● Tabbing
● Reading top to bottom
● Landmarks
● Headings
People have different ways of navigating
So what did we find out?
Browsers
● Internet Explorer (IE)● Chrome ● Firefox (FF)
Software
● Zoomtext● NVDA● JAWS
Browser support is critical
ARIA
● Stands for accessible rich internet applications
● Provide roles, states and properties
● Structure your site using landmarks
What is it and how does it help?
ARIA
Landmark equivalents
HTML5 ARIA
<header> role=”banner”
<nav> role=”navigation”
<main> role=”main”
<footer> role=”contentinfo”
<aside> role=”complementary”
<section> role=”region”
Headings
● Jump to the next heading
● Visually separate your content to make it more readable
● Added the ability for customers to control heading level of widgets on their site
● Adding invisible headings
Using headings
Order of information
● Screen readers will announce the contents of the page from the top to the bottom
● Is help available before the user enters a value in a form?
● Does the tab order make sense?
Think sequentially
Displaying content correctly
Screen readers will read information from the objects that are available to them.
The elements should be able to present the following:
● Name
● Role
● State
The tags have the information
Hiding content correctly
To hide content from everyone:
● Display: none● Visibility: hidden
To hide content from screen readers:
● aria-hidden=”true”
To hide it for anyone but screen reader users:
● Text indent● CSS clip
Hiding content for different users
Removed ambiguity
Read more
Read more
Read more
Read more
Which one of these are links? Do you know where it will lead?
Made it easier to read
● Removed long italics
● Increased word and letter spacing
● Increased contrast of colour to 4.5:1
A clear example as to how accessibility benefits everyone
Experience a screen reader
Choose the software
● JAWS (40 min trial)● NVDA (free)
Read the documentation - keys will vary.
Check browser compatibility
● JAWS - ideally for Internet Explorer● NVDA - great for Firefox or Chrome
Download and try
Experience colour blindness
● Great tool for a quick review on a single page
● Allows you to remove styles
● Allows you to remove colour
● Flags anything that might be wrong as well as anything that might be right
WAVE
Experience mobility difficulties
This one doesn’t involve downloading anything!
● Navigate the site using just the keyboard
● Can you use the arrow keys?
● Can focusable elements be tabbed to?
Keyboard interaction