Documentation
Learn how Polypane improves your workflow
Accessibility overview
Polypane contains a lot of different features that will help you analyze and improve the accessibility of your web pages. Check out the table below to see which features can help you!
| Issue to test | What to use |
|---|---|
| Find and fix text contrast issues. | Use the contrast checker debug tool, find the contrast in the Elements panel navigator, check them with Polypane Peek or use the color picker. |
| Test for color blindness. | Use the color blindness simulators. |
| Test for vision impairments. | Use the vision impairment simulators. |
| Test for situational impairments. | Use the Bright sunlight and Night mode simulators. |
| Test the readability of your page. | Use the Readability debug tool and Dyslexia simulator. |
| Find and fix spelling mistakes. | Use the Edit Content debug tool with built-in spell checking. |
| Verify a logical and valid heading structure. | Use the heading overview in the outline panel. |
| Verify a logical and valid landmark structure. | Use the landmarks overview in the outline panel. |
| Find images with missing alt attributes. | Use the image overview in the outline panel or the Disable Images Debug Tool. |
| Find images with redundant or unhelpful alt text. | Use the image overview in the outline panel. |
| Find links with redundant or unhelpful text. | Use the link overview in the outline panel. |
| Find links with inconsistent destination or text SC 3.2.4 | Use the link overview in the outline panel. |
| Find headings and links with differing visible text SC 2.5.3 | Use the heading overview and link overview in the outline panel. |
| Test keyboard support. | Check the "Focusable" state in the A11y tab in the Elements panel navigator or in the Polypane Peek tooltip. |
| Verify a logical focus order. | Use the focus order overview in the outline panel and toggle "show overlay" for a visual representation. Or turn on the Hide Cursor or Track Focus debug tools and test it yourself. |
| Find input elements without labels. | Use the Accessibility tree in the outline panel or the Accessibility panel. |
| Find WCAG Accessibility issues. | Use the Accessibility panel or A11y.css debug tool. |
| Verify a page works without CSS. | Use the Disable CSS debug tool. |
| Verify a page works without images. | Use the Disable Images debug tool. |
| Verify a page works without animations. | Use the Reduced-motion toggle in the Media Emulation popover. |
| Verify a page works in dark mode. | Use the Prefers-color-scheme toggle in the Media Emulation popover. |
| Verify a page works with reduced data. | Use the Prefers-reduced-data toggle in the Media Emulation popover. |
| Test narrow screens. | Create a narrow pane (320px wide). |
| Find and fix horizontal overflows. | Check the horizontal overflow warnings, then turn on layout debugging, any overflowing items are colored in red. |
| Test if elements on the screen are reachable. | Use the Reachability debug tool (both right and left handed). |
| Test if clickable elements are large enough SC 2.5.5. | Use the Target size cursor debug tool. |
| Test if text is large enough. | Use the Small text debug tool. |
| Test for WCAG SC 1.4.12 Text spacing | Use the Text spacing debug tool. |
| Test Forced Colors/High contrast mode | Use the Forced Colors emulation. |
| Test for SC 1.4.4 Resize Text | Use the 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 to quickly zoom to 400%, and check horizontal overflow warnings. |
| Change the browser default font size | Use the Default font size emulation 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 in the outline panel. |
| Find elements that are missing an accessible name | Use the Accessibility tree in the outline panel. |
| Find elements with an accessible name that can't have one. | Use the Accessibility tree in the outline panel. |
| Find elements that are missing a role | Use the 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 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.
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?
Contact us any time though chat, Slack or our contact form:
Contact SupportBuild your next project with Polypane
- Use all features on all plans
- On Mac, Window and Linux
- 14-day free trial – no credit card needed
