Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

[Gunnar Bittersmann]

@@MB

Auweia Du hast gar keine Überschriften!

Ich weis 😭. Aber das ist Notwendig, wenn man live in Markdown editieren will.

Warum das denn?

Aber wenn du wirklich divs brauchst(?), dann mach sie mit ARIA zu Überschriften:^[1][2]

<div class="h-1"><span>Titel</span></h1>

↓

<div class="h-1" role="heading" aria-level="1"><span>Titel</span></h1>

Für die anderen Levels entsprechend aria-level="2", "3", "4".

Die Klassen h-1 usw. brauchst du dann wohl nicht mehr; du kannst ja auch Attributselektoren [aria-level="1"] zum Stylen verwenden.

Ohne role und aria-level hättest du eine Seite ohne Struktur (bzw. rein visuelle Struktur). Nutzer, die die visuelle Struktur nicht wahrnehmen können, sind auf die hierarchische document outline angewiesen. Screenreader-Nutzer verwenden Überschriften auch zur schnellen Navigation durch die Seite.

---

Bezüglich Numerierung hat dich Matthias ja schon ins Wiki geschickt. Im Abschnitt Verschachtelte Kapitelzählung findest du genau deinen Anwendungsfall. Nur dass du eine Hierarchie-Ebene mehr hast, also noch einen Zähler mehr brauchst. (subsubsection?)

🖖 Живіть довго і процвітайте

---

1. Using ARIA: Roles, states, and properties ↩︎

2. aria-level ↩︎