Quick-and-Dirty Website Accessibility Tests - and Fixes

Making your website accessible to a broad range of diverse users is not hard. The techniques described on these pages won't guarantee that your pages are 100% fully accessible, but they're an easy way of getting pretty close.

Use these techniques throughout your development process: Don't wait till after you've created everything to check if it's accessible. If you double-check what you're building as you go along, it will be come second nature.

Keyboard Accessibility

Unplug your mouse and put it in your desk drawer (if you're using a laptop, tape some cardboard over the trackpad). Now, try to use your site. Can you accomplish everything using only the keyboard? Can you log in and out? Can you fill in any forms? Can you access all the navigational menus? Can you tell where the keyboard focus is?

Why should you care?

Many people can't, won't or don't want to use a mouse or trackpad. Maybe they're power-users who don't want to waste time moving their hands from the keyboard to the mouse; maybe they're using a laptop and hate the trackpad; maybe they're using a wireless mouse and the batteries have died; maybe they have a mobility impairment and can't use a mouse; maybe they have a visual impairment and can't see the screen. None of these are reasons why they wouldn't want to use your site.

Note: In Safari, you may need to check the "Press Tab to highlight each item on a webpage" checkbox in the Advanced preferences before you can tab around pages.

Some things to look out for (and what to do about them)

Semantics

Links

Use a free tool such as the Web Accessibility Toolbar or the Web Developer extension to generate a list of the links on each page. Does the text of the links make any sense when taken out of the context of the page?

Why should you care?

The text of a link says something about what the link is. Screen reader users often navigate a page by tabbing from one link to the next, and all they hear is the link text. Would you follow a link if all you knew about it was "click here?"

Some things to look out for (and what to do about them)

Images of text

Why should you care?

Text that is embedded in an image is very difficult to internationalize. Also, some people won't see the images on your page: They might have a visual impairment; they might have a super-slow connection.

Use the browser's settings to turn images off and reload the page (you might need to clear your cache first). Does any of the text disappear?

Some things to look out for (and what to do about them)

buttons that lose their labels

Headers

Use a free tool such as the Web Accessibility Toolbar or the Web Developer extension to show a "table of contents" for your site: a list of all the headings on a page. Does this table of contents look like what you meant when you made the site? Does it make sense? Does it accurately reflect the structure of the information and the relationships between the sections?

Why should you care?

Search engines are not the only things that use headings to index your site. Many people use an automatically generated table of contents to get a quick sense of what's on a page, as well as to navigate to particular headings. If they look at this table of contents and it looks nonsensical, they're not going to be too impressed with your site.

NOTE: If you're using HTML5 and its <section> and <article> elements, make sure you understand the way it creates a document outline. Try an HTML5 outlining tool like HTML 5 Outliner to assess your page's outline.

Some things to look out for (and what to do about them)

skipped heading levels (e.g. h3 inside h1)
things that should be at the same level but aren't
headings used for formatting only
headings that don't actually use a heading tag

Stylesheets

Why should you care?

With the increasing pixel density of many screens, the appearance of text is seeming smaller and smaller to viewers. Many people increase the size, sometimes by adding a style to the page. If you're using values, your content will remain un-viewable for these people.

Also, people are viewing web pages on more and more different sizes and shapes of devices. Responsive web designs can ensure that your site will look great wherever it's seen, but not if you're using pixels for font sizes and line spacings.

Use something like Firebug in Firefox to double the page's font size by adding "font-size: 2em" to the body tag. Does all of the text on the page double in size?

Some things to look out for (and what to do about them)

Screen Readers

Turn on a screen reader and listen to your page.

On Windows, you can download the free, open source screen reader NVDA, or a trial version of Jaws, a popular screen reader.
On a Mac, the operating system includes VoiceOver.

Why should you care?

An increasing number of people have visual impairments that make it difficult to see the screen. Many of them use a screen reader, which reads the content of the screen aloud to them. If your page doesn't play nicely with screen readers, these visitors to your site will be leaving pretty quickly.

Launch the screen reader, return to the browser and reload your page. Turn off the monitor and listen to the screen reader read your page. Does it make sense? Can you understand what the page is about?

Use the Tab key to navigate the site. Listen to the screen reader read out the links and controls. Does what you hear make sense? Can you tell where focus is based on what's spoken?

Want more info?

For more information on designing accessible websites, try the following resources: