# Accessibility overview

Polypane has deep, built-in support for accessibility testing. From automated WCAG audits and contrast checking to focus order visualization, color blindness simulation, and a full accessibility tree.

Instead of hunting for the right tool, the table below maps every common accessibility task directly to the Polypane feature that handles it.

| Issue to test | What to use |
| --- | --- |
| Find and fix text contrast issues. | Use the [contrast checker debug tool](/docs/debug-overlays/#contrast-checker), find the contrast in the [Elements panel navigator](/docs/elements-panel/#navigator), check them with [Polypane Peek](/docs/polypane-peek/) or use the [color picker](/docs/color-picker/). |
| Test for color blindness. | Use the [color blindness simulators](/docs/debug-overlays/#simulators). |
| Test for vision impairments. | Use the [vision impairment simulators](/docs/debug-overlays/#visual-impairments). |
| Test for situational impairments. | Use the [Bright sunlight](/docs/debug-overlays/#bright-sunlight) and [Night mode](/docs/debug-overlays/#night-mode) simulators. |
| Test the readability of your page. | Use the [Readability debug tool](/docs/debug-overlays/#readability) and [Dyslexia](/docs/debug-overlays/#dyslexia) simulator. |
| Find and fix spelling mistakes. | Use the [Edit Content debug tool](/docs/debug-overlays/#edit-content) with built-in spell checking. |
| Verify a logical and valid heading structure. | Use the [heading overview](/docs/outline-panel/#headings) in the [outline panel](/docs/outline-panel/). |
| Verify a logical and valid landmark structure. | Use the [landmarks overview](/docs/outline-panel/#landmarks) in the [outline panel](/docs/outline-panel/). |
| Find images with missing alt attributes. | Use the [image overview](/docs/outline-panel/#images) in the [outline panel](/docs/outline-panel/) or the [Disable Images Debug Tool](/docs/debug-overlays/#disable-images). |
| Find images with redundant or unhelpful alt text. | Use the [image overview](/docs/outline-panel/#images) in the [outline panel](/docs/outline-panel/). |
| Find links with redundant or unhelpful text. | Use the [link overview](/docs/outline-panel/#links) in the [outline panel](/docs/outline-panel/). |
| Find links with inconsistent destination or text SC 3.2.4 | Use the [link overview](/docs/outline-panel/#links) in the [outline panel](/docs/outline-panel/). |
| Find headings and links with differing visible text SC 2.5.3 | Use the [heading overview](/docs/outline-panel/#headings) and [link overview](/docs/outline-panel/#links) in the [outline panel](/docs/outline-panel/). |
| Test keyboard support. | Check the "Focusable" state in the A11y tab in the [Elements panel navigator](/docs/elements-panel/#navigator) or in the [Polypane Peek](/docs/polypane-peek/) tooltip. |
| Verify a logical focus order. | Use the [focus order overview](/docs/outline-panel/#focus-order-tab-order) in the [outline panel](/docs/outline-panel/) and toggle "show overlay" for a visual representation. Or turn on the [Hide Cursor](/docs/debug-overlays/#hide-cursor) or [Track Focus](/docs/debug-overlays/#track-focus) debug tools and test it yourself. |
| Find input elements without labels. | Use the [Form outline](/docs/outline-panel/#forms) or the [Accessibility tree](/docs/outline-panel/#accessibility-tree) in the outline panel or the [Accessibility panel](/docs/accessibility-panel/). |
| Find WCAG Accessibility issues. | Use the [Accessibility panel](/docs/accessibility-panel/). |
| Verify a page works without CSS. | Use the [Disable CSS debug tool](/docs/debug-overlays/#disable-css). |
| Verify a page works without images. | Use the [Disable Images debug tool](/docs/debug-overlays/#disable-images). |
| Verify a page works without animations. | Use the Reduced-motion toggle in the [Media Emulation popover](/docs/emulation/#media). |
| Verify a page works in dark mode. | Use the Prefers-color-scheme toggle in the [Media Emulation popover](/docs/emulation/#media). |
| Verify a page works with reduced data. | Use the Prefers-reduced-data toggle in the [Media Emulation popover](/docs/emulation/#media). |
| Test narrow screens. | [Create a narrow pane](/docs/pane-management/#adding-and-removing-panes) (320px wide). |
| Find and fix horizontal overflows. | Check the [horizontal overflow warnings](/docs/horizontal-overflow/), then turn on [layout debugging](/docs/layout-debugging/), any overflowing items are colored in red. |
| Test if elements on the screen are reachable. | Use the [Reachability debug tool](/docs/debug-overlays/#reachability) (both right and left handed). |
| Test if clickable elements are large enough SC 2.5.5. | Use the [Target size cursor debug tool](/docs/debug-overlays/#target-size-cursor). |
| Test if text is large enough. | Use the [Small text debug tool](/docs/debug-overlays/#detect-small-text). |
| Test for WCAG SC 1.4.12 Text spacing | Use the [Text spacing debug tool](/docs/debug-overlays/#text-spacing-wcag-1412). |
| Test Forced Colors/High contrast mode | Use the [Forced Colors emulation](/docs/emulation/). |
| Test for SC 1.4.4 Resize Text | Use the [command bar](/docs/command-bar/) to quickly zoom to 200%, and check no content or functionality is lost. |
| Test for SC 1.4.10 Reflow | Create a pane at 1280px wide and use the [command bar](/docs/command-bar/) to quickly zoom to 400%, and check [horizontal overflow warnings](/docs/horizontal-overflow/). |
| Change the browser default font size | Use the [Default font size emulation](/docs/emulation/#emulation-settings) to change the font size and see how it affects the page. |
| Inspect the data the page sends to assistive tech | Use the [Accessibility tree](/docs/outline-panel/#accessibility-tree) in the outline panel. |
| Find elements that are missing an accessible name | Use the [Accessibility tree](/docs/outline-panel/#accessibility-tree) in the outline panel. |
| Find elements with an accessible name that can't have one. | Use the [Accessibility tree](/docs/outline-panel/#accessibility-tree) in the outline panel. |
| Find elements that are missing a role | Use the [Accessibility tree](/docs/outline-panel/#accessibility-tree) in the outline panel and toggle on "Show generics". |

## Accessibility articles

Be sure to check out our article [Find and fix accessibility issues with Polypane](/blog/find-and-fix-accessibility-issues-with-polypane/) which we keep up to date with new accessibility features we add, or [A11y tooling in Polypane](/blog/a-11-y-tooling-in-polypane/) for a video overview of the accessibility features in Polypane.

## Running an audit with Polypane

For a quick start on running an accessibility audit with Polypane, check out our [Accessibility audit workflow](/docs/accessibility-audit-workflow/)!

## WCAG criterion overview

Accessibility expert [Jules Ernst](https://200ok.nl) made an overview of WCAG success criteria and which Polypane feature can help with each success criterion, find it on his site: [Polypane and WCAG](https://www.200ok.nl/tips/polypane-and-wcag/).

## Testing workspaces

Accessibility expert [Ian Lloyd](https://a11y-tools.com/) published his set of Polypane workspaces, each of which focus on a different aspect of accessibility testing. You can find them on GitHub: [Polypane Accessibility Workspaces](https://github.com/lloydi/PolyPane-Config).

---

Polypane is the browser built for developers and designers — try it at https://polypane.app.