Accessibility for Developers

Introduction

Use SPACEBAR to move forward through slides.

Slide instructions

SPACEBAR to move forward through slides.

SHIFT & SPACEBAR to move backwards through slides.

LEFT ARROW & RIGHT ARROW to move through sections.

ESC to see overview and ESC again to exit.

F to enter presentation mode and ESC to exit.

What you need in order to attend the workshop

You will need a screen reader in order to take part in some of the exercises:

You will need some sort of text editor in order to take part in some of the exercises:

You will need to install the following browser extensions/plugins in order to take part in some of the exercises:

Some definitions

Before diving into digital accessibility, an overview of some common terms:

  • Equity.
  • Diversity.
  • Inclusion.
  • Accessibility.

Equity

Ensuring fair treatment, equality of opportunity, and fairness in access to information and resources for all.

Diversity

Ensuring the representation of all possible identities and differences, collectively and as individuals - regardless of:

  • Age / Morphology / Neurodiversity.
  • Dietary preferences or requirements.
  • Location.
  • Technology.
  • Computer Literacy.
  • Language / Dialect.
  • Ability / Disability.
  • Literacy / Education / Training.
  • Marital status / Family status.
  • Organisational Status / Income / Social status.
  • Culture / Beliefs / Ethnicity.
  • Sexuality / Gender identity / Gender expression.

Inclusion

Ensuring that everyone feels involved, valued, respected and treated fairly.

Diagram showing A element as part of Flow, Interaction and Phrasing categories Inclusion Equity Diversity

Accessibility

Ensuring that all products and services meet the needs of everyone, including those with disabilities.

Accessibility is a sub-set of inclusion, as it focusses on inclusion and equity for people with disabilities.

Diagram showing A element as part of Flow, Interaction and Phrasing categories Inclusion Equity Diversity Accessibility

And “Digital Accessibility” is a subset of accessibility.

Digital Accessibility

Ensuring the accessibility of digital products:

  • Websites and web applications.
  • Native mobile applications.
  • Digital documents (such as PDFs).
  • Email.

Why should we care about digital accessibility?

Australian legal imperatives

All of IAG’s public-facing digital products:

New Zealand legal imperatives

All of IAG’s public-facing digital products:

Commercial incentives

How many people have some form of disability?

However, it is well-known that these estimates are low, as many people do not identify themselves as having some form of disability.

Regardless of the exact percentages, can we afford to alienate any potential or existing customers due to inaccessible products and services?

Reputation incentives

In 2015, the legal case “Gisele Mesnage vs Coles” was settled out of court.

While there is a financial risk associated with legal actions like this, the possible damage to organisation’s reputation is a far greater risk.

“It takes many good deeds to build a good reputation, and only one bad one to lose it.”

Benjamin Franklin

What is WCAG?

As we saw before, all of IAG’s public-facing digital products “must conform to WCAG 2.1 AA”. But what does this mean?

The Web Content Accessibility Guidelines (WCAG), is the world-wide standard for web accessibility.

WCAG is the standard for web content accessibility. It explains how to make web content more accessible to people with disabilities.

The latest version of the Web Content Accessibility Guidelines is Version 2.1.

Within the WCAG guidelines, all key criteria are categorised as either:

  • 20 level “A” (minumum level of conformance).
  • 30 level “AA”.
  • 28 level “AAA” (maximum level of conformance).

To be “AA” compliant, sites must meet all “A” and “AA” Success Criteria.

This means that websites and web apps must comply with all 50 of these Success Criteria.

Types of disabilities

From a digital accessibility perspective, are four main types of disability:

  • Visual.
  • Auditory.
  • Motor Skill.
  • Cognitive.

1. Visual

B. Colour Vision Deficiencies:

  • Monochromacy:
    • Rod monochromacy: inability to distinguish colours.
    • Cone monochromacy: inability to distinguish colours.
  • Dichromacy:
    • Protanopia: absence of red retinal photoreceptors.
    • Deuteranopia: absence of red retinal photoreceptors.
    • Tritanopia: absence of blue retinal photoreceptors.
  • Anomalous trichromacy:
    • Protanomaly: poor red–green hue discrimination.
    • Deuteranomaly: mildly affected red–green hue discrimination.
    • Tritanomaly: poor blue–green and yellow–red/pink hue discrimination.

Side note:

Although “colour blindness” is a commonly used term, it is inaccurate in most cases. “Colour blindness” only refers to people with Monochromacy.

C. Blindness

D. Other visual-related conditions

2. Auditory

Auditory disabilities:

  • Hearing loss.
  • Hearing impaired.
  • Deafness.

Side note:

A small percentage of the deaf community that cannot read, and rely on sign language alone.

Literacy and Numeracy

3. Motor skill

A. Traumatic Injuries

  • Spinal cord injuries that affect upper body.
  • Loss or damage to limb(s).

D. Other motor-related conditions

4. Cognitive

B. Learning disabilities

The lists above are just some of the possible groups of people who may interact with our digital products.

Disabilities are varied and complex

Disabilities may be spectrums - such as ADHA, Autism, Fetal Alcohol Spectrum Disorder.

Some people have multiple disabilities or conditions such as:

  • A person who is blind and also has hearing loss.
  • A person with Tourettes with Coprolalia, who also has Absence seizures and Functional Neurological Disorder (FND).

Some disabilities change over time such as:

  • Deteriorating eye sight or hearing.
  • Improved functionality after a stroke.
  • Changes due to different treatment or medication.

And finally, some disabilities may change in nature or severity from day to day or even during a single day.

Tempory or situational conditions

Making digital products accessible for people with disabilities also benefits others.

For example, some people may experience temporary or situational barriers that are similar to the symptoms of disabilities.

Examples of temporary barriers:

  • A broken arm.
  • Temporary hearing loss.
  • Concussion.

Examples of situational barriers:

  • Unable to see a screen due to sunlight.
  • Unable to hear video or audio material due to a local noise.
  • Unable to use a mouse while holding a baby.

Assistive technologies

Are people with disabilities likely to access our digital products?

Maybe not all of our products. For example, people with vision disabilities are unlikely to purchase car insurance. However, in general, yes. Everyone needs insurance!

How do these people access our digital products?

With assistive technologies: software and hardware designed to help people with disabilities interact with websites and web applications.

These are just some examples of a broad range of Assistive Technologies in use today.

Inclusive language

Person-first language is the most widely accepted terminology in Australia:

  • “Person/people with disability”.
  • “Person who is blind”.
  • “People who have low vision”.

Person-first language is important as the phrase “Blind person” implies that being blind is the entirety of that person.

People should never be defined just by their disability. And, many people with disabilities have more than one disability, so these phrases are often misleading.

However, some groups of people prefer different phraseology. For example, some people from the Autism community prefer to be referred to as “Autistic” rather than “Person with autism”.

“Don’t be so afraid of saying the wrong thing that you don’t say anything at all. Relax, be willing to communicate, and listen.”

AND Inclusive language

Avoid language that implies a person with disability is inspirational simply because they experience disability.

  • “They are so brave...”.

Avoid terms that imply a person is a victim or should be an object of pity:

  • “Suffering from…”.
  • “Struck down by…”.
  • “Bound by…”.

Don’t accuse people of faking their disability. Each disability is a spectrum, so someone’s condition may not match your understanding or past experience.

  • “My boyfriend has Tourettes and he doesn’t act like you”.

Avoid offering solutions or advice to people regarding their disabilities.

  • "Have you tried weed to help with your ticks and tremors?”.
  • “Have you tried “x” therapy?”.
  • “Have you tried praying?”.

Accessibility persona examples

Even though there are a wide range of disabilities and barriers, they can be broken down into six basic Accessibility personas.

  • Andrew: a person who is blind.
  • Judith: a person with Cerebral Palsy.
  • Sophia: a person who has extremely low vision.
  • Will: a person who is colour vision deficient.
  • Yên: a person who suffered a traumatic brain injury.
  • Eliana: a person who is deaf.

Andrew

Some info about Andrew:

  • A person who is blind.
  • Screen reader user (NVDA, JAWS, VoiceOver).
  • Keyboard-only user.

Keyboard-only pain points:

  • Lack of keyboard-only access:
    Cannot access key functionality.
  • Inability to bypass blocks:
    Cannot quickly navigate to locations in web pages.

Screen reader pain points:

  • Lack of semantic markup:
    Cannot navigate via headings, landmarks.
  • Lack of accessible form markup:
    Cannot complete forms without effort.
  • Lack of accessibility widgets:
    Cannot understand due to lack of labels, purpose, states.

Judith

Some info about Judith:

  • A person who with Cerebral Palsy (no control over limb or head movement).
  • Head Pointer with sticky keys.
  • Keyboard-only user.

Keyboard-only pain points:

  • Lack of keyboard-only access:
    Cannot access key functionality.
  • Lacks of clear focus states:
    Cannot see which element is in focus
  • Lack of focus consistency:
    Has to learn which elements are in focus.
  • Lack of intuitive focus order:
    May miss where focus order is on page
  • Inability to bypass blocks:
    Cannot quickly navigate to locations in web pages.

Head pointer pain points:

  • Long scrolling pages:
    Very hard with head pointer.
  • Excessive need for tabbing:
    Lots of head actions.
  • Small target size for actionable items:
    Hard to navigate using sticky keys.

Sophia

Some info about Sophia:

  • A person who has extremely low vision.
  • Screen magnification user (ZoomText).

Magnification pain points:

  • Layout issues when text size increased:
    Can cause layouts to break.
  • Actions are not in close proximity to triggers:
    Content can appear off-screen.

Will

Some info about Will:

  • A person who is colour vision deficient.

Colour vision deficiency pain points:

  • When colour-alone is used to indicate important information:
    Not able to register some colours.

Yên

Some info about Yên:

  • Cognitive impairment due to traumatic brain injury.

Cognitive pain points:

  • Inability to adjust or stop timed functions:
    Needs more time to complete tasks.
  • Excessive flashing or moving content:
    Can cause seizures.
  • Complex UI, especially multi-columns:
    Complexity makes processing more difficult.
  • Complex language, technical/legal phrases:
    Complexity makes processing more difficult.

Eliana

Some info about Eliana:

  • A person who is deaf.
  • Prefers Auslan to captions where possible.

Hearing loss painpoints:

  • Lack of audio/video captions:
    Cannot access audio or video.
  • Lack of sign language options associated with audio or video:
    May be harder to access audio or video.

Examples

These personas can become a powerful tool to be able to discuss issues in shorthand.

“Andrew won’t be able to access that date picker as it only works with a mouse.”

“Judith might find the lack of focus state confusing on those buttons.”

“Sophia may not be able see that action as it could appear off-screen when using ZoomText.”

“Will won't see those red error colours. We will need to provide some other form of indication.”

“Yên may need more time to complete that task. We need to allow him to extend the time limitation.”

“Eliana will need subtitles to be able to understand what is being said on that video.”

Finished!