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



javascript: (function() { function callback() { function l() { $(“strong”).remove(“.openSpan, .closeSpan”); $(“h1”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;;speak:literal-punctuation;\”><h1></strong>”); $(“h1”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></h1></strong>”); $(“h2”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><h2></strong>”); $(“h2”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></h2></strong>”); $(“h3”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><h3></strong>”); $(“h3”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></h3></strong>”); $(“h4”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><h4></strong>”); $(“h4”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></h4></strong>”); $(“h5”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><h5></strong>”); $(“h5”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></h5></strong>”); $(“h6”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><h6></strong>”); $(“h6”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></h6></strong>”); $(“[role=heading][aria-level=1]”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><[role=heading][aria-level=1]></strong>”); $(“[role=heading][aria-level=1]”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></[role=heading][aria-level=1]></strong>”); $(“[role=heading][aria-level=2]”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><[role=heading][aria-level=2]></strong>”); $(“[role=heading][aria-level=2]”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></[role=heading][aria-level=2]></strong>”); $(“[role=heading][aria-level=3]”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><[role=heading][aria-level=3]></strong>”); $(“[role=heading][aria-level=3]”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></[role=heading][aria-level=3]></strong>”); $(“[role=heading][aria-level=4]”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><[role=heading][aria-level=4]></strong>”); $(“[role=heading][aria-level=4]”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></[role=heading][aria-level=4]></strong>”); $(“[role=heading][aria-level=5]”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><[role=heading][aria-level=5]></strong>”); $(“[role=heading][aria-level=5]”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></[role=heading][aria-level=5]></strong>”); $(“[role=heading][aria-level=6]”).prepend(“<strong class=\”openSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”><[role=heading][aria-level=6]></strong>”); $(“[role=heading][aria-level=6]”).append(“<strong class=\”closeSpan\” style=\”color:black;font-family:sans-serif;font-weight:bold;font-size:small;background-color:yellow;speak:literal-punctuation;\”></[role=heading][aria-level=6]></strong>”); if (!$(‘h1’).length && !$(‘h2’).length && !$(‘h3’).length && !$(‘h4’).length && !$(‘h5’).length && !$(‘h6’).length && !$(‘[role=heading][aria-level=1]’).length && !$(‘[role=heading][aria-level=2]’).length && !$(‘[role=heading][aria-level=3]’).length && !$(‘[role=heading][aria-level=4]’).length && !$(‘[role=heading][aria-level=5]’).length && !$(‘[role=heading][aria-level=6]’).length) { $(‘body’).prepend(‘<strong style=”color:black;font-weight:bold;font-family:sans-serif;font-size:small;background-color:yellow;margin:0 2px; padding:2px;” id=”failure” role=”status”></strong>’); $(‘#failure’).html(‘No Headings Found on Page: ‘ + document.title); setTimeout(function(){ $(‘#failure’).remove(); }, 6000); } else { $(‘body’).append(‘<div id=”success” role=”alert” style=”position:absolute; width:0; height:0; clip: rect(0,0,0,0);”></div>’); $(‘#success’).html(‘Success! Headings Found on Page: ‘ + document.title); setTimeout(function(){ $(‘#success’).remove(); }, 3000); } $(“script[src$=’headings.js’]”).remove();s.remove(); } l() } var s = document.createElement(“script”); s.addEventListener ? s.addEventListener(“load”, callback, !1) : s.readyState && (s.onreadystatechange = callback), s.src = “https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”, document.body.appendChild(s); })()


Click here to Copy the Code

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

Reference: Accessibility Bookmarklets