WCAG 2.1 AA quick audit: a 30-minute method
Not legal advice. This guide is technical information about web accessibility. It does not tell you whether a law applies to your business and does not guarantee compliance.
You have half an hour and one important page, for example a sign-up form or a product page. This method gives you a realistic first picture of its accessibility. It will not tell you that the page conforms to WCAG; it will tell you where the obvious barriers are and what still needs a longer look.
Quick review versus full evaluation
The W3C separates the two clearly. Its Easy Checks are described as a first review that covers just a few issues and is designed to be quick rather than definitive; W3C also warns that a page could seem to pass them and still have significant barriers. A full evaluation of a website follows WCAG-EM: define the scope, explore the site, select a representative sample, evaluate it and report the findings.
The method below sits between the two. It is still a quick review, but it is ordered so that the cheap automated part happens first and your limited human time goes to the checks a tool cannot do.
Minutes 0 to 5: automated scan
Run an automated checker on the page, for example our free scanner with the paste or bookmarklet method. Note each failed rule and the WCAG criterion it maps to. Typical findings are images without alt attributes, buttons with no accessible name, form fields without labels and text below the contrast threshold.
Write down the number of elements affected, not only the rule names. Ten unlabelled fields in one checkout step is a different problem from one decorative icon. Treat “needs review” results as questions for the next steps rather than as passes.
Minutes 5 to 15: keyboard only
- Unplug the mouse or stop touching the trackpad. Press Tab from the top of the page.
- Check that a skip link appears first and works (2.4.1).
- Watch that the focus indicator is always visible and that it moves in an order matching the layout (2.4.7, 2.4.3).
- Open and close every menu, dialog and accordion with Enter, Space and Escape. Make sure you can always leave a component (2.1.1, 2.1.2).
- Complete the main task of the page, such as adding to the cart or sending the form, with the keyboard alone.
Minutes 15 to 20: zoom and reflow
Zoom the browser to 200% and confirm that no text is cut off or overlapping (1.4.4). Then make the window 320 CSS pixels wide, or use the device toolbar in your browser’s developer tools. Content should reflow into a single column without horizontal scrolling, apart from things like data tables and maps that genuinely need two dimensions (1.4.10).
Minutes 20 to 25: contrast and colour
Automated tools measure text contrast well on plain backgrounds but often cannot decide for text placed on images or gradients. Check those spots by eye or with a colour picker against the 4.5:1 threshold for normal text and 3:1 for large text (1.4.3). Look at focus rings, input borders and icons too: they need 3:1 against their background (1.4.11). Finally, find any place where colour alone carries meaning, such as a red border as the only sign of an error (1.4.1).
Minutes 25 to 30: forms and messages
- Submit the form empty. Each error should be described in text and tied to its field (3.3.1).
- The error message should say how to fix the problem, for example the expected date format (3.3.3).
- Fields for personal data such as name, email and address should carry the right
autocompletevalues (1.3.5). - Success and loading messages that appear without a page reload should be announced as status messages (4.1.3).
Writing it up
List each finding with the page, the element, the WCAG criterion and a one-line fix. Keep a separate list called “not checked” for everything this method skips, such as screen reader testing, captions, timing and the other pages of the site. That second list is honest and useful: it is exactly what a fuller review, or a VPAT-based ACR, must cover next. Our fixed-price reports automate the first step across up to ten page types and include the self-check list for the rest.
Check your own pages
The free scanner runs automated WCAG checks in your browser. Nothing is uploaded.
Related guides
Related tools
Sources
- W3C WAI: Easy Checks, a first review of web accessibility: https://www.w3.org/WAI/test-evaluate/preliminary/
- W3C: WCAG-EM, website accessibility conformance evaluation methodology: https://www.w3.org/TR/WCAG-EM/
- W3C: Web Content Accessibility Guidelines (WCAG) 2.1: https://www.w3.org/TR/WCAG21/