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.
Presentation
Permalink "Presentation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 202 | Contrast | Headings 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. | Must | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 204 | Label | The heading must be expressive. Note: To achieve this, the heading should describe the following section concisely and unambiguously. | Must | EN 301 549: 9.2.4.6, 11.2.4.6 |
| 205 | Label | 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. | Must | EN 301 549: 9.1.3.1, 11.1.3.1.1 |
| 208 | Focus visibility | If the heading receives the focus, the focus indicator must be visible (see Focus indicator). | Must | EN 301 549: 9.2.4.7, 11.2.4.7 |
Operation
Permalink "Operation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 209 | Use of the keyboard | In 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. | Must | EN 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)"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Focusing the heading | TAB | required |
| Exiting the heading | TAB | required |
Programming/interfaces
Permalink "Programming/interfaces"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 210 | Role | The “heading” role and its hierarchy level must be communicated to the Accessibility API (see 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). | Must | EN 301 549: 9.1.3.1, 11.1.3.1 |
| 212 | Desktop: Position | The size and position of the heading must be communicated to the Accessibility API (see Focus indicator). | Must | EN 301 549: 11.5.2.5, 11.5.2.13 |
Practical tip: headings in Web applications
Permalink "Practical tip: headings in Web applications"Screenreader output
Permalink "Screenreader output"- JAWS: Heading level [number] [label]
- NVDA: Heading level [number] [label]
- Windows Narrator: Heading level [number] [label]
HTML
Permalink "HTML"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
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-levelOnly 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!