Outline Panel

The "Outline" tab in the Info panel shows you the outline of your page, along with the elements used. USe the drop down to switch between different types of outlines. These outlines are often used by assistive technologies to allow users to go through your page quickly.

For each element we show the accessible name, which is the text being used by assistive technologies. This includes styling and alt attributes for images.

Hover over any of the heading elements to scroll them into view on all panes and show a tooltip with their element info. Clicking on one will open the element in the Polypane element panel.

Polypane is filled with accessibility features. We wrote a full overview on our blog: Find and fix accessibility issues with Polypane.

Document outline

The document outline tab uses the HTML5 outlining algorithm. It will highlight sectional elements that do not have a clear title.

Headers

Shows all the headers currently on the page. The overview will warn you when it finds the following issues:

  • The H1 is not the first header
  • The page has more than one H1
  • Heading levels are skipped

None of these are strict WCAG failures or spec violations but they are considered best practices.

Shows a list of links. If an element has a target that will be displayed, and the overview will warn you if there is a target="_blank" but no rel="opener".

If the links panel is opened or switched to, Polypane will automatically test all the URLS in the page and highlight broken urls or urls with redirects. Not all sites support testing URLs and will send error codes back indicating this. In that situation Polypane will show a question mark instead.

Landmarks

Will resolve all HTML 5 and ARIA landmark elements on the page and display them with the appropriate role.

Is your question not answered?
Ask via Twitter, Slack or our contact form

Build your next project with Polypane

  • Try all plans, all features
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Start free trialView pricing