Synonyme: Section heading, main heading, heading

See also: font, text, label, titel, group

Headings are used to outline sections of text. They describe the content of each section of text.

No.PropertyDescriptionClassificationReference
202ContrastHeadings must have a contrast ratio of at least 4.5:1 and/or 3:1.

Note: From a font size of 24 px (and/or 18.5 px in the case of bold font), a contrast ratio of at least 3:1 is sufficient.

MustEN 301 549:
9.1.4.3, 11.1.4.3
204LabelThe heading must be expressive.

Note: To achieve this, the heading should describe the following section concisely and unambiguously.

MustEN 301 549:
9.2.4.6, 11.2.4.6
205LabelAn image of text may not be used for the heading, unless its text content can be adapted to the user preferences (font style, font size, font color, background color).MustEN 301 549:
9.1.4.5, 11.1.4.5.1
206StructureSections of text should be subdivided with headings.ShouldWCAG 2.1: 2.4.10 (AAA)
207HierarchyThe hierarchy of headings must correspond to the logical structure of the page.

Note: As a rule, the page should have a main heading with the highest hierarchy. Section headings should be organized in the correct hierarchical way without skipping a hierarchy level.

MustEN 301 549: 9.1.3.1, 11.1.3.1.1
208Focus visibilityIf the heading receives the focus, the focus indicator must be visible (see Focus indicator).MustEN 301 549:
9.2.4.7, 11.2.4.7
No.PropertyDescriptionClassificationReference
209Use of the keyboardIn applications that do not support the virtual cursor, it must be possible to access and exit the heading with the keyboard (see Use of the keyboard table).

Note: If the application contains several headings that receive the keyboard focus, there should be an operating mode in which only the interactive elements receive the focus to avoid unnecessary navigation steps for sighted keyboard users.

MustEN 301 549:
9.1.1.1, 11.1.1.1

Use of the keyboard: heading (in an application without a virtual cursor)

Permalink "Use of the keyboard: heading (in an application without a virtual cursor)"
AktionTasteKlassifizierung
Focusing the headingTABrequired
Exiting the headingTABrequired
No.PropertyDescriptionClassificationReference
210RoleThe “heading” role and its hierarchy level must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549:
9.1.3.1, 11.1.3.1, 11.5.2.5
211HierarchyThe hierarchy of headings must correspond to the logical structure of the page.

Note: In this context, the maximum number of hierarchy levels should be considered (desktop applications: typically 9, Web applications: 6).

MustEN 301 549:
9.1.3.1, 11.1.3.1
212Desktop: PositionThe size and position of the heading must be communicated to the Accessibility API (see Focus indicator).MustEN 301 549:
11.5.2.5, 11.5.2.13

Practical tip: headings in Web applications

Permalink "Practical tip: headings in Web applications"
  • JAWS: Heading level [number] [label]
  • NVDA: Heading level [number] [label]
  • Windows Narrator: Heading level [number] [label]

Headings are marked with the HTML elements <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. In this respect, the following should be taken into account:

  • Headings should be concise, clear and expressive, as for users of screen readers, they are the primary method of navigating and perceiving the page structure.
  • The headings should be nested correctly from a hierarchical perspective, i.e. an <h1> should be followed by <h2>-headings whose sections can in turn contain <h3> headings. According to the HTML specification, no heading levels may be skipped, for example, <h2> should not be followed by <h4>, <h5> oder <h6>.
  • The main heading (<h1>) should describe the purpose of the respective page (and not just include the application name, for example).

Headings can be grouped within the <hgroup> elements along with paragraphs (<p>-Element) to specify a caption or an alternative heading, for example. This grouping is not perceptible with any of the screen readers for Windows, i.e. the content of the <p> element is output as normal text, as according to the “HTML Accessibility API Mappings”, the <hgroup> element does not have any semantics.

Further information: 4.3.6 The h1, h2, h3, h4, h5, and h6 elements - HTML Standard (whatwg.org) , 4.3.11 Headings and outlines - HTML Standard (whatwg.org) (External Link), Headings | Web Accessibility Initiative (WAI) | W3C

If the heading is not implemented with the HTML elements, it is also necessary to take account of the following:

  • The role is communicated with role=heading.
  • The heading level is communicated with aria-level Only the numbers from 1 to 6 should be used. With numbers greater than 6, JAWS outputs the heading with the level 2.
    • With numbers greater than 6, JAWS outputs the heading with the level 2.
    • With numbers greater than 9, NVDA and Windows Narrator output the heading with the level 2.
  • The labeling should take place using text content.

Further information: heading role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link)

Information about this article

You are welcome to send feedback by email about our handout!