Basic Guidelines for Accessible Web Development and Design

Making the web accessible for users that may be visually impaired is important today, but I’m sure many of us are unfamiliar with how exactly we do this.

There are a number of basic features you should always include in your programming and design of a website – here is a quick checklist to get you started:

Web Development

  1. All images should have alt=” “ tags labeling the content in the image
  2. Semantic heading tags: headings should use h1,h2,h3,h4,h5,h6 to provide guidance on flow of the page
  3. Keyboard accessibility for buttons: (https://teachaccess.github.io/tutorial/#/5)
  4. Labels for forms:
      </p> <div> <label for="lastName"><br /> Last name:<br /> </label><br /> <input id="lastName" type="text"> </div> <p>
  5. Accessible navigation menus (https://teachaccess.github.io/tutorial/#/10)
  6. Semantic lists using ARIA roles:
      </p> <div role="list"> <div role="listitem">Sea</div> <div role="listitem">Surf</div> <div role="listitem">Sun</div> </div> <p>

Web Design

  1. Color contrast should be WCAG AA compliant: http://webaim.org/resources/contrastchecker/
  2. Font style should be easy to read – sans serif
  3. Font size should be readable and should enlarge
  4. Using colors or patterns alone to indicate something will not be accessible to a blind users.
  5. Copy considerations (https://teachaccess.github.io/tutorial/#/17)

Key Terms

ARIA (Accessible Rich Internet Applications)

Website Testing Tools

WAVE by WebAIM for general website accessibility: http://wave.webaim.org/

Juicy Studio’s Readability Test: http://juicystudio.com/services/readability.php

Vischeck’s Color Blindness Checker: http://www.vischeck.com/

More Training Material:

Teach Access: http://teachaccess.org/initiatives/tutorial/

We care about Accessibility. Learn more about Benetech and checkout the video to your left!

Learn More About the Born Accessible Movement

Benetech.org Technology Serving Humanity

Log in with your credentials

or    

Forgot your details?