Testing your website for accessibility

How to test your website to meet WCAG standards

Regular accessibility testing is crucial for keeping your website compliant with evolving standards such as WCAG and ADA. By incorporating accessibility into your UX and SEO strategies, you can broaden your audience and enhance the overall user experience across your site.

In this post we outline a few ways you can do accessibility testing at home, for free. Click on the links below to navigate to a specific section:

Manual testing with keyboard navigation
Screen readers
Color contrast
Browser tools

If you run into any issues while testing your website, reach out to our accessibility team at accessibility@pilotdigital.com

Methods for manual website accessibility testing

Manual testing with keyboard navigation

Ensuring that all interactive elements on your site are accessible via keyboard is a fundamental aspect of web accessibility. Many users depend on keyboards instead of mice to navigate websites.

Steps to test keyboard navigation:

Open your web browser.
Use the Tab key to move through interactive elements such as links, buttons, and form fields.
Verify that the Tab key progresses the focus of the webpage sequentially through these elements.

Using a screen reader to navigate your website helps ensure that blind and low vision users can effectively interact with your content. Here are some options:

JAWS (Job Access With Speech)

Platform: Windows
Description: One of the most popular and widely used screen readers, JAWS provides comprehensive support for web browsing, word processing, and other computer tasks. It supports a wide range of applications and offers advanced features like scripting.

NVDA (NonVisual Desktop Access)

Platform: Windows
Description: A free and open-source screen reader, NVDA is popular for its robust performance and compatibility with various web browsers. It supports a wide range of languages and is frequently updated to stay compatible with the latest web standards.

VoiceOver

Platform: macOS, iOS
Description: Built into Apple’s macOS and iOS devices, VoiceOver is a highly integrated screen reader that works seamlessly with Apple’s ecosystem. It offers features like gesture-based navigation on touch devices and braille display support.

Color contrast analysis

Ensuring good color contrast is essential for accessibility and creating a positive user experience. Here’s how you can check that your website colors are accessible:

Familiarize yourself with tools like the WebAIM color contrast checker and the link contrast checker tool.

WCAG recommends a minimum contrast ratio of 4.5:1 for normal text. They recommend 3:1 for larger text (18pt or 14pt bold). Read up on their accessibility principles page.

Checking your website colors:

List all of the text and background color combinations on your site. You can get the hex value using browser extensions like ColorPick Eyedropper for Chrome.
Copy the hex codes or RGB values into a contrast checker tool.
Analyze if the contrast ratio meets the WCAG standards we listed above.
Ensure all text elements like buttons and links also meet contrast requirements.

You can also view your website in grayscale using extensions like Grayscale Screen for Chrome to simulate different types of vision. You can also try Greyscale the web for Chrome too – a tool for colorblindness.

We wrote a blog post about creating accessible color schemes for your site. Check it out to learn more!

Browser tools

Browser tools designed for accessibility checks, such as Google Lighthouse, play a crucial role in identifying and addressing accessibility issues. These tools help developers and designers create more inclusive web experiences by providing automated audits and actionable recommendations.

WAVE (Web Accessibility Evaluation Tool)

Platform: Browser Extension (Chrome, Firefox)
Description: WAVE provides visual feedback about the accessibility of web content by highlighting issues directly on the page. It identifies errors related to alt text, color contrast, form labels, and more, making it easier to spot and fix accessibility problems.

Axe Accessibility Checker

Platform: Browser Extension (Chrome, Firefox)
Description: Developed by Deque Systems, Axe is a robust accessibility testing tool that can be used to identify accessibility issues based on WCAG standards. It integrates well with development workflows and provides detailed reports on detected issues.

Google Lighthouse

Google Lighthouse is an open-source, automated tool that is integrated into the Chrome DevTools suite. It offers a comprehensive accessibility audit as part of its broader performance and SEO analysis.

Here’s how Lighthouse supports accessibility testing:

Automated testing: Lighthouse evaluates your website against a set of accessibility best practices. It scans the page and generates a detailed report that highlights potential issues, such as missing alt text for images or insufficient color contrast.
Actionable insights: The audit results include specific recommendations for resolving identified issues. For example, if a button lacks descriptive text, Lighthouse will suggest improvements to ensure it is more accessible to screen readers.
Performance and best practices: Besides accessibility, Lighthouse assesses other critical aspects of your site, including performance, SEO, and best practices. This holistic approach helps ensure that accessibility is integrated into a broader context of web quality.
Customizable audits: Users can configure Lighthouse to focus on particular accessibility criteria, allowing for targeted testing. This flexibility enables developers to address specific accessibility concerns relevant to their site.

How to use Lighthouse for accessibility testing

Open Chrome DevTools: Navigate to the page you want to test and open Chrome DevTools by right-clicking on the page and selecting “Inspect,” or by pressing Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac).
Run Lighthouse: In the DevTools panel, go to the “Lighthouse” tab. Choose the “Accessibility” option and click “Generate Report.” Lighthouse will analyze the page and produce a detailed report.
Review results: The Lighthouse report provides a score along with a breakdown of issues and recommendations. Review these insights to understand where improvements are needed.
Implement fixes: Use the recommendations provided by Lighthouse to address accessibility issues. This may involve adding appropriate alt text, ensuring sufficient color contrast, or improving keyboard navigation.
Re-test: After making changes, run Lighthouse again to verify that the issues have been resolved and that your site meets accessibility standards.

Keeping up with evolving accessibility standards and regulations

Prioritizing accessibility is essential for an inclusive and efficient web presence. By ensuring that your website meets accessibility standards, you not only broaden your audience to include individuals with disabilities but also enhance the overall user experience for everyone. Accessibility improvements can lead to better usability, increased engagement, and a positive reputation for your brand.

Here is a list of resources that you can use to find out information about the latest standards.