You can find many of the most common accessibility problems on your website yourself, with nothing more than your keyboard, your browser and a free contrast checker. These checks do not replace a full audit against the Web Content Accessibility Guidelines (WCAG), but they show you where your website is most likely to fail and what to fix first.
Can your website be used with a keyboard only?
Some visitors cannot use a mouse and move through a page with the Tab key instead. Open your homepage, put the mouse aside and press Tab repeatedly. Every link, button and form field should be highlighted in turn, and you should always be able to see which one is selected. Then try to complete the most important task on your website, such as signing up for your newsletter or making a donation, with the keyboard only. If you get stuck, visitors who depend on a keyboard will get stuck in the same place.
Does your website still work when the text is enlarged?
Visitors with low vision often enlarge the text in their browser. WCAG requires that text can be enlarged to 200 percent without any content or function being lost. Zoom your browser to 200 percent and check that all text remains readable, that nothing overlaps and that the menu can still be opened.
Is the text on your website dark enough against its background?
Low contrast text is the most common accessibility error on home pages, according to WebAIM, which tests the home pages of one million websites every year. Body text needs a contrast ratio of at least 4.5:1 against its background. Large text, which WCAG defines as at least 18 point or 14 point bold, needs at least 3:1. Check your text, link and button colours with a free online contrast checker, which calculates the ratio from two colour codes. Our article Making a website welcoming for LGBTQ+ visitors explains how to use rainbow colours without losing contrast.
Do the images on your website have alt text?
Visitors who use a screen reader hear the alt text of an image instead of seeing the image. Check that every image in your pages and posts has alt text that describes what the image shows. An image that is purely decorative should have empty alt text, so that a screen reader skips it.
Do your headings and links make sense on their own?
Screen reader users often jump from heading to heading, or listen to a list of all the links on a page. Your headings should therefore follow a logical order, and the text of each link should say where the link goes, not just ‘click here’ or ‘read more’. Our articles Using heading levels H1, H2 and H3 in WordPress and Writing descriptive link text in WordPress explain both. To hear how your website sounds, turn on the screen reader that is built into your device, such as VoiceOver on a Mac or iPhone, or Narrator on Windows.
What should you fix first?
Fix the problems that stop a visitor from completing a task first, such as a donation form that cannot be used with a keyboard, and then the problems that make your pages harder to read. Repeat the checks whenever your theme changes or a new type of content is added to your website.
If you would like us to check the accessibility of your website, please email us at hello@fourteenrockets.com.
