Skip to contentSkip to footer

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 relevant information like the accessible name, which is the text being used by assistive technologies, and the text content if it's different. This also includes styling and alt attributes for images.

Hover over any of the elements to scroll them into view on all panes and show a tooltip with their element info. Clicking on the element will open it 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. Note that the HTML5 outline algorithm is not implemented anywhere, so we advice using the headings and landmarks overviews to base decisions on instead.

Headings

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

  • The page has more than one H1
  • The page has no H1
  • Heading levels are skipped
  • Headings with duplicate content, missing content or hidden content

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

To get a visual overview inside the panes, click "Show overlay". This will draw boxes around all headers and display any issues, which will also be visible in the screenshots you make.

Landmarks

Will resolve all HTML 5 and ARIA landmark elements on the page and display them with the appropriate role. Polypane will warn you if there are issues with your landmarks, such as duplicate landmarks, missing landmarks, unnecessary labels or incorrect nesting.

To get a visual overview inside the panes, click "Show overlay". This will draw boxes around all landmarks and display any issues, which will also be visible in the screenshots you make.

Shows a list of links (both a elements with an href attribute, and elements with role=link set). If an element has a target or title that will be displayed, and the overview will warn you if there is a target="_blank" but no rel="opener", or duplicate content in the title.

Additionally, a badge will be shown for any non-https links, for empty href attributes and for links that have a placeholder value like mailto:. When a link has non-descriptive text, like "click here" or "more", we show a warning. External links are given an icon indicating they leave the website.

To get a visual overview inside the panes, click "Show overlay". This will draw boxes around all links and display any issues, which will also be visible in the screenshots you make.

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. While it does this you will see loading indicators, and when it's done it will show a checkmark for all 200 status codes, or a warning or error for any other status codes.

Not all sites support testing URLs and will send error codes back indicating this. The appropriate error code for this is 405 Method Not Allowed. In that situation Polypane will show a question mark.

There are sites that send back alternative error codes like 400, 999 and 503. In that case we show that error code and the urls will have to be checked manually.

Additional warnings

Polypane also warns you about inaccessible links, incorrect use of anchor (#) links and for missing accessible text.

Images

All the images that are currently visible on the site, with a preview, their current source, alt attribute, title, dimensions, aspect ratio and actual dimensions when the image isn't displayed at full size.

Broken images are highlighted with a warning.

If the alt attribute is missing a warning is shown. An alt attribute that is present but empty is seen as intentional so will not show an issue.

For alt attributes that contain redundant or nondescriptive text, like "A photo of", a color like "a green button", the text "alt" or "placeholder" or repeats the file name we show a warning.

You can right-click a preview to save the image to disk or copy the image location.

To get a visual overview inside the panes, click "Show overlay". This will draw boxes around all images and display any issues, which will also be visible in the screenshots you make.

Focus order (Tab order)

Will show you all focusable elements in the other that they are focused when pressing the tab button, along with any tabindex and autofocus attributes. To get a visual overview, click "Show overlay". This will draw a focus trial along all the focusable elements.

When it finds elements that are not focusable/interactive by default but have been made focusable, Polypane will suggest changing them to a real button or link instead. It also gives a warning when you use positive numbers for tabindex, which are best avoided. It highlights focus stops that go against the reading direction.

Focus overview overlay
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