Self-check and mini-test
Two quick tools to spot common problems. Neither measures conformance.
20-point self-check
Do it on your key pages (home, product page, cart, checkout).
| # | Check | How to test | WCAG 2.1 | RGAA 4.1 |
|---|---|---|---|---|
| 1 | Everything works with a keyboard | Put the mouse away. Using Tab, Shift+Tab, Enter, Space and arrow keys, go through the menu, search, a product page, the cart and checkout. You must never get stuck. | 2.1.1, 2.1.2 | 4.11, 4.12, 7.3, 10.14, 12.9, 12.11 |
| 2 | Focus is visible | While tabbing, you can always see where you are (outline, underline…), including on buttons and fields. | 2.4.7 | 7.3, 10.7 |
| 3 | Tab order makes sense | Focus follows the reading order and does not jump around; a modal dialog keeps focus and returns it when closed. | 2.4.3 | 10.3, 12.7, 12.8, 13.3, 13.4 |
| 4 | There is a skip link | On the first Tab press a “Skip to content” link appears and works. | 2.4.1 | 9.1, 12.6, 12.7, 13.3, 13.4 |
| 5 | Meaningful images have a text alternative | Product photos, logos and icon buttons have a relevant text alternative; decorative images have alt="" (the mini-check below can help). | 1.1.1 | 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.9, 4.7, 4.8, 4.9, 6.1, 6.2, 7.2, 10.2, 13.3, 13.4, 13.5, 13.6 |
| 6 | Contrast is sufficient | Text: at least 4.5:1 (3:1 for large text). Field borders and meaningful icons: at least 3:1. Check prices, buttons, grey notes and banners. | 1.4.3, 1.4.11 | 3.2, 3.3, 10.5 |
| 7 | Colour is not the only cue | Errors, links in text, unavailable sizes or steps are not shown by colour alone. | 1.4.1 | 3.1, 10.6, 10.7, 10.9, 10.10 |
| 8 | Zoom to 200% and 320 px width | Zoom to 200%, then shrink the window to 320 px wide: everything stays readable and usable, without horizontal scrolling. | 1.4.4, 1.4.10 | 10.4, 10.11 |
| 9 | Headings structure the page | Each page has one main heading (h1) and nested sub-headings that describe the sections. | 1.3.1, 2.4.6 | 3.1, 5.1, 5.2, 5.4, 5.5, 5.6, 5.7, 5.8, 7.3, 8.9, 9.1, 9.2, 9.3, 9.4, 10.1, 10.2, 11.1, 11.2, 11.5, 11.6, 11.7, 11.8, 12.6, 13.3, 13.4 |
| 10 | Each page has a unique title | The browser tab shows a title that tells pages apart (e.g. “Cart – My Shop”). | 2.4.2 | 8.5, 8.6 |
| 11 | The language is declared | The html element has the correct lang attribute (e.g. lang="en"). | 3.1.1 | 8.3, 8.4, 13.3, 13.4 |
| 12 | Links are descriptive | No bare “click here” or “read more”: the link text or its context says where it goes. | 2.4.4 | 6.1, 6.2 |
| 13 | Every field has a label | Fields (search, address, card, newsletter) have a visible label tied to the field, not just placeholder text. | 1.3.1, 3.3.2, 4.1.2 | 1.2, 1.3, 1.9, 2.1, 2.2, 3.1, 4.13, 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8, 7.1, 7.2, 7.3, 8.2, 8.9, 9.1, 9.2, 9.3, 9.4, 10.1, 10.2, 10.8, 11.1, 11.2, 11.4, 11.5, 11.6, 11.7, 11.8, 11.9, 11.10, 12.6, 13.3, 13.4 |
| 14 | Errors are explained | Submit an empty form: the error is described in text, near the field, with a suggestion to fix it. | 3.3.1, 3.3.3 | 11.10, 11.11 |
| 15 | Status messages are announced | “Added to cart”, “3 results”: with a screen reader (NVDA, VoiceOver) the message is read without moving focus. | 4.1.3 | 7.5 |
| 16 | Videos have captions | Videos with speech have synchronised captions; important visual information is described. | 1.2.2, 1.2.5 | 4.3, 4.4, 4.5, 4.6 |
| 17 | Motion can be paused | Carousels and scrolling banners have a pause button and do not move for more than 5 seconds without a control. | 2.2.2 | 13.1, 13.8 |
| 18 | No blocking time limits | If a session or cart expires, the user is warned and can extend the time. | 2.2.1 | 13.1, 13.8 |
| 19 | Login, CAPTCHA and payment are accessible | A CAPTCHA has an alternative (audio or other); sign-up, login and payment (including 3-D Secure) work with a keyboard and a screen reader. | 1.1.1, 3.3.2 | 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.9, 4.7, 4.8, 4.9, 6.1, 6.2, 7.2, 10.2, 11.1, 11.2, 11.4, 11.5, 11.6, 11.7, 11.10, 13.3, 13.4, 13.5, 13.6 |
| 20 | Downloadable documents are accessible | Terms, invoices, manuals as PDF: selectable text, tagged headings, or an equivalent HTML version. | 1.1.1, 1.3.1 | 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.9, 3.1, 4.7, 4.8, 4.9, 5.1, 5.2, 5.4, 5.5, 5.6, 5.7, 5.8, 6.1, 6.2, 7.2, 7.3, 8.9, 9.1, 9.2, 9.3, 9.4, 10.1, 10.2, 11.1, 11.5, 11.6, 11.7, 11.8, 12.6, 13.3, 13.4, 13.5, 13.6 |
Automated mini-test of an HTML snippet
Paste the HTML of a page or component (right-click › “View page source”, or the browser inspector). The test runs in your browser with axe-core 4.13; the code is not sent anywhere.
Scripts in the pasted code are removed and no external resource is loaded (images, CSS, fonts). To test contrast, paste the CSS in a <style> element too.