Accessibility Workshop

About Me

  • Lindsey
  • Full-Stack Developer at PBS
  • Works daily with Python/Django, SCSS, and Javascript (React, mostly)
  • 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

Workshop Setup:

  • 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
    https://github.com/lmdragun/AccessibilityWorkshop
  • 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

Screen Readers

  • 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: 

  • Windows Key + Enter

or

  • Search "Ease of Access"
  • "Narrator" = "On"

​​

Mac: 

  • Command + F5

or

  • System Preferences > Accessibility
  • "VoiceOver" = Enable

Resources

Standards

  • W3 (WCAG)
      https://www.w3.org/WAI/
  • The A11y Project
      http://a11yproject.com/
  • Actionable Game Accessibility (by AbleGamers)
      http://www.includification.com/
  • IBM Accessibility
      https://www-03.ibm.com/able/

Tools

  • JAWS free trial
      http://www.freedomscientific.com/downloads/jaws
  • WAVE (Web Accessibility Evalution Tool)
      http://wave.webaim.org/
  • Chrome Accessibility Dev Tools
  • NoCoffee Vision Simulator
  • Achecker
      http://achecker.ca/checker/
  • Contrast ratio checkers
    http://webaim.org/resources/contrastchecker/
    http://leaverou.github.io/contrast-ratio/

Let's get started

Disclaimer:

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?

A lot of commonly implemented features will require some jQuery or Javascript to become accessible, some examples:

  • Dropdown menus
  • Modals
  • Carousels

Accessibility Workshop

By Lindsey Dragun

Accessibility Workshop

  • 944