Fork me on GitHub

Header

Important notice about the «ADG» project

Important notice: Due to large demand, the «Accessibility Developer Guide» project (currently a proof of concept with low priority) will become a top priority priority in 2017. We will make this guide become what it deserves to be for so long already: a comprehensive resource for all folks interested in accessibility. For this we need your support!

Browser installation

A screenreader sits on top of a browser, so it's important to choose the right ones when developing.

While Internet Explorer is the most used commercial browser, Firefox is the most used open source one (in terms of screenreader usage).

Which browser to use?

  • Screenreaders access the accessibility layer of the currently active application
  • Browsers render a website and offer information through the accessibility layer
  • The same way websites don't look 100% identical in different browsers, their accessibility layers aren't identical
  • It's important to make sure your website works on the most typical combinations of screenreaders and browsers, which are:
    • JAWS on Internet Explorer
    • JAWS on Firefox
    • NVDA on Firefox
  • For both screenreaders and browsers, we always use the most current stable versions
  • Regarding screenreader usage, Edge is not relevant yet, and neither is Chrome!
  • There are a lot of browser add-ons which are useful in the daily workflow of an accessibility web developer, so beneath Internet Explorer and Firefox we also suggest to install Chrome

Internet Explorer (IE)

  • Internet Explorer is already installed in a Windows environment (make sure it's the most recent version 11!)
    • This may be the reason why it's still the most wide-spread browser used with JAWS
  • Make sure that in the menu, under ViewToolbars, all items are selected
    • If you don't see the menu, press the Alt key (Option on Mac) once

Web Accessibility Toolbar (WAT)

Firefox (FF)

  • Firefox is used by both JAWS and NVDA users a lot
  • For development, Firefox in combination with NVDA is the best choice, but be sure to test your stuff on the other combinations, too!
  • Download Firefox and install it
  • Make sure that in the menu, under ViewToolbars, all items are selected
    • If you don't see the menu, press the Alt key (Option on Mac) once

Web Developer Toolbar

HeadingsMap

  • Install HeadingsMap
  • If you want an icon for HeadingsMap in the toolbar, click Open menu (the "burger" icon on the top right), click Customize and drag the icon to the toolbar, then click Exit customize

Tanaguru Contrast-Finder

Chrome

WAVE Evaluation Tool

HeadingsMap

  • Install HeadingsMap
  • This is the same as the one for Firefox

Colour Contrast Analyser

Accessibility Developer Tools

aXe

NoCoffee

Bookmarks

  • We suggest you add every bookmarklet to every browser, but be sure to have them at least in your main browser

Accessibility Developer Guide

Web Content Accessibility Guidelines (WCAG) 2.0

W3C Markup Validation Service

Tenon.io

TAW

  • Bookmark this: TAW

SortSite

Bookmarklets

  • Bookmarklets are bookmarks containing JavaScript code instead of an URL
    • They are executed while surfing a website and typically analyse some stuff and display results
  • Install bookmarklets by dragging the specified link to your bookmarks toolbar
    • If you're not able to drag and drop, copy the link location, create a bookmark manually, and paste the copied code as URL
  • We suggest you add every bookmarklet to every browser, but be sure to have them at least in your main browser

Visible Headings bookmarklet

Contents structured

HTML_CodeSniffer

Revenge.css

Diagnostic.css