{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/accessibility-overview/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Accessibility overview\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `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.`), mdx(\"p\", null, `Instead of hunting for the right tool, the table below maps every common accessibility task directly to the Polypane feature that handles it.`), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Issue to test`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `What to use`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find and fix text contrast issues.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#contrast-checker\"\n  }), `contrast checker debug tool`), `, find the contrast in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/elements-panel/#navigator\"\n  }), `Elements panel navigator`), `, check them with `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/polypane-peek/\"\n  }), `Polypane Peek`), ` or use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/color-picker/\"\n  }), `color picker`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test for color blindness.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#simulators\"\n  }), `color blindness simulators`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test for vision impairments.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#visual-impairments\"\n  }), `vision impairment simulators`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test for situational impairments.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#bright-sunlight\"\n  }), `Bright sunlight`), ` and `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#night-mode\"\n  }), `Night mode`), ` simulators.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test the readability of your page.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#readability\"\n  }), `Readability debug tool`), ` and `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#dyslexia\"\n  }), `Dyslexia`), ` simulator.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find and fix spelling mistakes.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#edit-content\"\n  }), `Edit Content debug tool`), ` with built-in spell checking.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Verify a logical and valid heading structure.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#headings\"\n  }), `heading overview`), ` in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `outline panel`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Verify a logical and valid landmark structure.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#landmarks\"\n  }), `landmarks overview`), ` in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `outline panel`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find images with missing alt attributes.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#images\"\n  }), `image overview`), ` in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `outline panel`), ` or the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#disable-images\"\n  }), `Disable Images Debug Tool`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find images with redundant or unhelpful alt text.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#images\"\n  }), `image overview`), ` in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `outline panel`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find links with redundant or unhelpful text.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#links\"\n  }), `link overview`), ` in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `outline panel`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find links with inconsistent destination or text SC 3.2.4`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#links\"\n  }), `link overview`), ` in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `outline panel`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find headings and links with differing visible text SC 2.5.3`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#headings\"\n  }), `heading overview`), ` and `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#links\"\n  }), `link overview`), ` in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `outline panel`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test keyboard support.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Check the \"Focusable\" state in the A11y tab in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/elements-panel/#navigator\"\n  }), `Elements panel navigator`), ` or in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/polypane-peek/\"\n  }), `Polypane Peek`), ` tooltip.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Verify a logical focus order.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#focus-order-tab-order\"\n  }), `focus order overview`), ` in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `outline panel`), ` and toggle \"show overlay\" for a visual representation. Or turn on the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#hide-cursor\"\n  }), `Hide Cursor`), ` or `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#track-focus\"\n  }), `Track Focus`), ` debug tools and test it yourself.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find input elements without labels.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#accessibility-tree\"\n  }), `Accessibility tree`), ` in the outline panel or the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/accessibility-panel/\"\n  }), `Accessibility panel`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find WCAG Accessibility issues.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/accessibility-panel/\"\n  }), `Accessibility panel`), ` or `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#a11ycss\"\n  }), `A11y.css debug tool`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Verify a page works without CSS.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#disable-css\"\n  }), `Disable CSS debug tool`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Verify a page works without images.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#disable-images\"\n  }), `Disable Images debug tool`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Verify a page works without animations.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the Reduced-motion toggle in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/emulation/#media\"\n  }), `Media Emulation popover`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Verify a page works in dark mode.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the Prefers-color-scheme toggle in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/emulation/#media\"\n  }), `Media Emulation popover`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Verify a page works with reduced data.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the Prefers-reduced-data toggle in the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/emulation/#media\"\n  }), `Media Emulation popover`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test narrow screens.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/pane-management/#adding-and-removing-panes\"\n  }), `Create a narrow pane`), ` (320px wide).`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find and fix horizontal overflows.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Check the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/horizontal-overflow/\"\n  }), `horizontal overflow warnings`), `, then turn on `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/layout-debugging/\"\n  }), `layout debugging`), `, any overflowing items are colored in red.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test if elements on the screen are reachable.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#reachability\"\n  }), `Reachability debug tool`), ` (both right and left handed).`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test if clickable elements are large enough SC 2.5.5.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#target-size-cursor\"\n  }), `Target size cursor debug tool`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test if text is large enough.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#detect-small-text\"\n  }), `Small text debug tool`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test for WCAG SC 1.4.12 Text spacing`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/debug-tools/#text-spacing-wcag-1412\"\n  }), `Text spacing debug tool`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test Forced Colors/High contrast mode`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/emulation/\"\n  }), `Forced Colors emulation`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test for SC 1.4.4 Resize Text`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/command-bar/\"\n  }), `command bar`), ` to quickly zoom to 200%, and check no content or functionality is lost.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Test for SC 1.4.10 Reflow`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Create a pane at 1280px wide and use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/command-bar/\"\n  }), `command bar`), ` to quickly zoom to 400%, and check `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/horizontal-overflow/\"\n  }), `horizontal overflow warnings`), `.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Change the browser default font size`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/emulation/#emulation-settings\"\n  }), `Default font size emulation`), ` to change the font size and see how it affects the page.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Inspect the data the page sends to assistive tech`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#accessibility-tree\"\n  }), `Accessibility tree`), ` in the outline panel.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find elements that are missing an accessible name`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#accessibility-tree\"\n  }), `Accessibility tree`), ` in the outline panel.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find elements with an accessible name that can't have one.`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#accessibility-tree\"\n  }), `Accessibility tree`), ` in the outline panel.`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Find elements that are missing a role`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": null\n  }), `Use the `, mdx(\"a\", _extends({\n    parentName: \"td\"\n  }, {\n    \"href\": \"/docs/outline-panel/#accessibility-tree\"\n  }), `Accessibility tree`), ` in the outline panel and toggle on \"Show generics\".`)))), mdx(\"h2\", {\n    \"id\": \"accessibility-articles\"\n  }, `Accessibility articles`), mdx(\"p\", null, `Be sure to check out our article `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/find-and-fix-accessibility-issues-with-polypane/\"\n  }), `Find and fix accessibility issues with Polypane`), ` which we keep up to date with new accessibility features we add, or `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/a-11-y-tooling-in-polypane/\"\n  }), `A11y tooling in Polypane`), ` for a video overview of the accessibility features in Polypane.`), mdx(\"h2\", {\n    \"id\": \"wcag-criterion-overview\"\n  }, `WCAG criterion overview`), mdx(\"p\", null, `Accessibility expert `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://200ok.nl\"\n  }), `Jules Ernst`), ` made an overview of WCAG success criteria and which Polypane feature can help with each success criterion, find it on his site: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.200ok.nl/tips/polypane-and-wcag/\"\n  }), `Polypane and WCAG`), `.`), mdx(\"h2\", {\n    \"id\": \"testing-workspaces\"\n  }, `Testing workspaces`), mdx(\"p\", null, `Accessibility expert `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://a11y-tools.com/\"\n  }), `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: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/lloydi/PolyPane-Config\"\n  }), `Polypane Accessibility Workspaces`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Polypane has deep, built-in support for accessibility testing. From automated WCAG audits and contrast checking to focus order visualization…","frontmatter":{"title":"Accessibility overview","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Browser features","nextSlug":"/docs/browser-features/","prevTitle":"Brand guidelines","prevSlug":"/docs/brand-guidelines/","slug":"/docs/accessibility-overview/","date":null,"ogFileName":"accessibility-overview"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/docs/1-password-setup-instructions/"},"frontmatter":{"title":"1Password setup instructions"}}},{"node":{"fields":{"slug":"/docs/accessibility-audit-workflow/"},"frontmatter":{"title":"Accessibility audit workflow"}}},{"node":{"fields":{"slug":"/docs/accessibility-overview/"},"frontmatter":{"title":"Accessibility overview"}}},{"node":{"fields":{"slug":"/docs/accessibility-panel/"},"frontmatter":{"title":"Accessibility panel"}}},{"node":{"fields":{"slug":"/docs/application-folder/"},"frontmatter":{"title":"Application folder"}}},{"node":{"fields":{"slug":"/docs/brand-guidelines/"},"frontmatter":{"title":"Brand guidelines"}}},{"node":{"fields":{"slug":"/docs/breakpoints/"},"frontmatter":{"title":"Breakpoints"}}},{"node":{"fields":{"slug":"/docs/browse/"},"frontmatter":{"title":"Browse"}}},{"node":{"fields":{"slug":"/docs/browser-extensions/"},"frontmatter":{"title":"Browser extensions"}}},{"node":{"fields":{"slug":"/docs/browser-features/"},"frontmatter":{"title":"Browser features"}}},{"node":{"fields":{"slug":"/docs/browsersync-and-polypane/"},"frontmatter":{"title":"Browsersync and Polypane"}}},{"node":{"fields":{"slug":"/docs/color-picker/"},"frontmatter":{"title":"Color Picker"}}},{"node":{"fields":{"slug":"/docs/command-bar/"},"frontmatter":{"title":"Command Bar"}}},{"node":{"fields":{"slug":"/docs/command-line-options/"},"frontmatter":{"title":"Command line options"}}},{"node":{"fields":{"slug":"/docs/configuring-logitech-mouses/"},"frontmatter":{"title":"Configuring Logitech mouses"}}},{"node":{"fields":{"slug":"/docs/configuring-webstorm-to-work-with-polypane/"},"frontmatter":{"title":"Configuring WebStorm to work with Polypane"}}},{"node":{"fields":{"slug":"/docs/console/"},"frontmatter":{"title":"Console"}}},{"node":{"fields":{"slug":"/docs/customizing-polypane/"},"frontmatter":{"title":"Customizing Polypane"}}},{"node":{"fields":{"slug":"/docs/dark-and-light-mode/"},"frontmatter":{"title":"Dark and light mode"}}},{"node":{"fields":{"slug":"/docs/data-processing-agreement/"},"frontmatter":{"title":"Data Processing Agreement"}}},{"node":{"fields":{"slug":"/docs/debug-tools/"},"frontmatter":{"title":"Debug tools"}}},{"node":{"fields":{"slug":"/docs/detecting-polypane/"},"frontmatter":{"title":"Detecting Polypane"}}},{"node":{"fields":{"slug":"/docs/developer-tools/"},"frontmatter":{"title":"Developer tools"}}},{"node":{"fields":{"slug":"/docs/device-presets/"},"frontmatter":{"title":"Device presets"}}},{"node":{"fields":{"slug":"/docs/devtools-panel/"},"frontmatter":{"title":"Devtools Panel"}}},{"node":{"fields":{"slug":"/docs/elements-panel/"},"frontmatter":{"title":"Elements Panel"}}},{"node":{"fields":{"slug":"/docs/emulation/"},"frontmatter":{"title":"Emulation"}}},{"node":{"fields":{"slug":"/docs/experimental-chromium-features/"},"frontmatter":{"title":"Experimental Chromium features"}}},{"node":{"fields":{"slug":"/docs/find-elements/"},"frontmatter":{"title":"Find elements"}}},{"node":{"fields":{"slug":"/docs/form-autofill/"},"frontmatter":{"title":"Form autofill"}}},{"node":{"fields":{"slug":"/docs/global-zoom/"},"frontmatter":{"title":"Global zoom"}}},{"node":{"fields":{"slug":"/docs/helper-extension-for-other-browsers/"},"frontmatter":{"title":"Helper extension for other browsers"}}},{"node":{"fields":{"slug":"/docs/horizontal-overflow/"},"frontmatter":{"title":"Horizontal overflow detection"}}},{"node":{"fields":{"slug":"/docs/integrations/"},"frontmatter":{"title":"Integrations"}}},{"node":{"fields":{"slug":"/docs/intro-to-panel/"},"frontmatter":{"title":"Intro to panel"}}},{"node":{"fields":{"slug":"/docs/intro-to-panes/"},"frontmatter":{"title":"Intro to panes"}}},{"node":{"fields":{"slug":"/docs/json-and-xml-viewer/"},"frontmatter":{"title":"JSON and XML viewer"}}},{"node":{"fields":{"slug":"/docs/known-issues/"},"frontmatter":{"title":"Known issues"}}},{"node":{"fields":{"slug":"/docs/layout-debugging/"},"frontmatter":{"title":"Layout debugging"}}},{"node":{"fields":{"slug":"/docs/layouts/"},"frontmatter":{"title":"Layouts"}}},{"node":{"fields":{"slug":"/docs/link/"},"frontmatter":{"title":"Share panel"}}},{"node":{"fields":{"slug":"/docs/list-of-shortcuts/"},"frontmatter":{"title":"List of shortcuts"}}},{"node":{"fields":{"slug":"/docs/live-auto-reloading/"},"frontmatter":{"title":"Live/auto reloading"}}},{"node":{"fields":{"slug":"/docs/making-screenshots/"},"frontmatter":{"title":"Making screenshots"}}},{"node":{"fields":{"slug":"/docs/measure-text-length/"},"frontmatter":{"title":"Measure text length"}}},{"node":{"fields":{"slug":"/docs/mental-model/"},"frontmatter":{"title":"Mental model of Polypane's browser contexts"}}},{"node":{"fields":{"slug":"/docs/message-bus/"},"frontmatter":{"title":"Message Bus"}}},{"node":{"fields":{"slug":"/docs/meta-information/"},"frontmatter":{"title":"Meta information"}}},{"node":{"fields":{"slug":"/docs/network-panel/"},"frontmatter":{"title":"Network panel"}}},{"node":{"fields":{"slug":"/docs/other-tools/"},"frontmatter":{"title":"Polypane and local servers"}}},{"node":{"fields":{"slug":"/docs/outline-panel/"},"frontmatter":{"title":"Outline Panel"}}},{"node":{"fields":{"slug":"/docs/pane-management/"},"frontmatter":{"title":"Manage panes"}}},{"node":{"fields":{"slug":"/docs/pane-sizes/"},"frontmatter":{"title":"Pane sizes"}}},{"node":{"fields":{"slug":"/docs/performance/"},"frontmatter":{"title":"Performance"}}},{"node":{"fields":{"slug":"/docs/pitching-polypane/"},"frontmatter":{"title":"Pitching Polypane"}}},{"node":{"fields":{"slug":"/docs/polypane-peek/"},"frontmatter":{"title":"Polypane Peek"}}},{"node":{"fields":{"slug":"/docs/portal/"},"frontmatter":{"title":"Polypane Portal"}}},{"node":{"fields":{"slug":"/docs/projects/"},"frontmatter":{"title":"Projects"}}},{"node":{"fields":{"slug":"/docs/recording/"},"frontmatter":{"title":"Recording"}}},{"node":{"fields":{"slug":"/docs/reference-image/"},"frontmatter":{"title":"Reference image"}}},{"node":{"fields":{"slug":"/docs/reload-css/"},"frontmatter":{"title":"Reload CSS"}}},{"node":{"fields":{"slug":"/docs/responsive-debugging-workflow/"},"frontmatter":{"title":"Responsive debugging workflow"}}},{"node":{"fields":{"slug":"/docs/review-and-approval-by-it-and-security/"},"frontmatter":{"title":"Review and approval by IT and Security"}}},{"node":{"fields":{"slug":"/docs/rulers-grids-and-guides/"},"frontmatter":{"title":"Rulers, grids and guides"}}},{"node":{"fields":{"slug":"/docs/sales-and-procurement/"},"frontmatter":{"title":"Sales and Procurement"}}},{"node":{"fields":{"slug":"/docs/security-policy/"},"frontmatter":{"title":"Security Policy"}}},{"node":{"fields":{"slug":"/docs/security/"},"frontmatter":{"title":"Security"}}},{"node":{"fields":{"slug":"/docs/session-management/"},"frontmatter":{"title":"Session management"}}},{"node":{"fields":{"slug":"/docs/setup/"},"frontmatter":{"title":"Setup"}}},{"node":{"fields":{"slug":"/docs/showing-multiple-urls/"},"frontmatter":{"title":"Showing multiple URLs"}}},{"node":{"fields":{"slug":"/docs/simulators/"},"frontmatter":{"title":"Simulators"}}},{"node":{"fields":{"slug":"/docs/snippets/"},"frontmatter":{"title":"Snippets"}}},{"node":{"fields":{"slug":"/docs/social-card-and-open-graph-workflow/"},"frontmatter":{"title":"Social card and Open Graph workflow"}}},{"node":{"fields":{"slug":"/docs/source-panel/"},"frontmatter":{"title":"Source panel"}}},{"node":{"fields":{"slug":"/docs/storage-panel/"},"frontmatter":{"title":"Storage panel"}}},{"node":{"fields":{"slug":"/docs/switching-to-polypane/"},"frontmatter":{"title":"Switching to Polypane"}}},{"node":{"fields":{"slug":"/docs/synced-interactions/"},"frontmatter":{"title":"Synced interactions"}}},{"node":{"fields":{"slug":"/docs/tab-customization/"},"frontmatter":{"title":"Tab customization"}}},{"node":{"fields":{"slug":"/docs/team-workflows/"},"frontmatter":{"title":"Team workflows"}}},{"node":{"fields":{"slug":"/docs/ui-overview/"},"frontmatter":{"title":"Polypane UI overview"}}},{"node":{"fields":{"slug":"/docs/web-vitals/"},"frontmatter":{"title":"Web Vitals"}}},{"node":{"fields":{"slug":"/docs/website-issues-you-could-encounter/"},"frontmatter":{"title":"Website issues you could encounter"}}},{"node":{"fields":{"slug":"/docs/workspace-management/"},"frontmatter":{"title":"Workspace management"}}},{"node":{"fields":{"slug":"/docs/workspaces/"},"frontmatter":{"title":"Workspaces"}}}]}},"pageContext":{"slug":"/docs/accessibility-overview/"}},"staticQueryHashes":["4164364741","425175329"]}