This is a list of resources to accompany my tech talk “Quick Accessibility Tips for Devs”. It includes extensive “Disability 101” resources, as well as developer specific coding resources.

Contents

  1. Disability 101
    1. Disability Culture
    2. Disability Isn’t a Bad Word
    3. Disability Is Fluid not Static
    4. Inspiration Porn
    5. Deaf/deaf, and DeafBlind
    6. Neurodivergent
    7. Disability Isn’t a Bad Word
    8. Braille
    9. Disabilities Preferring Reduced Motion
    10. Service Dogs
  2. Accessibility Principals
  3. WCAG: Web Content Accessibility Guidelines
  4. ARIA
  5. Accessibility Overlays - Don’t Use Them!
  6. Assistive Technology
    1. Refreshable Braille Displays
    2. Low Vision and Blind Tech Use
    3. Mobility and Assistive Technology
  7. A11y Code Resources for Devs
    1. General and Comprehensive Coding Resources
    2. Prefers Reduced Motion - Accessible Animations
    3. Keyboard Accessibility
    4. Skip Navigation / Skip to Main Content
    5. Neurodiversity Code Resources
  8. A11y Dev Tools and Dev Specific Resources
  9. Accessibility Companies and Organizations to Follow
  10. A11y Courses and Certification Resources

Disability 101

womens wheelchair basketball. primarily decorative image

Disability Culture

Culture includes the shared ways of life, customs, and beliefs of a particular group of people at at particular time. Many disabled people have shared experiences living with disability and confronting ableism and inaccessible environments on a daily basis. Also, many of us feel the connection to the history of the disability rights movement. It’s important to remember that not every disabled person is the same, nor has the same views! Disability is part of the diversity of humankind.

Disability vs. The Apocalypse with Jessica Kellgren-Fozard

3 Ways Disability Culture Has Been Changing

Crip Camp -the movie

  • 1hr:46min
  • 2021 Oscar-nominated film.
  • On the heels of Woodstock, a group of teen campers are inspired to join the fight for disability civil rights. This spirited look at grassroots activism is executive produced by President Barack Obama and Michelle Obama.

Am I Disabled Enough? // ft. Hannah Witton

Disability Social History Project – Disability History, Culture, Art, and Media

  • Website
  • Strong American focused project, with attention paid to Black disabled American culture and history.
    • The intersectionality of disability with race is an often overlooked topic in disability rights, culture, and history.
  • The resources page has an extensive list of resources on disability history and culture in multiple formats.

Deaf Culture

Deaf culture is one of the strongest, and the most referred to examples of disability culture as there is also a shared language between Deaf people who use the same sign language (e.g. American Sign Language, AusLang - Australian Sign Language, BSL - British Sign Language). There is a dedicated section below for Deaf culture.

Marlee Matlin on Cochlear Implants and Deaf Culture

  • World Science Festival
  • 3:07

What is the difference between deaf and Deaf?

  • Article
  • Sign Health UK

Deaf culture | Canadian Hearing Services (chs.ca)

What is Black American Sign Language?

13 Things My Hearing Friends Should Know International Week of the Deaf CC

Deaf vs Hard of Hearing - What’s the Difference?

Spoonie Culture

Many disabled, neurodiverse, and/or chronically ill people also identify as “spoonies” - those that have to ration their energy throughout the day. The term “Spoonie” comes from The Spoon Theory by author and activist Christine Miserandino who used spoons while at a diner with her friend to answer her friend’s question on what it is like to live with Lupus.

Spoon Theory

What Is A Spoonie? // The Spoon Theory

Ehlers-Danlos Syndrome - Zebra Culture

Many of us with one of the 13 forms of Ehlers Danlos Syndrome or Hypermobile Spectrum disorder also have a strong disability culture because of the extremely long time to diagnosis (average of 10-12 years), prevalence of medical PTSD and medical gaslighting, the fluctuating nature of EDS symptoms (somedays it’s visible, some days our EDS is invisible), and the use of the Zebra as our mascot and name for ourselves. See the article and video below about EDS and Zebras. Also 90% of people with EDS are biologically female, so there’s the shared experience of women dealing with the medical field, and also wanting mobility aids to be fashionable and not boring beige.

Why the Zebra?

  • People with the Ehlers-Danlos syndromes (EDS) and hypermobility spectrum disorders (HSD) often identify themselves as zebras.
  • The Ehlers-Danlos Society
  • Article

We Are Zebra Strong

Where does the EDS Zebra Come From?

‘I got online hate for not being disabled enough’

  • Sky News UK
  • Jessica Kellgren-Fozard
  • Note: Like many people with Ehlers-Danlos Syndrome it took years for Jessica to be correctly diagnosed. She didn’t have her EDS diagnosis at the time of this video.

Living with Hypermobile Ehlers Danlos Syndrome + Our Mobility Aids ft. Martina

CODA - Child of Deaf Adults

A CODA is a Child of Deaf Adults. About 90% of children of Deaf adults are hearing. They navigate the hearing and Deaf cultures and languages. They often don’t identify with either the Deaf or the hearing community as they sign with their families and talk with the outside hearing world. Some report their experiences are akin to second generation immigrant children.

Deaf Parents Explain the Meaning of CODA  

  • Samantha Lande 
  • Updated on February 27, 2023
  • Parents Magazine.
  • Article with embedded video (6:46)

ASL Teacher Breaks Down CODA Movie

Improving Deaf Representation In Hollywood Is A Lifelong Mission For “CODA” Star Marlee Matlin.

  • The Late Show with Stephen Colbert
  • 6:00

Disability Isn't a Bad Word

Disability and disabled are neutral adjectives used to describe people - just like red hair, tall, freckled are. However, there’s been a move by non-disabled people to remove the words disabled and disability from everyday discourse because wider society sees these words as negatives. They are not.

“I don’t even think of you as disabled!”

Disability is not negative

“Disabled” isn’t what you think it is

‘Disabled’ is not a bad word. Stop telling people with disabilities it is

  • Sacha Dekker
  • The Irish Times
  • Tue Apr 26 2022

Disability is Fluid, not Static

Disability symptoms and the required assistive tech, mobility and other aids, vary day to day, hour to hour and in different environments.

Ambulatory Wheelchair Users Exist! Why I use a wheelchair when I can walk! wheelchair = giving up?

My Mobility Aids as an Ambulatory Wheelchair User

Spoon theory: What it is and how I use it to manage chronic illness

  • Perspective by Fortesa Latifi
  • The Washington Post
  • January 14, 2023 at 6:00 a.m. EST

The Spoon Theory written by and spoken by Christine Miserandino

The Spoon Theory

  • The original Spoon Theory article by Christine Miserandino

Inspiration Porn

Inspiration Porn is the term used to classify the portayal of people with disabilities as inspirational solely or in part on the basis of their disability. ~ Stella Young

Inspiration porn is the objectification of disabled people for the benefit of able bodied people.

Inspiration porn and the objectification of disability:

  • Stella Young at TEDxSydney 2014
  • 9:26
  • Highly recommended.
  • This is one of the most referred to talks on inspiration porn.

Can We Stop Saying People With Disabilities Are Inspirational?

Inspiration P-rn: Oscar Bait!

Deaf/deaf, Deaf culture, and DeafBlind

You will see many people in the disability and Deaf/deaf communities using both “Deaf” with a capital “D” and deaf with a lowercase d. Capitalized Deaf refers to members of the Deaf culture who use a sign language to communicate.

Lower case “deaf” refers to the medical condition of being deaf.

“Hard of hearing” refers to people with some hearing loss and/or tinnitus (ringing in the ears) that gets in the way of hearing clearly in some or all environments.

I’ll Scream Later | Marlee Matlin | Talks at Google

  • 39:47
  • Marlee Matlin

Communicating with Deaf/deaf and Hard of Hearing People

If you’re a hearing person without experience with Deaf/deaf and Hard of Hearing people here are some resources to help you communicate with Deaf/deaf and Hard of Hearing people.

25 ASL Signs You Need to Know | ASL Basics | American Sign Language for Beginners.

Cardzilla app

  • Text to speech and typing in large text.
  • Designed by and for the Deaf community for use with hearing people that don’t know sign language. Free
  • Because the text automatically resizes to fill the screen, Cardzilla decreases the need to hand your phone to other people to read.
  • Also very good to have at loud events such as developer conference after parties!

Things Not To Say To A Deaf Person

  • BBC Three
  • 5:58

Dos and Don’ts of Interacting with the Deaf Community

  • Crissy Marshall
  • Turn on closed captions! Crissy only uses ASL (American Sign Language)
  • 7:02

Sign Language Myth Busters -Meeting a Deaf Person

  • Merge NZ - New Zealand Sign Language
  • 3:36

Learn How to Sign - ASL

  • YouTube channel dedicated to teaching ASL American Sign Language

Deaf Culture

Lesser-known things about deafness

  • Article
  • Charlie Swinbourne
  • BBC
  • 6 August 2014

The Limping Chicken

  • “The world’s most popular deaf blog! Laying eggs since 2012”
  • Charlie Swinbourne

ASL Grammar and the Deaf Community

  • Rogan Shannon
  • 6:29
  • Turn on closed captions! Video is in American Sign Lanuage.

‘Am I Deaf Enough?’ Short Documentary Film

DeafBlind

My braille computer died. It’s more difficult than you think

DeafBlind people are creating a new language |

  • American Masters | PBS
  • 17:59

Deaf, Blind and Awkward // Helen Keller

Meet the Deaf-Blind Lawyer Fighting For People With Disabilities

An interview with Haben Girma,

  • the first deaf-blind person to graduate from Harvard Law - New Day NW.
  • KING 5 Seattle
  • 12:08
  • Shows Haben using her braille computer and translator

Hard of Hearing and Tinnitus

People who are hard of hearing and/or have tinnitus (ringing in the ears), often use technology differently than those that are Deaf/deaf.

What is Tinnitus and How is it Treated?

8 Facts About Hearing Disabilities and Web Accessibility

Neurodivergent

Neurodivergent refers to people with Autism, ADHD, post traumatic stress disorder (PTSD), and learning disabilities such as dyslexia, dysgraphia, and dyscalculia. It is a non-medical umbrella term referring to people who’s brains work and/or are structured differently than “neurotypical” brains.

What Exactly is Neurodiversity?

  • Jessica from How to ADHD
  • 6:03
  • Note:
    • Research provided by: Farah Mahmud, M.S. Doctoral Candidate, Clinical Psychology
    • Research consultant: Dr. Patrick LaCount

What is ADHD?

Demystifying autism and overstimulation | Inside Our Autistic Minds

  • BBC
  • 4:14

Tensions build between autism researchers and the autistic community

  • BBC Newsnight
  • 6:34

Not Stimming is MORE dangerous than you think…

I Have ADHD - “My Own Worst Enemy” Parody

What it’s like having Dyscalculia Dyslexia with numbers

Dealing with app Accessibility

Braille

TEACHING KARLIE KLOSS HOW TO READ BRAILLE!

  • Molly Burke
  • 17:21
  • Karlie is the founder of Kode With Klossy, a coding initiative that works to increase access to computer science education and opportunities for young women. She’s also a supermodel and entrepreneur.
  • This video is looks at learning braille just like you’d learn other coding languages.

Braille: What is it like to read without sight? – BBC REEL

The incredible story of the boy who invented Braille

  • BBC Ideas
  • 3:30

Introducing LEGO Braille Bricks – Play with Braille

  • Lego
  • 4:12

Lucy Edwards: Is it hard to learn braille?

Lucy Edwards: How do you type on a braille keyboard?

How To Read & Write Braille + The History of Braille!

How the braille alphabet works

Blindness and Low Vision

What can my blind husband see? (detailed simulation)

Stargardt Disease / Macular Degeneration - How I See

Scent Of A Woman - “Are you blind?!”

  • 0:47
  • Shows how to do sighted guide

How Blind People … YouTube Playlist

7 Benefits of a White Cane - Blind & Visually Impaired

  • Blind on the Move
  • 6:09
  • Note: White canes are also called “long canes” as they now come in different colours (just like shoes and clothes!)

How to use Siri on iPhone to Confirm and Check Location

Eye Floaters and Flashes, Animation

  • Alila Medical Media
  • 3:17
  • Can be caused by retinal detachment and holes.
  • Note: I have these in my right eye after my retinal surgery.
  • It’s the main reason I prefer dark mode, and one of the reasons I at times prefer reduced motion.

What are those floaty things in your eye? - Michael Mauser

  • TED-Ed
  • 4:04

A (Blind-Accessible) History of Blind Gaming

How Blind Gamers Play Nintendo Switch

Disabilities Preferring Reduced Motion:
Migraines, Dysautonomia, Epilepsy, Seizure Disorders, Vestibular Disorders, Chronic Fatigue/ME

There are many underlying reasons that users would prefer reduced or no motion on their sites and apps. Motion can trigger migraines and cause pain and discomfort for people experiencing a migraine. Note that migraines are not “bad headaches”. They are a neurological condition that causes numerous symptoms including: “brain fog”, pain, dizziness, light and/or sound sensitivity, nausea, blurred vision, and more.

Motion can trigger epilepsy and other seizure disorders. Though not as common as other disabilities, seizures can be life threatening so it’s important to have an alternative to web animations.

Dysautonomia is the autonomic nervous system not working properly. There’s many symptoms of dysautonomia, but the main ones developers should be concerned about is dizziness and vertigo. The vestibular system is responsible for balance and spatial orientation. Vestibular disorders cause people to be dizzy and in some cases vertigo.

What is Dysautonomia?

Web accessibility for seizures and physical reactions

  • Mozilla Developer Network

FOUR STAGES of a MIGRAINE ATTACK

  • Momming with Migraine
  • 13:22

History of the Disability Pride Flag

  • Colour contrast and migraines
  • Article

Day in the Life With POTS

  • Izzy K DNA
  • (POTS is postural orthostatic tachycardia syndrome - dysautonomia).
  • Izzy is a Board-Certified Cardiovascular Genetic Counselor.
  • She has hEDS, POTS (dysautonomia), and other common EDS comorbitities.

I Filmed My Chronic Migraine

The Reality of Migraine:

  • RAW FOOTAGE & my Real Reaction to Seeing a Migraine for the First Time
  • Jen from Momming with Migraine.
    • (Yes, yet another woman with EDS, and dysautonomia / POTS)
  • Note: Jen finally has a correct diagnosis (high cranial pressure). The symptoms are very similar to migraines, and she still has migraines. This is one of the only videos out there showing someone going through a migraine.

The Most Prevalent Illness You’ve Never Heard Of! // Severe ME/CFS

Service Dogs

Realities of Working a Service Dog

Breaking down Ontario’s service animal laws after violent dispute at Kitchener restaurant

  • CityNews article with embedded video

Guide Dog Legislation

  • CNIB Canadian National Institute for the Blind.
  • Covers all 10 provinces and 3 territories

Accessibility Principals: P.O.U.R.

milk being poured from a glass bottle into a mason jar mug of coffee

The four accessibility principals that WCAG is based on and that the majority of A11y professionals user are summed up by the acronym “P.O.U.R.”:

  • Perceivable,
  • Operable,
  • Understandable,
  • Robust

POUR: The 4 principles of accessibility

Accessibility Fundamentals Overview

  • WC3

City University of New York. Accessibility Toolkit for Open Educational Resources (OER): Accessibility Principles

  • Article with links and embedded video

Usability Guidelines for Accessible Web Design

  • Kara Pernice and Jakob Nielsen
  • PDF report - 152 pages

Keys To An Accessibility Mindset

WCAG: Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) are a shared, international, open source, technical standard for web accessibility. Many national and regional governments base their accessibility laws on WCAG.

https://www.w3.org/WAI/standards-guidelines/wcag/glance/

  • WCAG at a Glance

A Roundup Of WCAG 2.2 Explainers

ARIA

ARIA stands for “Accessible Rich Internet Applications”. ARIA are attributes you can add to html elements to enhance their accessibility. The first rule of ARIA is don’t use aria! HTML is semantic by default.

ARIA Landmarks Example: WC3

aria-label, aria-labelledby, and aria-describedby: What’s the Difference?

What the Heck is ARIA? A Beginner’s Guide to ARIA for Accessibility

Accessibility Overlays - Don't Use Them!

Accessibility overlays are website add-ons that claim to fix A11y issues. However, they are horrid for users of assistive technology, slow websites down, don’t protect against lawsuits, plus a host of other issues.

7 reasons accessibility overlays SUCK

The Myth of Accessibility Overlays: Why They Are Not the Answer

Should I use an accessibility overlay?

Assistive Technology

Refreshable Braille Display connected to a black laptop:

The Lows of High Tech

Refreshable Braille Displays

Introducing Chameleon 20: YouTube Video

An Introduction to the Focus 40 Blue Refreshable Braille Display

Low Vision and Blind - Assistive Tech

How Blind People Use Technology (My Apple Products - An Introduction to Voice Over)

Be My Eyes

  • OG app - connecting blind and low vision people with sighted volunteers via smart phone video.
  • Be My Eyes
  • 1:35

Be My Eyes - New AI

  • How ChatGPT4 is helping visually impaired people picture what they can’t see |
  • ITV News
  • Featuring Lucy Edwards
    • Note: Lucy and her husband are in the middle of home renovations

How I Use My iPhone Legally Blind | A’s Accessibility Tips #1

How To: Work While Blind | Tech You Need

RNIB Assistive aids and technology

  • Website - list of more resources

Mobility and Assistive Technology

Controlling a computer using a “mouth mouse”

  • a “sip and puff” device

Work Setup as a C5/C6 Quadriplegic

  • Journey with the Fosters

How I Move My Mouse with My Head

  • ALS 411

YouTube Playlist Computer Control: Full Computer Access via Eye Gaze

  • 3 videos.
  • Total playtime under 30 minutes

What’s Wrong With My Hands?! | All About Ring Splints for EDS

  • Robin Hahn (hEDS)

A11y Code Resources for Devs

Here are some dev specific resources to make your code more accessible. Almost all of the resources below are articles with code snippets.

General / Comprehensive

A Complete Guide To Accessible Front-End Components

Structuring Accessible Forms

  • Rachele DiTullio
  • Talk, video, blog post, codepen, GitHub repo
  • Very comprehensive accessible forms resource
  • Video from 2023 has live ASL and captions
  • Cat themed!
  • Covers:
    • Create and label form fields of different types
    • Group related form fields, like radio buttons
    • Mark form fields as required
    • Handle input errors
    • Verify data integrity

Development | Introduction to Accessibility

  • A11y-101
  • Documentation collection with code snippets for different UI elements and front end functionality.
  • All have code snippets and most have videos

How to Build Accessible Vue.js Applications

The A11y Webring Club

  • A web ring for digital accessibility professionals.
  • Tons of coding resources.
  • This site is a member

Prefers Reduced Motion - Accessible Animations

Creating Accessible UI Animations

What is Motion Sensitivity? How to Design Accessible Web Animations

Disable any animations in Angular by prefers-reduced-motion

Keyboard Accessibility

A Guide To Keyboard Accessibility: HTML And CSS (Part 1)

A Guide To Keyboard Accessibility: JavaScript (Part 2)

How to build an accessible navigation menu

Skip Navigation / Skip to Main Content

How-to: Use skip navigation links

Skip link | Introduction to Accessibility

A11Y 101: Adding skip links

How to Create a “Skip to Content” Link

Neurodiversity Code Resources

Neurodiversity Design System

  • The NDS is a coherent set of standards and principles that combine neurodiversity and user experience design for Learning Management Systems. Design accessible learning interfaces to support success and achievement for everyone.
  • Covers:
    • Numbers,
    • font,
    • typography,
    • colour,
    • buttons, links, inputs
    • interface
    • communication
    • Animations

ARIA Code Resources

aria-label, aria-labelledby, and aria-describedby: What’s the Difference?

ARIA - Accessibility | MDN

A11y Dev Tools and Dev Specific Resources

Axe VS Code A11y Linter

  • Deque.com

Free trial of axe DevTools Pro | Deque Systems

  • “Start testing your web app in just minutes. Join over 400k users and try the axe DevTools browser extension for free today.”

Assistiv Labs 14 Day Free Trial

  • “Instantly test how accessible your experience is with the real assistive technologies your disabled users rely on — screen readers, magnifiers, and more — from any computer.”

Lighthouse  |  Chrome for Developers

Storybook.js.org

Cauldron React: Accessible Components Library

  • Deque Systems
  • Open source
  • “Friends don’t let friends ship inaccessible code! Cauldron is designed with accessibility in mind, including styles covering everything from typography to colors, and React components that are designed to be inclusive of all users. Additionally, Cauldron’s React components are designed to include full screen reader and keyboard navigation support.”

WAVE

  • by Web AIM
  • “a suite of evaluation tools that helps authors make their web content more accessible”
  • “can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.”

Web Disability Simulator - Chrome Web Store (google.com)

ARC Platform - TPGi

  • “Empowerment across the accessibility workflow in a single, extendable, unified platform. Built to create efficiencies, effectiveness, and collaboration.”

Getting started with web accessibility with Ashlee Boyer

Accessibility Companies and Organizations to Follow

Fable https://makeitfable.com

Deque https://www.deque.com/blog/save-the-date-for-axe-con-2024/

Assistiv Labs https://assistivlabs.com

Tetralogical https://tetralogical.com

TPGi - Your Digital Accessibility Solutions Partner!

Level Access

  • Level Access
  • Level Access: Resources overview page
  • Note: Level Access just bought an accessibility overlay company so there’s been great (and often heated) debates on Level Access’ current and future role in the professional A11y community.

CNIB Canadian National Instutite for the Blind

RNIB Royal National Instutite of Blind People

Canadian Hearing Services

A11y Courses and Certifications

Courses

Digital Accessibility Foundations

  • Free

React Accessibility

  • by Kiara Contreras LinkedIn Learning
  • free with LinkedIn Premium

Deque University Digital Accessibility Courses & Accessibility Reference Library

Certification

  1. Certified Professional in Web Accessibility (CPWA) International Association of Accessibility Professionals (IAAP)

    1. Fee for two exams
    2. Study resources (free):
      1. Certified Professional in Accessibility Core Competencies CPACC Body of Knowledge
      2. IAAP Web Accessibility Specialist (WAS) WAS Body of Knowledge

  2. Section 508 Trusted Tester certification Free, but a lot of work. Covers a very broad range of in depth digital accessibility topics, not just web accessibility.

    1. Section 508 Trusted Tester enrollment portal
    2. Required: Microsoft Windows 10, and one of MS Edge, Mozilla Firefox, Google Chrome
    3. ** New standards are being implemented in 2024. Enrollment starts sometime after April 01, 2024.

https://www.dhs.gov/trusted-tester