Accessibility testing tools for managed laptops
Version 3.1, published 21 February 2022.
Automated tools that can be used for testing websites on managed devices, where you are unable to install additional tools or browser plug-ins.
On this page
Using the tools
How to use the tools
A bookmarklet is a link that contains JavaScript. When a bookmarklet link is activated, the browser runs the JavaScript code that it contains. It doesn't need to be properly installed and so is not restricted by Defra IT policies.
The most common way of installing a bookmarklet is to drag and drop the bookmarklet link into your browser's bookmarks or favourites toolbar. You can also copy the link location of the bookmarklet link and pasting it into the Location field of a bookmark that you create using your browser's Bookmark Manager.
Lighthouse is a part of the Chrome web browser's development tools. You can run it as follows:
- Press F12 (fn-F12 on Mac) to open Lighthouse in Chrome DevTools. (You can also right-click and choose inspect to open DevTools and choose the Lighthouse tab.)
- If you don't see the Lighthouse option in the toolbar, you may need to click on the two arrows at the end.
- Once the Lighthouse tool opens, select only the 'Accessibility' category, and mobile or desktop, then choose 'Generate report'.
They sometimes don't work or display oddly
Occasionally you may find that nothing happens when you run a bookmarklet. This is usually because the Content Security Policy for the site is blocking the script. (You can check this by looking for errors in the dev tools console, if you know how to do that). There's no way to work around this block.
Very occasionally, the display of the bookmarklet will be affected by the styling for the site you are testing. This does not affect the test results but some parts of the display may be missing or too big, for example. Again, there is no way to fix this.
Lighthouse should work OK as it works in a different way that does not trigger the Content Security Policy.
General tools that will spot a range of issues
HTML CodeSniffer Accessibility Auditor Bookmarklet checks against several Web Content Accessibility Guidelines (WCAG) 2.1
WAVE browser bookmarklet is a bookmarklet version of their plugin. It sends the page to the WAVE servers so don't use this with sensitive content or data.
Lighthouse (within Google Chrome's development tools) will identify a range of common problems including:
- alternative text for images
- form fields missing associated labels
- whether native HTML5 interactive elements, such as links, have a name
- whether the language of the page has been set
W3C Validator can be used to validate pages and may find a number of issues. Beware - not all invalid code will cause accessibility problems.
Limitations of automated tests
Automated tests are not comprehensive and do not provide you with a complete view of the accessibility of a page, so manual tests should always be completed too.
Specific tools for checking details
Image alternative text
Paul J Adam images bookmarklet
Lighthouse (within Google Chrome's development tools) can identify whether images have alternative text.
The tools provided will just check for content within the alt attribute, but non-text content still requires manual checking to ensure that the alternative text serves an equivalent purpose.
WCAG Success Criterion 1.1.1: Non-text Content
It may also be possible that images pass this success criterion without using an alt attribute if the content is one of the exemptions described in the 1.1.1 Non-text Content success criterion, or if one of the sufficient techniques for 1.1.1 Non-text Content are met.
Form markup
Forms bookmarklet can be used to identify the way that form fields are marked up and the roles used.
WCAG Success Criterion 1.3.1: Info and Relationships
Landmarks
Landmarks bookmarklet can be used to identify the semantic roles of each landmark used within the page.
WCAG Success Criterion 1.3.1: Info and Relationships
Reading order
Reading order bookmarklet can be used to determine the reading order of content on a page in order to understand if the sequence affects the meaning of content.
WCAG Success Criterion 1.3.2: Meaningful Sequence
Device Orientation
Browser developer tools can be used to enable the responsive design mode, which you can use to switch the orientation.
WCAG Success Criterion 1.3.4: Orientation
Colour contrast
Contrast analysis widget can be used to identify elements on the page with low colour contrast.
WCAG Success Criterion 1.4.3: Contrast (Minimum)
Text spacing
Text spacing bookmarklet implements the line spacing, word spacing and letter spacing styling required for testing for this success criteria.
WCAG Success Criterion 1.4.12: Text spacing
Focus order
Focus interactive controls bookmarklet will navigate through the page, replicating hitting the tab/shift key to move through the content.
WCAG Success Criterion 2.4.3: Focus Order
2.4.6: Headings and labels bookmarklets
Accessibility HTML5 Outliner can be used to quickly provide you with the headings and the hierarchy used on a page.
Language of the page
Lighthouse (within Google Chrome's development tools) can identify whether the language of the page has been set.
The W3C Validator can identify whether the language of the page has been set.
WCAG Success Criterion 3.1.1: Language of the page
Code Parsing
The W3C Validator should be used to check for parsing errors, focussing on those that are relevant to the Web Content Accessibility Guidelines' success criteria, as these errors may lead to parsing errors or assistive technology to crash.
WCAG Success Criterion 4.1.1: Parsing
Check interactive elements for names
Lighthouse (within Google Chrome's development tools) can identify whether native HTML5 interactive elements, such as links, have a name.
WCAG Success Criterion 4.1.2: Name, role, value
Simulate colour vision deficiencies
Google Chrome's development tools can simulate colour vision deficiencies:
- Open developer tools
ctrl + shift + I - Click the three dots in the top right
- Select "More tools"
- Select "Rendering"
- A new tab will open at the bottom of the developer tools
- Scroll to the bottom of this "Rendering" tab
- Select an option from the "Emulate vision deficiencies" menu
You can also check the page will respect the user's preferred colour scheme (dark or light mode), reduced motion, and other CSS detectable features.
Other bookmarklets
JavaScript Bookmarklets for Accessibility Testing
Accessibility Bookmarklets - Highlight accessibility features of web pages