Designing accessible web experiences

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

Outline

Introduction

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

Live

Thinking about web design

Design

Release

Build

Concept

If you’re lucky…

We have a problem…

Live

We’re going…

We need to change…

The scapegoats….?

Thinking about web design

Design

Release

Build

Concept

Live

A little bit about me

Outline

What do we mean by accessibility

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."

What is web accessibility?

Identifying web accessibility

Web Content Accessibility Guidelines 2.0

Grouped by four principles

• Perceivable

• Operable

• Understandable

• Robust

3 Success Criteria: Level A | Level AA |

Outline

Knowing your customers

Know your market – who are your customers?

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

Looking at the next generation

Whilst focusing on their customers’ needs

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

Headings and structure

What do you think the headings are on this page:

Communicating design concepts: Headings

Heading 1

Heading 2

Heading 2

IMAGES

Being a visual representation, providing a text description (alt text) enables blind people to understand the context of the image

Removing information that enables decision making

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

Who should choose it?

This image needs an alt tag

These images do not need an alt tag

KEYBOARD ACCESSIBILITY MAKE ALL CONTENT AVAILABLE “SKIP TO” LINKS VISIBLE FOCUS TAB ORDER

Keyboard accessibility

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??

COLOUR AND CONTRAST

Using colour to optimise the experience

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

Outline

Strategy and Policy

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

What “experience” is the design / development based on – if there is no user input?

ARE YOU EXPANDING YOUR REACH OR IGNORING MARKETS?