Web Developer and accessibility advocate
- Full-Stack Developer at PBS
- Lead for Women Who Code DC & Creator/Maintainer of Pride Tech DC
- Twitter: @lmdragun (but mostly not code related)
Why is Accessibility important?
- Large proportion of the population has at least one accessibility-related issue
- Accessibility standards make your code better
- Avoid legitimate and not-so-legitimate lawsuits
How to "sell" accessibility
- Regulations might require it (and your employers may not even be aware!)
- Access to a larger audience/consumer pool
- Makes it faster for new devs to work in the codebase
- Exercise are broken into numbered folders
- Each folder contains two more: Problems and Solutions
- We'll work through the "Problems" folder together, fixing the accessibility issues there
Think of these as "find all" games, where there are many problems in the file that need to be addressed
What to know:
- These files are made to be as simple for people to use as possible
- In real life situations, other technologies would come into play
- Also, there is not always a "one solution fits all situations" answer, some accessibility will always depend on your audience and the exact functionality of a feature
Example of an exception:
People are told to make SVG descriptions very detailed, but many use SVGs for simple features such as icons...
But making someone with a screen reader listen to a long description of your "home" icon is not going to help them.
Where to find the workshop:
- Go to
- If you have git, clone the repo
- If you do not have git, click "Clone or Download" and choose to Download the zip
- After unzipping the file, you'll have a folder a workshop files
What to use to work with our code:
- You may be able to use some basic text editors for Windows, such as Notepad (not Word)
- On Mac, TextEdit is doable, though more complicated
- If you've done any coding on your Mac, you might have XCode installed
- If you have the time, you can download a code editor, such as
- Atom: http://atom.io
- Brackets: http://brackets.io
- Notepad++: http://notepad-plus-plus.org/
- Another code editor of your choice
- Most computers come with built-in screen readers, but they might not work for everything
- Screen readers do not have a standard way of reading html--something that works fine in one might be a weird experience in another
If you have a Mac or Windows system, you most likely have a built in screen reader.
- Windows Key + Enter
- Search "Ease of Access"
- "Narrator" = "On"
- Command + F5
- System Preferences > Accessibility
- "VoiceOver" = Enable
- W3 (WCAG)
- The A11y Project
- Actionable Game Accessibility (by AbleGamers)
- IBM Accessibility
- JAWS free trial
- WAVE (Web Accessibility Evalution Tool)
- Chrome Accessibility Dev Tools
- NoCoffee Vision Simulator
Contrast ratio checkers
Let's get started
This webpage is Not Good.
I am just a lowly developer
What to look for first?
I liked to look for what's THERE before I start looking for what's NOT there.
What are some things we can see on the page or in the code that make the page less accessible?
Now, what are we missing?
There are some obvious pieces that the code is missing, and some not-so-obvious ones that would be beneficial. Let's see if we can identify them.
What accessibility issues did we 'solve' for?
Technically, many issues can be covered by the same fixes, here are some we may have addressed:
- Low vision/blindness
- Color blindness
- Attention disorders
- Other keyboard nav users
- And more
What other issues COULD we have had to solve for?
- Hearing issues -- if we had video or audio
- Seizures/Migraines -- if we'd had gifs/animations
(these can also cause problems for people with attention issues)
- Mobility issues--if we'd had something like drag & drop, for example
What are common features we didn't look into?
- Dropdown menus
By Lindsey Dragun