Spotlight 19

Headings

(WCAG 1.3.1, 2.4.2, 2.4.6 & 2.4.10) 

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.

Image description in the transcript.
Headings (WCAG 2.4.2, 2.4.6 &2.4.10)

Headings Image Transcript

The heading says Headings. 

There are 3 columns. The first 2 shows variations of the same image of a page with headings and placeholder text. 

The first column is labelled as “Instead of this” and has some placeholder text with 2 headings reading Part 1 and Part 2. 

The second column is labelled “ Do this” and has the same image with placeholder text but more headings. There’s a big heading that reads Content Accessibility. Underneath smaller headings read What is accessibility, Accessibility of texts, Accessibility of images, Keyboard navigation.

The third column is labelled “Why” and it has text with explanations and arrows pointing to elements of the illustrations in the first two columns. 

The first row of text in column 3 says: “2.4.2 (Level A): Each page should have a reflective title”. The arrow points to the better image that has a title, while the image in the first column doesn’t. 

The second row of text in column 3 says: “2.4.6 (Level AA): Headings should describe the topic”. The arrow points to the part of the image where one heading simply reads Part 1, while the heading in the better image reads Accessibility of texts. 

The last row of text in column 3 says: “2.4.10 (Level AAA): Section headings should be used”. The arrow points to the part of the image where the heading is skipped, while the better image has a heading that reads Keyboard navigation. 

The image ends with the LCA Spotlight logo. 

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.

Google Docs with the heading dropdown open showing the heading and subheading options.
Marking up a heading in Google Docs
Visual demonstration of heading levels. H1 is followed by H2, H3, etc.
Heading levels

Resources:

Discussion questions:

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

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

Spotlight 18: Accessibility in Storyline

Spotlight 20: Media accessibility in Storyline