Accessibility for the Modern Web

By Lindsey Dragun

@lmdragun

The Basics

  • Accessibility affects a wide range of people
  • Some sites are required to have it, devs might not be aware
  • Starting out accessible is easier than adding in accessibility

Some Accessibility Concerns

  • Blindness
  • Color-blindness
  • Seizure disorders
  • Motor control issues
  • Migraines
  • Anxiety disorders
  • Deafness
  • Autism
  • ADHD

WCAG POUR

Guiding principals of accessibility under 2.0:

  • Perceivable
  • Operable
  • Understandable
  • Robust

A Few Easy Fixes

  • Proper color contrast
  • Don't rely on colors for information
  • Closed Captioning (and/or Transcripts)
  • Alt tags
  • Keeping focus states (!!!)
  • Allow for zooming
  • Don't use "flashy" colors or animations

Why You Might Want Accessibility

  • Regulations might require it
  • You want a larger audience
  • Accessibility makes code better

(for those that need an excuse)

Regulations Include...

  • Section 508
  • Section 504
  • The Americans with Disability Act (ADA)
  • And others...

Section 508

  • Government agencies required to have accessible technology.
  • Certain exceptions (national security)

Section 504

  • Also for federal agencies and those getting money from them
  • "…no qualified individual with a disability in the United States shall be excluded from, denied the benefits of, or be subjected to discrimination under any program or activity that … receives Federal financial assistance …"

Americans with Disabilities Act (ADA)

  • Covers businesses and non-profits offering certain services
  • Including those offering education, training, etc.

Ex: University of California, Berkeley

  • EdX videos lacked CC, descriptions of visuals, extra course material was inaccessible to screen readers
  • Berkeley at risk of losing federal funding

Increased audience...

1/5 Americans are disabled, so accessibility concerns a large potential audience, but also:

  • Many developers (and others) use keyboard navigation
  • Parents, people learning languages, etc. use closed captions
  • People appreciate not needing to pull out reading glasses

How does it make code better?

  • Accessibility follows W3 guidelines
  • Will be easier for future developers to read
  • Will keep up with current standards

How to bring accessibility to your workplace:

  • It's the right thing to do
  • It increases audience
  • It makes your company look good
  • It might already be required or could end up being required
  • It makes development faster after the initial work

Accessbility "Gotchas"

Not everything works every time, or in the way you're expecting.

Ex: SVG Icons

  • General accessibility standards say SVGs should have a detailed description.
  • If you use SVGs for icons, people might have to listen to an entire sentence describing a magnifying glass whenever they go to search for something.
<svg width="129" height="160" viewBox="0 0 129 160" xmlns="http://www.w3.org/2000/svg" role="img"
class="play" aria-labelledby="play__title" aria-describedby="play__desc">
  <title id="play__title>
    Play
  </title>
  <desc id="play__desc>
    A filled black equilateral triangle with slightly rounded corners
  </desc>
  <path d="M126.901 82.496c2.343-1.462 2.338-3.836 0-5.295L4.243.659C1.9-.803 0 .248 0 3.01v153.675c0 2.76 1.905 3.81 4.243 2.352l122.658-76.542z" fill-rule="evenodd" />
</svg>
<svg width="129" height="160" viewBox="0 0 129 160" xmlns="http://www.w3.org/2000/svg" 
class="play" aria-labelledby="play__title">
  <title id="play__title">
    Play Symbol
  </title>
  <path d="M126.901 82.496c2.343-1.462 2.338-3.836 0-5.295L4.243.659C1.9-.803 0 .248 0 3.01v153.675c0 2.76 1.905 3.81 4.243 2.352l122.658-76.542z" fill-rule="evenodd" />
</svg>

Some Tools Used for Accessibility

  • Screen Readers
  • Keyboard navigation
  • Alternate mice/input tools

Also called Assistive of Adaptive Technology

Screen Readers

  • Rely heavily on aria and alt tags
  • Do not like a lot of 'popular' design choices, like infinite scroll and lazy loading
  • JAWS (for Windows) is the most popular. Mac comes with its own program called VoiceOver. Chrome and other browsers also have them.

Some Alternative Input Tools:

  • Mice with trackpads, joysticks, larger buttons
  • Eye tracking
  • Sip-and-puff (SNP)
  • Head-motion tracking
  • Foot pedals

Natasha Lambert, Boating Business, 8/5/16, SNP

Foot Pedal from ablemart

Resources

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

lmdragun@gmail.com

@lmdragun

Accessibility for the Modern Web

By Lindsey Dragun

Accessibility for the Modern Web

  • 122
Loading comments...

More from Lindsey Dragun