Headings Bookmarklet to Identify Heading Structure

Headings bookmarklet will identify all headings on the page presented with HTML H1-H6 tags and with ARIA role=heading. This will help accessibility testers understand the layout of the page and identify the text that is a heading but is not marked as such.

This will help you evaluate the WCAG Guideline 1.3.1 Info and Relationships.

Using Heading Bookmarklet to identify all Headings on a web page
Heading Bookmarklet

Headings Bookmarklet for Accessibility Testing

Headings Bookmarklet for Accessibility Testing inserts a black on yellow opening and closing tag into the DOM around each H1-H6 and WAI-ARIA role=heading aria-level=1-6

Headings Bookmarklet Code

See the Pen Heading Bookmarklet by HolisticA11Y by HolisticA11Y (@HolisticA11YHub) on CodePen.

We hope these accessibility bookmarklets come in handy during your next accessibility audit.

Reference: Accessibility Bookmarklets