Synonyme: Section heading, main heading, heading

Siehe auch: font , text , label , titel , group

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

An 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). | Must | EN 301 549:
9.1.4.5, 11.1.4.5.1 | | @!206 | Structure | Sections of text should be subdivided with headings. | Should | WCAG 2.1: 2.4.10 (AAA) | | @!207 | Hierarchy | The 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.

Focus indicator). | Must | EN 301 549:
9.2.4.7, 11.2.4.7 |

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.

Accessibility API). | Must | EN 301 549:
9.1.3.1, 11.1.3.1, 11.5.2.5 | | @!211 | Hierarchy | The 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).

Focus indicator). | Must | EN 301 549:
11.5.2.5, 11.5.2.13 |

• JAWS: Heading level [number] [label]
• NVDA: Heading level [number] [label]
• Windows Narrator: Heading level [number] [label]

Headings are marked with the HTML elements

,

,

,

,

and

. 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

ARIA

Permalink "ARIA"#

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

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

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