It’s time for another spotlight, this time on headings! This is not too complex, so let’s start!

What the criteria say

According to WCAG 2.4.2 Page Titled (Level A) each page of the learning content should have a descriptive title so users can understand what the page is about. A descriptive title listed in the menu also helps users to navigate to specific content when looking for it.  It also benefits users who use assistive technology like screen readers which announce the title to the user before reading the rest of the content on the page. 

WCAG 2.4.6 Headings and Labels (AA) simply states that “headings and labels describe topic or purpose”. It means that the page/slide and section headings should give a clear indication of the topic or the purpose of the content to allow users to “skim" the headings and quickly locate the specific content they need. For example, the headings “Part 1”, “Part 2” etc, are not descriptive enough; instead, an article or training about accessibility might have these headings: “Intro to accessibility”, “What is WCAG?” etc.  

While the Headings and Labels (WCAG 2.4.6, AA) criterion only applies if headings and section headings are used, the advanced guideline WCAG 2.4.10 Section headings (AAA), actually encourages the use of heading and section headings. This is to indicate the organization of the content and facilitate the navigation and comprehension of the content.

Finally, we must mention WCAG 1.3.1 Info and Relationships (A) as well. This criterion is not specifically about headings, but about “programmatically determined” elements, such as tables, lists, links, input fields etc. Simply put, it is about making sure that assistive technologies can recognize the nature of the element by using the right code and not just visual cues. For example, a heading may appear to be a heading to the eye if it’s bolded or larger in size, but unless it’s marked up properly as a header, screen readers will not be able to communicate that to the user. 

Marking up a heading simply means choosing one of the heading formatting options authoring tools offer usually in a dropdown format. There are 6 heading levels altogether and while the number of the headings and levels of headings you need is determined by the complexity of the content, it’s best to keep them limited to important signposts and keep them logical. For example, it’s best practice to have only one Level 1 heading (<h1>) per page and then a few big sections (<h2>).  In addition, <h3> shouldn’t come straight after <h1> and should not precede <h2>.  Equally, heading formatting should not be used for content that is not meant to be a heading, regardless of how appealing the visual style of that heading format might be.

Resources:

• Read more about the different  heading levels: Heading structure and accessibility (bighack.org)

• Read the full criteria for WCAG 2.4.6 with examples: 2.4.6 Headings and labels (w3.org)

• Follow this link from W3C for more details on how to comply WCAG 2.4.6: Providing descriptive headings (w3.org)

• Read the full criteria for WCAG 2.4.10: 2.4.10 Section headings (w3.org)

• Read the full criteria for WCAG 1.3.1: 1.3.1 Info and relationships (w3.org)

• Read  W3C’s definition of programmatically determined: Definition of programmatically determined (w3.org)

Discussion questions:

Get Involved: Come to the LCA Spotlight LinkedIn group and join the conversation.

• What challenges do you anticipate with these guidelines?

• How do you decide whether a heading or section heading is descriptive enough?

• Where do you see the main benefits of these guidelines?

When you post in the community, use the hashtag #LCASpotlightHeadings