Skip to content

Instantly share code, notes, and snippets.

@JLLeitschuh

JLLeitschuh/WebwareTeachingW3Accessibility.md

Last active November 2, 2015 18:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JLLeitschuh/cd793e7814c5e9d40f5a to your computer and use it in GitHub Desktop.
Save JLLeitschuh/cd793e7814c5e9d40f5a to your computer and use it in GitHub Desktop.
Download ZIP
Webware Teaching W3 Accessibility
Raw
WebwareTeachingW3Accessibility.md

Why Teach Accessibility?

The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can also help people with disabilities more actively participate in society.

-w3.org

  • Legally required for Goverment Websites
  • Apple was recently sued for not having iOS devices. Apple now has some of the best tablet accessibilty on the market.
  • eglecting a major portion of the population by not catering to the needs of these users.

Disability Types

  • Visually
    • Blind
      • Rely exclusively on screen readers
      • Can not use mice to navigate the page
      • Can not see information in images
      • The page becomes linear usually following the order that your HTML is layed out.
    • Color Blind
      • Perceivable: because they cannot perceive (see) the difference between certain color combinations (reference)
    • Impared
      • Really poor vision use zoom
        • Put labels with the inputs they are labeling. Having a label and the corrisponding input halfway across the page from one another can cause a lot of unnessasary scrolling for zoomed in screens.
  • Auditory
    • Include captions to media with audio. Provide alternatives to video content.
  • Motor
    • Limited Motor Skils
      • Navigate sites exclusively with Tab & Shift+Tab
  • Cognitive
    • Making sure that things are structured well and have a clear logical flow.
    • Limit jumping arround while requiring user input.
  • Seizure
    • Must avoid strobing, effects and optical illusions

How to enable Accessibility

Basics

  • Symantically correct DOM layout Always use the correct HTML tags for the given task. For example, if you are creating an element to trigger javascript use a <button> tag not an <a> tag.
  • Focus management
    • When dropdowns or menus are opened ensure focus is moved into thoes elements.
    • Ensure when a modal opens the focus shifts to a specific button.
    • When closing an element like a modal ensure that focus is restored to an apropreate element. Focus is completely lost and sent to the top of the document when the element that is focused is deleted. (Imagine the pain if you have a 30+ element fourm of inputs that the user has to tab through again).
    • Don't hide the default focus border. (Eg http://www.cnn.com/ start hitting tab and see if you can figure out where your focus is).
  • Following the W3 Accessible Rich Internet Applications Reccomendations
    • This document is unfortunately large and unwieldly. Example implementations on stack overflow are also few and far between.

Advanced (e.g. Tools)

  • Libraries
    • Angular-Aria Will automatically add many of the DOM elements that most developers neglect to add. Every ng-onClick will automatically get a keyboard listener for keyboard users.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment