Skip to contentSkip to footer

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 testWhat 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.
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 Tota11y Debug tool 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 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 1.4.12 Text spacingUse the Text spacing debug tool.
Test Forced Colors/High contrast modeUse the Forced Colors emulation.
Test for 1.4.4 Resize TextUse the command bar to quickly zoom to 200%, and check no content or functionality is lost.
Test for 1.4.10 ReflowCreate 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 sizeUse the Live CSS Panel to change the font size of :root and see how it affects the page.

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;

PP

Have a question about Polypane?

Contact us any time though chat, Slack or our contact form:

Contact Support

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for free
Polypane screenshot