Module 6 – Reviewing the Usability and Accessibility of Your Website
Regularly reviewing your website using these tools will ensure you are providing your users a quality experience and that you are compliant with design best practices and accessibility guidelines. Use the following tools to test the usability and accessibility of your website:
About This Tool
Reading time: ~3 mins
Format: Tool
Some of these fixes may require the support or guidance of a web developer or web designer.
Google Lighthouse
This tool dynamically analyzes web pages and generates a report on how well the selected page performs. The report reviews Performance, Accessibility, Best Practice and SEO, and indicates where and how to implement fixes.
To run your tests, first open your website in Google Chrome, then right-click anywhere on your website and select “Inspect” from the list that appears. This will open your Chrome Dev Tools.
Click the >> from the list of items that will appear in the top right, in that dropdown select Lighthouse:
Select which factor you would like to test (e.g. Performance, Accessibility, Best Practice, SEO) and which device you would like it tested on (Mobile or Desktop).
Click Analyze page load and the test will begin. After about 30 seconds, Lighthouse generates a report on the page.
Easily check how your website appears across different devices using this button in the top left of your Chrome Dev Tools.
Performance
The performance audit uses Google Page Speed Insights Tool (PSI) to examine the content and interactive load times of your site. The site speed test measures how quickly the contents of a page are viewable to the user.
Best Practices
This audit relates to developmental best practices such as using HTTPS and displaying images with correct aspect ratios.
Accessibility
The accessibility audit highlights opportunities to improve the accessibility of your site. Manual testing is also encouraged as all issues cannot be automatically detected.
SEO
This basic SEO audit ensures your site is optimized for search engine results rankings.
Google Mobile-Friendly Test
Use this tool to test how easily a visitor can use your page on a mobile device. Enter a page URL into the field at the top of the page to see how your site scores.
This tool can determine whether your website:
- Follows responsive design and on-page content appears consistently across devices.
- Has content that is legible and clickable at small screen sizes.
- Uses incompatible plugins (e.g. plugins such as Flash are not supported by most mobile browsers).
Web Accessibility Evaluation (WAVE) Tool
WAVE is an evaluation tool that will scan a page on your site to identify accessibility and contrast issues, as well as give context to these issues and potential solutions.
WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors. These calculations are based on the formulas specified by the W3C, but it also facilitates human evaluation of web content. Their philosophy is to focus on issues that are known to impact end users, facilitate human evaluation, and to educate about web accessibility.
Contrast Checker Tool
This tool is built to test colour contrast compliance with the WCAG. To run your test, select a foreground colour and a background colour using RGB or hex code values. The results will generate automatically and you will receive your scores. You will receive a pass, margin or fail, depending on your selections.
You can also see how your website would appear to a colourblind user, by clicking “See Grayscale” with in the tool.
Other Helpful Chrome Extensions
Last updated: August, 2024
