Documentation
Learn how Polypane improves your workflow
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, use these tables to find the Polypane feature that helps with each accessibility task.
Visual access and readability
| Issue to test | What to use |
|---|---|
| Find and fix text contrast issues. | Use the contrast checker debug tool, the Elements panel navigator, Polypane Peek or the color picker. |
| Test for color blindness or vision impairments. | Use the color blindness simulators and vision impairment simulators. |
| Test for situational impairments, such as bright sunlight. | Use the Bright sunlight and Night mode simulators. |
| Check readability and spelling. | Use the Readability, Dyslexia and Edit Content/check spelling debug tools. |
| Test text size and spacing. | Use the Small text and Text spacing debug tools. |
| Check the effect of larger text. | Use Default font size emulation. |
| Check that color is not the only way information is conveyed. | Use the color blindness simulators. |
Content and structure
| Issue to test | What to use |
|---|---|
| Verify heading structure, including missing or multiple H1s, skipped levels, duplicate or hidden headings, overly long headings and repeated text in accessible names. | Use the heading overview in the Outline panel. |
| Check for missing, duplicate or incorrectly nested landmarks. | Use the landmarks overview in the Outline panel. |
| Find images with missing, redundant or unhelpful alt text, and check that decorative images are marked as presentational. | Use the image overview in the Outline panel or the Disable Images debug tool. |
Find links with missing or ambiguous text, missing aria-current, duplicate titles, empty or placeholder destinations, mismatched labels and URLs, or broken links (including skip links). | Use the link overview in the Outline panel. |
| Find headings and links whose accessible names differ from their visible text (SC 2.5.3). | Use the heading overview and link overview in the Outline panel. |
| Find form fields without labels or fieldset legends, unclear required state, duplicate or multiple labels, repeated label text, unknown autocomplete values, insecure submissions and reset buttons. | Use the form outline in the Outline panel. |
| Find empty buttons and other elements missing an accessible name. | Inspect the Accessibility tree, the Elements panel A11y tab or Polypane Peek. |
| Find elements with an accessible name that should not have one, missing or incorrect roles, duplicate names, or broken ARIA ID references. | Inspect the Accessibility tree and the Elements panel; enable "Show generics" to find missing roles, or use the Show roles and Show ARIA attributes debug tools. |
| Check the page language for missing or invalid values. | Use the Meta panel, which flags invalid language codes. |
| Find WCAG accessibility issues. | Use the Accessibility panel. |
Keyboard and interaction
| Issue to test | What to use |
|---|---|
| Test keyboard support and whether interactive elements are reachable without a mouse. | Check the "Focusable" state in the Elements panel navigator or the Polypane Peek tooltip. |
Check focus order, including focusable elements missing from the tab order, positive tabindex values and unexpected sequences. | Use the focus order overview in the Outline panel and toggle "show overlay". You can also use the Hide Cursor and Track Focus debug tools. |
| Check for focus traps and whether the focused element has the expected role and accessible name. | Tab through the page with the Track Focus debug tool, which shows the focused element's role and computed name. |
| Check visible focus styles on all focusable elements. | Use Apply all focus styling and Apply all focus-visible styling. |
| Test whether clickable elements are large enough (WCAG 2.2 SC 2.5.8). | Use the Target size cursor debug tool. |
| Test whether elements are reachable on mobile screens. | Use the Reachability debug tool for both right- and left-handed use. |
Layout and user preferences
| Issue to test | What to use |
|---|---|
| Verify a page works without CSS or images. | Use the Disable CSS and Disable Images debug tools. |
| Check whether essential content and functionality remain available without JavaScript. | Use the Disable JS debug tool. |
| Test narrow screens and find horizontal overflow. | Create a 320px-wide pane, check horizontal overflow warnings and use layout debugging to highlight overflowing items. |
| Check whether layouts handle longer or shorter text, including content in different languages. | Use the Content chaos test. |
| Test resize text (SC 1.4.4). | Zoom to 200% with the command bar or set a pane's page zoom, then check that no content or functionality is lost. |
| Test reflow (SC 1.4.10). | Create a 1280px-wide pane, zoom to 400% with the command bar and check horizontal overflow warnings. |
| Test reduced motion, reduced transparency, dark mode, increased contrast, forced colors and reduced data preferences. | Use Media emulation. |
Accessibility articles
Be sure to check out our article Find and fix accessibility issues with Polypane which we keep up to date with new accessibility features we add, or A11y 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!
WCAG criterion overview
Accessibility expert Jules Ernst 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.
Testing workspaces
Accessibility expert Ian Lloyd 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.
Have a question about Polypane?
Reach out via (real human) chat, Slack or our contact form:
Contact SupportBuild the way you already build, without missing anything.
Free 14 day trial, no credit card needed.
- 1 Create your account. Takes a minute.
- 2 Download the app. For Windows, Mac & Linux.
- 3 Build your next project with Polypane
