You and me and accessibility

You and me and accessibility

11 characters

You and me and

a11y

Why a11y?

Social justice

Equal rights to information and services

Anti-discrimination

Why a11y?

Better design for all

Why a11y?

Good PR

Why a11y?

Boost SEO

Why a11y?

The Law

AODA

Accessibility for Ontarians with Disabilities Act

​

Who it applies to

Government and organizations in Ontario

​

What to comply

For websites, WCAG 2.0 standard

http://www.w3.org/TR/WCAG20/

AODA

Deadline to comply (large organizations)

1 January 2014

​

Penalties

• Up to $100,000 a day for corporations, and
• Up to $50,000 a day for directors and officers with fiduciary responsibility
• Current schedule of $500 to $15,000
• Depends on severity and history of contraventions

AODA

Who determines compliance

Minister-appointed director(s). They can appoint inspectors to do the actual audit.

​

Current State (February 2015)

More than 60% of companies are non-compliant

http://www.aoda.ca/ontario-to-reduce-enforcement-of-accessibility-law/

​

High-profile cases elsewhere

USA

National Association of the Deaf vs Netflix

2012: US$795,000 settlement

​

National Federation of the Blind vs Target

2008: US$6m + US$3.7m legal costs

​

National Federation of the Blind vs Scribd

2015: Federal court denies motion to dismiss lawsuit

High-profile cases elsewhere

Australia

Bruce Lindsay Maguire vs Sydney Organizing Committee for the Olympic Games

2000: A$20,000

​

UK

Royal National Institute of Blind People vs bmibaby

2012: Private settlement

​

Wait or do something now?

​

“Companies pay about 10% of their total website costs on retrofitting.

But if they phase in accessibility as they naturally upgrade their website, they usually spend much less—between 1% and 3%.”

Tim Springer, SSB BART Group

Wall Street Journal

How to live life

Perception

Attention

Process

• See
• Hear
• Taste
• Smell
• Hot/cold
• Pressure
• Pain
• ...and more

• Imagination
• Classification
• Learning
• Solving
• Decisions
• Judgement
• Language
• ...and more

How to live life

Memory

Action

Emotion

• Short-term
• Facts
• Events
• Habits
• Instincts
• ...and more

• Movement
• Dexterity
• Coordination
• Strength
• Endurance
• Speech

Myths about disabilities

1. Either someone can do something, or not
• There is a continuum of abilities

​

• People with the same disability can be treated the same way
• Behaviour depends on when the disability happened, cultural, socio-economic factors

​

• A11y is only for a small population segment
• Everyone is disabled some of the time

Typical accessible site?

enforcement.aoda.ca/sample-page. Accessed 11 April 2015.

Gorgeous accessible site

www.apple.com/mac/. Accessed 11 April 2015.

Myths about disabilities

• Accessible sites and software are ugly
• Apple and Adobe main websites are accessible

​

• Compliance with a11y standards = a11y
• Technology moves faster than laws
• Implementation differences between a11y tech

​

6. A11y is only for designers (or developers/ PO/QA) to worry about
• Similar situation to internationalization

How software is experienced

How software is used

Bad disabilities for the digital world

• Visual
• Auditory
• Motor
• Cognitive

Total Blindness

A Parallel World

Total blindness

Who

• Cannot see at all
• You when
• driving
• watching kids
• in wilderness at night
• screen not working

Total blindness

Assistive technologies

• Screen reader
• Read sequentially
• Jump between headings
• Jump between links, buttons
• Jump between level of detail: group, sentence, word, letter
• Alt text of images
• Other a11y annotations

Screen readers

Windows

• Narrator (bundled)
• JAWS (paid) www.freedomscientific.com/Products/Blindness/JAWS
• NVDA (free) www.nvaccess.org

​

Mac OS, iOS

• VoiceOver (bundled)

​

Android

• Talkback (bundled)

Screen readers

Voiceover demo

www.youtube.com/watch?v=WxQ2qKShvmc

Screen reader emulators

Firefox

• FANGS (free) www.standards-schmandards.com/projects/fangs

Total blindness

Assistive technologies

• Keyboard
• Touch screen
• Voice recognition

Visual appearance

www.ey.com/. Accessed 11 April 2015.

A11y tree

form

label: Search

text-input

button

​

nav

list

list-item: Home

list-item: Insights

list-item: Industries

list-item: Services

list-item: Careers

​

header

link: www.ey.com

A11y tree

section

heading-level-3: News

​

list

list-item

heading-level-4

link: IPO markets slow down, for now

paragraph: 2014 was a record year…

​

list-item

heading-level-4

link: US IPO market is slow, but 2015…

paragraph: After 2014’s strong close…

What sighted people see

What blind people perceive

What blind people perceive

What blind people should perceive

Mistakes in a11y

www.riotinto.com/our-business-75.aspx. Accessed 11 April 2015.

Relying only on layout, position and other visuals

Mobile-first design

www.travelocity.com. Accessed 11 April 2015.

Let’s take it to the logical extreme

Introducing… Blind-first design

header

list-item: Flights

list-item: Hotels

list-item: Cars

​

heading-level-1: Search Vacation Packages

​

section

heading-level-2: Choose Destinations

paragraph: With over 25,000 places to visit…

button: Book Now

​

section

heading-level-2: Don’t Leave Home Without…

paragraph: Get peace of mind when you book…

Introducing… Blind-first design

section

heading-level-2

image: screenshot of Android app

Sign up to be part of our beta test!

​

form

heading-level-3: Contact Details

text-input: First Name

text-input: Last Name

email-input: Email address

select-input: Country

​

link: Terms and Conditions

Blind-first design

• Semantic information architecture
• Consistent structure across pages and screen sizes
• Same visual order as HTML

Blind-first and Responsive design

A

B

C

Small screen

Bad large screen adaptations

C

A

B

A

B

C

Good large screen adaptations

A

B

C

A

B

C

B2

Semantic information architecture

• Hierarchy
• Consistent heading levels
• Group related elements
• Element types
• Landmarks to orient users
• Navigation, header, footer, pop-ups
• Consistent description
• Links and buttons that do to the same thing are described similarly
• Page title

Mistakes in a11y

www.kfc.com. Accessed 11 April 2015.

No (or inappropriate) text alternatives for images

Use alt text for images

<img alt="Description of image" src="image-url">

​

• Text can be associated with images
• Always specify alt text, except for decorational images

Mistakes in a11y

https://edit.yahoo.com/registration. Accessed 11 April 2015.

No labels

Don’t use placeholders as labels

Placeholders are temporary hint text

https://get.uber.com/go. Accessed 11 April 2015.

Mistakes in a11y

www.dell.com/us/p/desktops. Accessed 11 April 2015.

Inaccessible pop-ups and drop-downs

Mistakes in a11y

www.dell.com/us/p/desktops. Accessed 11 April 2015.

Spinners and progress indicators

Mistakes in a11y

www.dell.com/us/p/desktops. Accessed 11 April 2015.

Unexpected change in context

Change context gracefully

Talk to your nearest developer about a11y for

• Dynamic updates
• e.g. auto-complete, infinite scroll
• Automatic updates
• e.g. live comments
• Pop-ups
• Drop-downs

​

Avoid custom-built controls

• Browser is smarter than you
• Understand the built-in controls and customization options
• Use 3rd-party controls that are accessible

Mistakes in a11y

www.amazon.com/gp/bestsellers/books/ref=sv_b_2. Accessed 11 April 2015.

No way to jump past repetitive content

Jumping past distractions

• Use landmarks in a11y tree
• Provide skip links

www.bbc.com/news. Accessed 11 April 2015.

Mistakes in a11y

www.prada.com/en/CA/e-store. Accessed 11 April 2015.

Inappropriate handling of punctuation

Don’t abuse symbols

Different screen readers treat punctuation, symbols and acronyms differently

• “Romance | Horror” is read as “Romance Horror” without pause
• Some screen readers read out parentheses; some don’t

www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/

Summary: Total blindness

Difficulties

• Relations between different elements
• Information in images, graphs and maps
• Unexpected change of context
• Repetitive sections
• Symbols, punctuation, acronyms
• Position, orientation, size, shape, font style
• “Click here”
• “Article on the right”
• “Fill up the form below”
• “The movie name is in italics”

Summary: Total blindness

Solutions

• Semantic information architecture
• Have text alternatives for images
• Avoid text as images
• Change context gracefully
• Avoid custom-built controls
• Avoid autoplay and autofocus on page load
• “Skip links” for blocks of repeated content
• Don’t abuse symbols

Colour Blindness

www.wired.com/2015/02/science-one-agrees-color-dress/

Colour blindness

Who

• Deficiencies in colour perception
• 8% men, 0.4% women in “Western world”
• You when
• in low light conditions
• in bright sunlight
• faulty screen or display connectors

Colour blindness

Assistive technologies

• Colour settings in apps, browsers and OS
• Color transform (Firefox) addons.mozilla.org/en-US/firefox/addon/color-transform/?src=api
• Colour blindness simulator
• Daltonize (Chrome)
• Spectrum (Chrome)
• Filters (Illustrator, Photoshop) www.adobe.com/accessibility/products/photoshop.html
• Colour palette designer
• colorbrewer2.org

Mistakes in a11y

Colour as the only cue for information

You have 2 new messages

You will delete this file permanently

Please enter a valid email address

Summary: Colour blindness

Difficulties

• Colour as only cue for information
• Warnings and errors
• Graphs
• Maps
• Reference to colours
• “Click the blue link”

Summary: Colour blindness

Solutions

• Use additional ways to convey information
• Text
• Stroke and fill pattern (for graphs)
• Colour-blind friendly palettes
• Play with saturation and contrast
• If it works in greyscale, it works for the colour-blind

Interlude

This is a story of a traffic light

Pitfalls of audible pedestrian signals

Takeaway #1

Get real user feedback

​

Low Vision

A Hazy World

Low vision

Who

• Deficiencies in
• central vision
• peripheral vision
• contrast perception
• depth perception
• You when
• forget your glasses
• using high pixel density screens (“retina display”)
• in bright sunlight
• you grow old

Low vision

Assistive technologies

• Screen magnifiers
• Font size settings
• Contrast settings in screens, apps, and OS

Mistakes in a11y

www.reddit.com. Accessed 11 April 2015.

Broken layout when zoomed

Mistakes in a11y

www.abbott.com. Accessed 11 April 2015.

Poor contrast of text against background

Summary: Low vision

Difficulties

• Broken layout when zooming in (to a reasonable extent)
• Poor contrast
• Time limits to read content

Summary: Low vision

Solutions

• Responsive design
• High-contrast palettes
• Avoid text over busy images
• Provide enough time to read

www.gsk.com. Accessed 11 April 2015.

Exemptions

No need for a11y for

• Decorative elements
• Logos
• Affects core UX (e.g. arcade games)

Interlude

This is a story of an interactive installation

https://www.youtube.com/watch?v=0xeo1oZqcgw

Takeaway #2

You don’t have 100% control of UX.

Go with the flow.

​

A11y in the Internet of Things

Small view

Touch

screen

Mobile

Slow computer

is not

is not

is not

Movement Impairments

A Slower World

Movement impairments

Who

• Deficiencies in
• Accuracy: shaking, jerking
• Dexterity
• Coordination
• Strength
• Stamina
• Paralyzed
• Blind
• 6-year olds and younger

Movement impairments

Who

• You when
• using a phone with one hand
• controlling an off-screen window
• gloved or wet hands with touch screen
• mouse on uneven or dirty surface
• injured dominant limb
• tired
• you grow old

Movement impairments

Assistive technologies

• Keyboard (most important)
• Voice recognition
• Gesture recognition
• Eye-trackers
• Switches
• Controllers

Mistakes in a11y

www.airbnb.com. Accessed 11 April 2015.

• Cannot navigate by keyboard alone
• No visible focus state

Kudos in a11y

www.adobe.com. Accessed 11 April 2015.

• Navigable with tab and arrow keys
• Clear focus state

Mistakes in a11y

www.woolworths.com.au. Accessed 11 April 2015.

Hover menus

Hover menu creates hover tunnels

uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Accessed 11 April 2015.

Life of a click

Focus

Active

Hover

move mouse on top of element

mouse button down

navigate to element with keyboard

tap element with finger

press Enter

release key, mouse button, or finger

move mouse away from element

click elsewhere

Life of a click (some touch devices)

Focus

Active

Hover

move mouse on top of element

finger or mouse button down

tap element with finger

release key, mouse button, or finger

click elsewhere

Mistakes in a11y

toronto.craigslist.ca. Accessed 11 April 2015.

Crowded interactive elements. Small elements.

Summary: Movement impairments

Difficulties

• Mouse or touch only
• Figuring out what is the focused element
• Hover
• High-precision tasks
• Crowded elements
• Tiny elements
• Multi-touch (or key) combinations
• Drag and drop
• Key sequences

Summary: Movement impairments

Solutions

• Interactive elements are navigable by keyboard
• Think about sequence of focus
• Obvious focus state
• Have alternatives to hover
• Avoid cascading hover menus
• Avoid giant hover pop-ups

Summary: Movement impairments

Solutions

• Prefer built-in UI components
• Sizable elements
• At least 13 x 13px
• Make labels of checkbox and radio buttons clickable

www.mydhl.dhl.com/mydhl/appmanager. Accessed 11 April 2015.

Takeaway #3

1. Semantic information architecture
2. Not just images
3. Keyboard navigable

This work is licensed under a Creative Commons Attribution 4.0 International License.

​

Suggestions or errata? Contact TW Hoon at GitHub (username: hoontw).