Testing Accessibility
This section of the tutorial assumes you are using the Chrome or Firefox Browser. (If you aren’t you should, as this is the standard for web development)
You might have heard the term “Lighthouse scores” in web development circles. What it means is a score that gets assigned to a webpage measuring four categories. Performance, Accessibility, Best Practices and SEO. Obviously we are only concerned with Accessibility. But keep in mind that you should strive to have high lighthouse scores in general.
How to get Lighthouse scores in Chrome
1. Open Chrome and navigate to the website you want to test.
2. Press F12 to open DevTools, or right-click anywhere on the page and select Inspect.
3. Go to the Lighthouse tab in DevTools.
4. Choose the type of report you want (Mobile/Desktop, Performance, Accessibility, SEO, etc.).
5. Click Generate Report.
6. After a few moments, the Lighthouse report will appear with scores and suggestions for improvement.
How to get Lighthouse scores in Firefox
1. Install the Lighthouse extension from the Chrome Web Store (works in Firefox).
2. After installation, click the Lighthouse icon in the toolbar.
3. Select the type of report you want (Mobile/Desktop, Performance, Accessibility, etc.).
4. Click Generate Report.
5. The report will show up in a new tab with scores and improvement tips.
Great, now that will be a tool you can take with you and make great use of in the future. Another great tool to have is a screen reader, so you can personally test how a screen reader will behave on your website. The two screen readers we’ll recommend are NVDA and JAWS, both of which are free and open source! We won’t cover installation steps and how to use them, as you can find that information for your screen reader on their respective websites.