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!

Recipes overview

Much of the "magic" about developing accessible websites (and testing them) boils down to not much more than a handful of tools and a few specific workflows associated to each of them.

Here you'll get specific instructions on how to inspect the most common accessibility problems, and how you can elaborate solutions for them.

Here you'll be presented with all the tools and workflows we use in our daily testing business. We tried to phrase each workflow like a recipe, so you can easily apply it to your own needs.

Tools

  • Visible Headings Bookmarklet - Shows you the current document's heading outline
  • WAVE Toolbar (Chrome, FF)to do - Execute some general accessibility tests within the browser
  • PDF Accessibility Checker (PAC) 2to do
  • Web Developer Toolbar (Chrome, FF)to do - An important tool for every developer
  • Colour Contrast Analyser (Win, OS X)to do - Check contrasts between two manually selected colors
  • Color Contrast Analyzer (Chrome)to do - Check full websites for contrasts in one go (incl. images)
  • WCAG Contrast Checker (FF)to do - Check full websites for contrasts in one go
  • Tanaguru Contrast-Finder (FF)to do - Hover over an element of a website to check its contrast
  • Tanaguru Contrast-Finder (Online)to do - Need to tweak your design's colors to improve contrast? Check this out!
  • Contents Structured Bookmarkletto do - Displays semantic info about elements on a website
  • Web Accessibility Toolbar (IE)to do - Has a lot of useful features
  • Jim Thatcher Favelets (FF)to do - Has a lot of useful features
  • Juicy Studio Accessibility Toolbar (FF)to do - Has a lot of useful features
  • ChromeLens (Chrome)to do
  • ...more to come...

Workflows

  • Inspect DOM elements using the DOM inspector in Chrometo do
  • Display tables with "Web Developer Toolbar" for Firefoxto do
  • Display fieldset/legend combos and labels using "Web Accessibility Toolbar" for "Internet Explorer"to do
  • Using a screenreader in focus mode to investigate accessibility concernsto do
  • Use Windows High Contrast Mode (HCM) to investigate accessibility concernsto do
  • Display link list using NVDAto do
  • Use of skip linksto do
  • Zoom pageto do
  • Zoom text onlyto do
  • Display content markup using "Contents structured" bookmarkletto do
  • Validate page source using "Web Accessibility Toolbar" for "Internet Explorer"to do
  • Using a screenreader in browse mode to investigate accessibility concernsto do
  • Using the keyboard to investigate accessibility concernsto do
  • Using the mouse to investigate accessibility issuesto do
  • Investigating common issues using WAVE for Chrometo do
  • Display images' alt attributes with "Web Developer Toolbar" for Firefoxto do
  • Manual measurement of originally specified colors using "Colour Contrast Analyser"to do
  • Validating contrast of text on images using "Colour Contrast Analyser (Chrome)"to do
  • ...more to come...

Tipps and Tricks

Take this into consideration

This is only our choice of tools!

There are a lot of tools outthere that help you improve accessibility of websites.

This is our personal collection, there may be others that do the job, too.

Quick tools vs. Screenreaders

Be careful with these tools!

While "quick tools" (like browser plugins, bookmarklets, etc.) can give you fast results, always be careful! They may not always deliver the most accurate results.

Always use screenreaders as your final testing instrument.

Manual vs. automatic testing

Be careful with automated testing!

Many aspects of accessibility can not be tested automatically. In every situation, you always have to use your head and common sense to decide whether something is accessible or not.

No more content here yet!

Please support us so the missing content will appear here soon!

PS: If you didn't know: while this specific page isn't spilled with information yet, there's still a lot of useful content on this website already. Click around, and you will see!

I know all the tools, but gimme some more theoretical background!