Deutsch
Website-Menü

p-as-heading

Text, der wie eine Überschrift gestaltet ist, sollte wahrscheinlich eine echte Überschrift sein

manualWCAG 1.3.1 (A)Konfidenz: lowSchweregrad: minorperceivable

Meldet kurze <p>- und <div>-Elemente, deren gesamter Text fett und mit >=18px dargestellt ist, zur manuellen Prüfung, ob stattdessen ein echtes Überschriftenelement verwendet werden sollte.

Anwendbarkeit. <p>-Elemente sowie <div>-Elemente, die nur Text und Inline-Markup enthalten, deren sichtbarer Text kurz (<=120 Zeichen) und nicht leer ist und in denen jedes sichtbare Textstück fett ist (berechnete font-weight >= 700, gleich woher: am Element selbst, durch ein <strong>/<b> oder ein gestaltetes <span>) und mit >=18px dargestellt wird. Sichtbarer Text ist der Text, der gerendert wird (nicht display:none, [hidden] oder visibility:hidden) und nicht nur für Screenreader bestimmt ist. Text, der vollständig in Bedienelementen liegt (der eigene Text eines Widgets oder eines <label>), bleibt außen vor.

Erwartung. Text, der optisch wie eine Überschrift wirkt (fett, größer als der Fließtext, kurz), sollte mit einem echten Überschriftenelement (<h1>-<h6> oder role="heading") ausgezeichnet werden, damit seine strukturelle Rolle programmatisch ermittelbar ist. Es ist dasselbe Anliegen von 1.3.1 wie bei jedem anderen Problem vom Typ „Struktur nur durch Darstellung vermittelt“.

Was ein Befund meldet.

  • reasonCode: HEADING_LIKE_NUMBER, wenn der Text nur eine Zahl ist (Ziffern mit Leerraum und Satzzeichen: „2024“, „No 12“ ist keine), HEADING_LIKE_LINK, wenn er vollständig in einem Link liegt, sodass ein Bericht beide Arten als Gruppe beiseitelegen kann; sonst BOLD_LARGE_PARAGRAPH bei einem <p> und BOLD_LARGE_DIV bei einem <div>. Zu allen wird nachgefragt.
  • fontSizePx: die Schriftgröße des Texts, wie sie gezeichnet wird, in CSS-Pixeln (die berechnete Größe mal CSS-zoom, eine SVG-Transformation oder der Faktor, um den font-size-adjust die Schrift skaliert), die kleinste, wenn die Teile voneinander abweichen, verglichen mit dem Schwellenwert von 18px.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Beispiele

can't tell
<style>.fakeHeading { font-weight: bold; font-size: 22px; }</style>
<p class="fakeHeading">Section Title</p>

Fett, in Überschriftengröße und kurz — optisch eine Überschrift, aber als einfaches <p> ohne Überschriftensemantik ausgezeichnet.

n/a
<p>Just a normal paragraph of body text that is not bold at all.</p>

Normale Schriftstärke und -größe; optisch deutet nichts auf eine Überschrift hin.

can't tell
<div style="font-size: 24px"><span style="font-weight: bold">Our team</span></div>

Ein <div>, das nur Text enthält, wird wie ein <p> geprüft, und das Fett kann von einem gestalteten <span> darin stammen. Ein <div> mit anderen Blöcken sowie Text in einem Button, Label oder Tabellenkopf wird nicht nachgefragt.

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

BOLD_LARGE_DIV

  1. Suchen Sie den im Bericht genannten fetten, großen Textblock und betrachten Sie ihn auf der Seite.
  2. Entscheiden Sie, ob er den nachfolgenden Inhalt einleitet, wie es ein Abschnittstitel tut, oder nur eine Hervorhebung, ein Hinweiskasten oder ein Wert ist.
  3. Wirkt er als Titel, prüfen Sie im Bereich „Barrierefreiheit“ der Entwicklertools oder mit der Überschriftenliste eines Screenreaders, ob er als Überschrift bereitgestellt wird.

Bestanden. Der Text ist kein Abschnittstitel (Hervorhebung, Zitat, Preis oder Statistik), oder er ist als Überschrift ausgezeichnet (h1 bis h6 oder role="heading").

Nicht bestanden. Der Text betitelt visuell einen Abschnitt, ist aber keine Überschrift, sodass seine Struktur nur durch die Gestaltung gezeigt wird; das verstößt gegen WCAG 1.3.1 (F2).

BOLD_LARGE_PARAGRAPH

  1. Suchen Sie den im Bericht genannten fetten, großen Absatz und betrachten Sie ihn auf der Seite.
  2. Entscheiden Sie, ob er den nachfolgenden Inhalt einleitet, wie es ein Abschnittstitel tut, oder nur eine Hervorhebung, ein Hinweiskasten oder ein Wert ist.
  3. Wirkt er als Titel, prüfen Sie im Bereich „Barrierefreiheit“ der Entwicklertools oder mit der Überschriftenliste eines Screenreaders, ob er als Überschrift bereitgestellt wird.

Bestanden. Der Text ist kein Abschnittstitel (Hervorhebung, Zitat, Preis oder Statistik), oder er ist als Überschrift ausgezeichnet (h1 bis h6 oder role="heading").

Nicht bestanden. Der Text betitelt visuell einen Abschnitt, ist aber keine Überschrift, sodass seine Struktur nur durch die Gestaltung gezeigt wird; das verstößt gegen WCAG 1.3.1 (F2).

  1. Suchen Sie den im Bericht genannten fetten, großen verlinkten Text und betrachten Sie ihn auf der Seite.
  2. Entscheiden Sie, ob er den nachfolgenden Inhalt einleitet, wie es ein Abschnittstitel tut, oder nur eine Hervorhebung, ein Hinweiskasten oder ein Wert ist.
  3. Wirkt er als Titel, prüfen Sie im Bereich „Barrierefreiheit“ der Entwicklertools oder mit der Überschriftenliste eines Screenreaders, ob er als Überschrift bereitgestellt wird.

Bestanden. Der Text ist kein Abschnittstitel (Hervorhebung, Zitat, Preis oder Statistik), oder er ist als Überschrift ausgezeichnet (h1 bis h6 oder role="heading").

Nicht bestanden. Der Text betitelt visuell einen Abschnitt, ist aber keine Überschrift, sodass seine Struktur nur durch die Gestaltung gezeigt wird; das verstößt gegen WCAG 1.3.1 (F2).

HEADING_LIKE_NUMBER

  1. Suchen Sie die im Bericht genannte fette, große Zahl (etwa eine Jahreszahl) und betrachten Sie sie auf der Seite.
  2. Entscheiden Sie, ob er den nachfolgenden Inhalt einleitet, wie es ein Abschnittstitel tut, oder nur eine Hervorhebung, ein Hinweiskasten oder ein Wert ist.
  3. Wirkt er als Titel, prüfen Sie im Bereich „Barrierefreiheit“ der Entwicklertools oder mit der Überschriftenliste eines Screenreaders, ob er als Überschrift bereitgestellt wird.

Bestanden. Der Text ist kein Abschnittstitel (Hervorhebung, Zitat, Preis oder Statistik), oder er ist als Überschrift ausgezeichnet (h1 bis h6 oder role="heading").

Nicht bestanden. Der Text betitelt visuell einen Abschnitt, ist aber keine Überschrift, sodass seine Struktur nur durch die Gestaltung gezeigt wird; das verstößt gegen WCAG 1.3.1 (F2).

Quellcode ansehen