Accessibility ≠ disability

Dmitry Pashkevich, Nov 2018

This is a reinterpretation of the talk:

It's spelled "accessibility," not "disability"
by Scott Davis (ThoughtWorks)
[original slides]

Most content is borrowed from that talk and the resources it links to

Outline

  • What does accessibility mean?
  • What does disability mean?
  • What this means for products and all users
  • Accessibility and other best practices

Accessibility

Accessibility

Oxford Dictionary:

1. The quality of being able to be reached or entered.

 

    1.1 The quality of being easy to obtain or use.
 

    1.2 The quality of being easily understood or appreciated.
 

    1.3 The quality of being easily reached, entered, or used by people who have a disability.
 

Web accessibility

Wikipedia:

... the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to websites, by people with disabilities.
 

When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality.

Disability?

15%

of the world's population have some sort of disability

[WHO, 2011]

Bar chart of browser market share worldwide as of October 2018

Data: statcounter

Data: statcounter

Data: Speakt

15%

of the world's population may have trouble using your app

Learnings about disability

#1: four main types of disability

That affect use of websites

  1. Visual
    Blindness, low vision and colour-blindness

  2. Auditory
    Profoundly deaf and hard of hearing

  3. Motor
    The inability to use a mouse, slow response time, limited fine motor control

  4. Cognitive
    Learning difficulties, distractibility, the inability to focus on large amounts of information

#2: disability is not binary

Deafness:

  • mild
  • moderate

  • moderately severe

  • severe

  • profound

  • totally deaf

#2: disability is not binary

Vision/brain conditions

astigmatism color blindness akinetopsia
​(motion blindness)
​scotopic visual sensitivity (visual stress related to light) visual agnosia (impaired recognition or identification of objects)
vestibular disorders
(motion sickness)

:fastestparrot:

#2: disability is not binary

While we might have medical and government-recognised definitions that tell us what makes a disability, day-to-day life is not so straightforward. People experience varying degrees of different conditions, and often one or more conditions at a time, creating a false divide when you view disability in terms of us and them.

#3: (dis)ability isn't always permanent

We...

  • get old
  • have accidents or illnesses
  • may struggle earlier or later in the day
  • get tired... or angry... or sad

 

#3: (dis)ability isn't always permanent

We're all just temporarily abled. Design for the future you

#3: (dis)ability isn't always permanent

Angry, sobbing or drunk people may try to use your product or website—ready?

#4: Impairments between user and website

  • Slow connection

  • Bright light / low light

  • Low contrast projector screen

  • Noisy environment

  • Various devices, OS, browsers

Takeaway:

accessibility improves everyone's experience

Takeaway:

1. Visual—make it easy to read

 

2. Auditory—make it easy to hear

 

3. Motor—make it easy to interact

 

4. Cognitive—make it easy to understand and focus
 

Universal design

Universal design

Design that's usable by all people, to the greatest extent possible, without the need for adaptation.

The Universal Design Project

Universal design and disability

Universal design isn’t strictly about disability, but it wouldn’t exist if disability didn’t exist.

The Universal Design Project

In Real Life: The Curb Cut Effect

Grocery stores

Best practices

Mobile strategy

Mobile strategy

91% of people with disabilities use a “wireless device such as a cell phone or tablet.”


Mobile And Accessibility: Why You Should Care And What You Can Do About It (Smashing Magazine, 2014)

Mobile strategy

The Smashing Magazine article suggests some best pratices:

  • making sure everything works with a keyboard,
  • marking up forms semantically,
  • providing plenty of contrast,
  • ensuring that screen readers know what your controls do,
  • testing your website on an actual screen reader.

Mobile strategy

Google now uses loading speed as a metric for mobile search result ranking [source].

Mobile strategy

22 seconds is the average time it takes to fully load a mobile page.
Think with Google, 2017

Multi-modal interaction

  • Keyboard
  • Mouse
  • Touchscreen
  • Smartwatch
  • ...
  • Smart assistant/conversational UI

SEO

Clean semantic markup makes your content more accessible by

  • Search engines

  • Screen readers

  • Social networks

  • Documentation tools

  • News readers

  • Smart assistants

Improve everything!

Accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization (SEO).
Accessibility, W3C

Accessibility tools

Your browser!

COMMON things that people do on the web:

  • click

  • Google search

  • search in page

  • copy and paste

  • navigate back and forward

  • share links and bookmark them

  • share/post on social networks

  • refresh pages

  • drag and drop

Your browser!

Chrome Audits tool

Your browser!

Speak all paragraphs on a page:

document.querySelectorAll('p').forEach((el) => {
  let u = new SpeechSynthesisUtterance(el.textContent);
  window.speechSynthesis.speak(u);
});

Other tools

Common a11y oversights

  • :focus state
  • :hover, :active states
  • confusing links and buttons
  • Missing alt or title
  • Missing image replacement (e.g. icons missing images)
  • Non-descriptive alt or title
  • Abuse of div elements, non-semantic markup
  • Content not zoomable on mobile
  • Missing or non-logical heading outline
  • Poor contrast ratio

RECAP

Accessibility > disability

Universal design

Questions?

Made with Slides.com