Suggest an editImprove this articleRefine the answer for “What tools help test accessibility?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Accessibility testing** combines several categories of tools: automated analyzers (axe DevTools, WAVE, Lighthouse), built-in browser tools, contrast checkers (WebAIM Contrast Checker), screen readers (NVDA, VoiceOver), and manual keyboard navigation checks. **Key point:** accessibility cannot be tested once; it needs to be designed, checked, and maintained at every stage of development.Shown above the full answer for quick recall.Answer (EN)ImageTesting **accessibility (a11y)** is a mandatory part of modern web development. It helps make sure a site is understandable and usable **for all users**, including those who use a keyboard, screen readers, screen magnifiers, and so on. There are several categories of tools: automated, manual, built into browsers, and specialized programs. --- ### 1. **Automated accessibility analyzers** These tools quickly check HTML code and styles against **WCAG (Web Content Accessibility Guidelines)** standards. They find obvious errors: missing `alt`, low contrast, incorrect headings, unreachable elements, and so on. | Tool | Format | Features | |---|---|---| | **axe DevTools** (Deque Systems) | Extension for Chrome, Firefox | One of the best tools; integrates with DevTools, shows errors and recommendations | | **WAVE** (WebAIM) | Online service + plugin | Highlights problems directly on the page | | **Lighthouse** (built into Chrome) | "Audits" / "Lighthouse" tab | Checks accessibility, SEO, and performance; built into Chrome DevTools | | **Accessibility Insights** (Microsoft) | Chrome/Edge extension | Step-by-step checks and visual hints for developers | | **axe-core CLI** | Command-line tool | For integration into CI/CD and automated tests | | **Pa11y** | CLI | Checks pages for WCAG errors, convenient for test automation | --- ### 2. **Browser developer tools** Almost all modern browsers have an "Accessibility" tab in DevTools. - **Chrome DevTools -> Elements -> Accessibility** Shows: an element's role, name, state, aria attributes, focus, and readability. - **Firefox Accessibility Inspector** Lets you visually view the accessibility tree. Great for a manual audit of structure and roles. --- ### 3. **Contrast and color checking** | Tool | Features | |---|---| | **WebAIM Contrast Checker** | Checks the contrast ratio between text color and background | | **Contrast Ratio (Lea Verou)** | A fast online test with visualization | | **Color Oracle** | Simulates various types of color blindness | | **Figma / Adobe XD / DevTools** | Have built-in contrast-checking features | --- ### 4. **Screen reader testing tools** To check how your site is perceived by users with visual impairments: | Screen reader | Platform | Note | |---|---|---| | **NVDA** (free) | Windows | One of the most popular, ideal for testing | | **JAWS** (commercial) | Windows | The standard in enterprise environments | | **VoiceOver** | macOS / iOS | Built into all Apple devices | | **TalkBack** | Android | Built into Google's mobile devices | Good practice: test at least with **NVDA** and **VoiceOver** to cover the main scenarios. --- ### 5. **Keyboard navigation testing** Simple but important manual testing: - Move through the page using **Tab**, **Shift+Tab**, **Enter**, **Space**, **Arrow keys**. - Check: - whether focus is visible (`outline`), - whether the order of transitions is logical, - whether dropdown menus and modal windows are reachable. This is something automated analyzers do not see, but a user notices immediately. --- ### 6. **Integration into development and CI/CD** - **axe-core**, **Pa11y**, and **Lighthouse CI** can be integrated into a pipeline so accessibility is checked automatically with every commit. - **eslint-plugin-jsx-a11y**: for React, it warns about problems directly in the code. --- ### Conclusion: For thorough accessibility testing, it is worth using a **combination of tools**: | Goal | Tools | |---|---| | Find errors automatically | axe DevTools, WAVE, Lighthouse | | Check structure and roles | Chrome DevTools, Firefox Accessibility | | Check contrast | WebAIM Contrast Checker | | Check screen reader behavior | NVDA, VoiceOver | | Check keyboard navigation | Manual testing | | Automate the process | axe-core CLI, Pa11y, ESLint a11y | > **Accessibility cannot be "tested once": it needs to be designed, checked, and maintained at every stage of development.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.