korrektes (semantisches) verschachteln von dl - dt - dd Definitionslisten

[Gunnar Bittersmann]

@@JürgenB

<nav id="Inhalt">
	<h2>Inhalt</h2>
	<ul>
		<li><a href="#…">…</a></li>
		<li><a href="#…">…</a></li>
		…
	</ul>
</nav>

Ein Site-Navigation mit <nav id="sitenav">, die aber nur Links enthält und keine Überschrift, gibt es auch noch.

Brauche ich da jetzt noch accessible label?

(Screenreader-)Nutzer, die sich von landmark zu landmark bewegen, sollten erfahren, in welchem Bereich sie sich gerade befinden. Jeder dieser Bereiche (z.B. main, header, nav) sollte ein accessible label haben.

IIRC ist eine Überschrift am Anfang des Bereichs hinreichend; aber ich mag da auch irren. Möglicherweise müsste die auch verknüpft werden:

<nav id="page-nav" aria-labelledby="page-nav-label">
  <h2 id="page-nav-label">Auf dieser Seite</h2>
  ⋮
</nav>

„Inhalt“ ist kein glücklich gewähltes accessible label. Handelt es sich um den Inhalt auf der Website (die Hauptnavigation)? Oder um den Inhalt auf der aktuellen Seite?

Wenn da wirklich „Inhalt“ stehen soll, könnte man das so machen:

<nav id="page-nav" aria-label="Auf dieser Seite">
  <h2 id="page-nav-label">Inhalt</h2>
  ⋮
</nav>

Aber besser ist wohl, auch für Sehende eine eindeutige Bezeichnung zu wählen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!