Testing your site in different clients and views is as important as testing it in different browsers. This may not be practical in all scenarios, and it can miss situations where users utilize a browser but may have another disability. Fortunately there are different tools you can use as a developer to get a sense for the accessibility of your page.
If you are already using automated testing for your websites, you can incorporate accessibility tests into your existing flow. axe-core is the rules engine that powers many other accessibility testing tools, including Lighthouse and Accessibility Insights. It has many integrations with different testing frameworks, and is a good choice for adding automated accessibility testing into integration tests.
However, automated tests can only catch a subset of accessibility issues. Accessibility Insights for Web is a browser extension which has a full set of instructions for a manual walk-through of all Web Content Accessibility Guidelines (WCAG) 2.1 criteria. This can help you by providing a checklist to use for testing, and provide you with more experience in ensuring accessibility.
Someone who is color-blind may not be able to differentiate between different colors, or have difficulty working with colors which are too similar to one another. The World Wide Web Consortium (W3C), the standards organization for the web, established a rating system for color contrast.
Choosing the right colors to ensure your page is accessible to all can be tricky to do by hand. Fortunately, there are different tools available to both generate appropriate colors and test your site to ensure compliance.
- Palette generation tools
- Adobe Color an interactive tool for testing different color combinations
- Color Safe, a tool for generating text colors based on a selected background color
- Compliance checkers
- Browser extensions to test a page
- Applications
Lighthouse is a tool created by Google to analyze websites. The utility has become so popular it's included in many browsers' developer tools. Lighthouse is able to examine a page's search engine optimization (SEO), load performance, and other best practices. Lighthouse can also analyze a page and provide a score for its current accessibility.
[NOTE]: Like any automated tool, the score provided by Lighthouse should not be relied upon as the sole indication of a page's accessibility. However it does provide a good starting point for identifying and remedying problems.
Test out Lighthouse in your browser. The screenshots below will utilize Edge, however the same steps can be followed in Chrome and many other browsers.
- Open your browser and navigate to https://microsoft.com
- Press F12 to open the developer tools
- In the top, click the >> (chevron) icon to open the list of hidden tabs
- Choose Lighthouse from the list
- Under Categories unselect all items except Accessibility
- Under Device select Desktop
![Screenshot of Lighthouse with only Accessibility selected under Categories and Desktop selected for Device]
- Click Generate report
- Notice the score and associated information about the page
- You can test other pages by clicking Clear all in Lighthouse, navigating to a different page, and then clicking Generate report
You have now seen how to use Lighthouse, and the accessibility information the tool can provide.