5 Website Accessibility Checks

Back To Blog

Dec 8, 2020

Remediating your website to make it accessible for everyone can be challenging. It is an ongoing process and requires frequent checks to maintain and improve how your website performs for all visitors including those with auditory, cognitive, neurological, physical, speech, and visual disabilities.

Below are 5 Accessibility checks you can do on your website today to see where improvements may need to be made.

Check magnification at 250%

Ensure that all aspects of your website are visible when magnifying your screen to at least 250% on a desktop. Visually impaired visitors may need to magnify your site to be able to access the content.

Open Google Chrome and visit your website
Press Ctrl+ until the screen is maximized to at least 250%
Go through each page of your site and ensure that you can navigate all the content without having to scroll from left to right.

Tab Focus

Make sure that visitors that may have difficulties using a mouse can navigate your entire website using the keyboard only.

Open Google Chrome and visit your website
Starting from the address bar press the Tab button.
Go through each page of your site and ensure that a visual focus (such as a ring) is visible on the link elements as you tab through them. This includes your main navigation, categories, subcategories, callouts, and linked paragraph text.

Alt Text

Every image, unless decorative only and labeled as such, should have alt text associated with it. Consider how you would describe the image to someone who could not see it. Instead of “soccer”, you may instead type “young girl kicking soccer ball”. Visually impaired visitors may use a screen reader to have the contents of your website read to them including your alt text.

Open Google Chrome and add the Alt Text Tester browser extension.
Navigate to your website and click the Alt Text Tester browser extension to reveal if alt text is present for each of your images and confirm they make sense outside of the visual text.

Color Contrast

There needs to be enough contrast in the colors used throughout the site that someone with low vision can still read the text.

Visit https://wave.webaim.org/
Enter the web address of your Home Page.
Ensure there are no contrast errors. If you do have contrast errors you can find more details by clicking on the Details tab in the tool.
Repeat for each page of your site.

Heading Levels

Heading levels help screen readers understand the order of your content. Much like a newspaper has Titles, Subtitles, and paragraph text the headers put the content on the page in a logical order.

Visit https://wave.webaim.org/
Enter the web address of your Home Page
View the Structural button and ensure that on each page the H1, H2, H3 are in order and are not skipping a level. For example, H1 then H3 (skipping H2).
Go through each page of your site and ensure that your Heading levels are in the correct order.

Making the web a welcoming experience for everyone requires constant checks and remediation. The items mentioned are just a few of the first steps to website accessibility. Due to changes coming in 2021 many websites will require technical updates to comply with the enforced WCAG (Web Content Accessibility Guidelines) 2.1 standards.

Legal Disclaimer: The information above provides general information to help navigate how this relates to your business online. Please do not use this article as legal advice. For full details visit the W3C Web Accessibility Initiative site and discuss with your legal advisor.

<< Back to blog