®

Enabling Evolution

Creating an accessible experienceOctober 2017

®®

What is accessible experience?

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

®®

Understand the current 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 we found out

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

So what did we find out?

®®

How did we create the experience?

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

Colour contrast

Which one meets the colour contrast?

®®

Try the experience yourself

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

®®

Q&A