/
Quick-and-Dirty Website Accessibility Tests - and Fixes

Quick-and-Dirty Website Accessibility Tests - and Fixes

Apr 20, 2023

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 become 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?

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

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.

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?

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

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?"

Images of text

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)

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?"

Headers

Stylesheets

Screen Readers

Want more info?

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