ABOUT HEADINGS MAP TOOL

The HeadingsMap Chrome plugin is a helpful tool for accessibility testing, specifically for ensuring that a webpage’s heading structure is logical, organized, and follows best practices. Proper heading structure is essential for users with screen readers or those navigating with keyboards, as it helps them quickly understand the content hierarchy and navigate through a page efficiently. A webpage without headings is like reading a paragraph and some users might give up reading your webpage and this results in losing the users.

HEADINGS IMPORTANCE

Headings provide structure:

If you are a sighted user, you probably appreciate being able to look at a page & understand how the content is organized. Headings & subheadings help you understand what information is on a page and help you find what you want quickly.

Headings for users with disabilities:

Headings also defined the structure of page content for:

(i) Users who are blind

(ii) Users with low vision

(iii) Users with cognitive disabilities

<h1> = Heading 1, used for document & page titles

<h2> = Heading 2, used for sub-headings

<h3> = Heading 3, used for sub sub-headings

How are heading tags used by screen reader users ?

Users who are blind like to skip content just like sighted users. To do this, they often navigate through the headings on a page. Screen reader software announces headings & heading levels when reading text. In order for this to work, you must use headings correctly.

Correct use of headings:

• Use heading styles, not just text formatting
• In most cases, use only one h1 for each web page or document.
• Use headings in order, subheading should use h2s, sub subheadings should use h3s and so on to h6
• Headings should be used in the main content & to introduce navigation menus
• Ensure that headings are always in increasing order such as H1 –> H2 –> H3 and so forth

Incorrect headings:

• Do not skip heading levels. Sometimes people do this because they prefer the “look” of another heading level better. Doing this can cause confusion to the users
• Don’t use headings to highlight a section of text to make it stand out. Headings should describe the content after it
• Heading should not be in zig-zag or random order such as H1 –> H3 –> H4 –> H2, as this will be confusing to screen reader users and not the correct way of HTML5 UI development
• Also check if the webpage has 0 headers which is incorrect as a web-page is meant to have headings
• Don’t use ALL CAPS. This comes across as yelling and its harder to read
• Don’t underline headings as underlining is reserved for active links

An example of correct heading structure:

H1: Popular plants

    H2: Outdoor plants

        H3: Evergreens

          H4: Perennials

    H2: Indoor plants  

AVAILABLE TOOLS TO TEST HEADERS STRUCTURE:

1. WAVE tool
2. SiteImprove
3. Grackle (Google add-on) for Google docs
4. Headings Map

STEPS TO WORK WITH HEADINGS MAP TOOL:

1. Visit Chrome web store & search for Headings Map extension otherwise it is available at https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
2. Navigate to the webpage you want to test for heading accessibility
3. Click on the HeadingsMap icon in the Chrome toolbar to open the plugin
4. A panel or overlay will appear displaying the headings structure of the webpage
5. The HeadingsMap plugin will provide a visual representation of the headings (H1, H2, H3, etc.) used throughout the page, to evaluate whether the headings on the page are well-structured and logically ordered. Here’s what to look for:
6. Logical Order of Headings:
   • The H1 should be used for the main page title and should appear only once
   • H2 headings should represent major sections or subsections of the content
   • H3 and lower-level headings (H4, H5, etc.) should be used to break down content further under each H2
   • Example:
     • H1: “Main Page Title”
     • H2: “Section 1 Title”
     • H3: “Subsection 1.1”
     • H2: “Section 2 Title”
7. Avoid Skipping Heading Levels:
   • Ensure there is no skipping of heading levels (e.g., jumping directly from an H1 to an H3 without an H2 in between). This can confuse screen reader users and make navigation difficult.
   • The HeadingsMap plugin will help identify such issues visually
8. Check for Missing Headings:
   • Ensure that important sections of content are appropriately labeled with headings. Some sections might be skipped, making it harder for users to navigate
   • The HeadingsMap plugin will allow you to easily spot areas without headings
9. Consistency:
   • Ensure that the same types of content or sections are consistently marked with the same heading level throughout the site
   • For example, if “main sections” are marked with H2, all major sections should follow the same structure
10. Based on your findings from the HeadingsMap plugin, you may need to adjust the heading structure of the page to improve its accessibility:
    • Add missing headings: Add headings where necessary to break up content logically and improve navigation
    • Fix skipped heading levels: Ensure there are no missing levels in the hierarchy (e.g., if you have an H1, the next logical heading should be H2, not H3)
    • Correct improper heading levels: If headings are incorrectly nested or out of order (e.g., using H4 when an H2 should be used), adjust them to follow a logical sequence
11. After making changes, it’s a good idea to test the heading structure with a screen reader. Headings are critical for screen reader users, so ensure the headings are announced correctly and in the right order
12. You can also copy the results by clicking on ‘copy results’ icon and paste in a document to share it with development team
13. You can also click on the ‘reveal headers’ icon to show the heading levels on the web-page
14. Click on ‘settings’ icon to enable the required options during the heading structure test
15. You can use the HeadingsMap plugin on other pages of your website to ensure that all pages follow a logical and accessible heading structure. This will help you ensure consistency and accessibility across your site

KEY BENEFITS OF USING HEADINGS MAP FOR ACCESSIBILITY TESTING:

• Quick Visualization: The plugin provides a quick and easy way to visualize and understand the heading structure of your page
• Identify Issues: It helps you spot common accessibility issues related to headings, such as skipped levels, missing headings, or improper use of heading tags
• Improve Screen Reader Navigation: By ensuring proper heading structure, you improve the experience for users who rely on screen readers or keyboard navigation
• Best Practices: It encourages adherence to best practices in content organization and accessibility guidelines (such as WCAG)

EXAMPLE APPLICATIONS WITH HEADER STRUCTURE ISSUES:

https://demoqa.com/login

https://findanexpert.unimelb.edu.au/

dylanmhowell.com/seo-for-photographers/