Die Basis - HTML richtig nutzen

So einfach wie möglich

Wir lernen HTML, CSS, JavaScript in dieser Reihenfolge - das ist auch die Reihenfolge, in der wir es anwenden sollten: Wenn ein Effekt mit HTML, CSS oder JavaScript erzielt werden kann, verwendet immer die einfachste Technologie.

Folgende Folie aus einem Vortrag von Martin Splitt zeigt verschiedene Arten, einen Link zu bauen. Die einfachste Art ist die Beste!

Hinweis

Das ist der wichtigste Grundsatz des ganzen Kapitels: Die meisten Accessibility-Probleme entstehen, weil natives HTML nachgebaut statt verwendet wird - ein <div> mit Klick-Handler statt <button>, ein <span> statt <a href>. Browser und Screenreader bringen für die echten Tags jahrzehntelang ausgereifte Unterstützung mit, die man mit JavaScript nie vollständig nachbaut.

Sprache mit lang

Das lang-Attribut hilft bei der Interpretation der natürlichen Sprache. Das wird vom Browser selbst verwendet, um Anführungszeichen (bei <q>) und Datumsangaben darzustellen. Ebenso von Vorleseprogrammen, Suchmaschinen, Übersetzungsprogrammen, …

Den Standardwert setzt man im html-Tag. In jedem Tag kann man lokal die Sprache ändern:

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Lieblingsbücher</title>
</head>
<body>
    <h1>Meine Lieblingsbücher</h1>

    <p lang="en">Neal Stephenson: <q>Diamond Age</q></p>

</body>
</html>

Achtung

Ohne lang="en" würde ein Screenreader den englischen Buchtitel mit deutscher Aussprache vorlesen - schwer verständlich. Siehe auch w3c: Why use the lang attribute?

Semantisches HTML

Die HTML-Tags, die wir kennengelernt haben, geben dem Dokument nicht nur eine Struktur, sondern verleihen auch eine Bedeutung. Diese Bedeutung sollten wir immer nutzen:

• für einen Link? Verwendet <a href="https://...">, nicht <span> oder <div>
• für eine Liste? Verwendet <li>, nicht <span> oder <div>
• für eine Überschrift? Verwendet <h1>, nicht <strong> oder <div>
• für einen Absende-Button? Verwendet <button>/<input type="submit">, nicht <span> oder <div>

Warum das so wichtig ist

Ein <button> ist automatisch per Tastatur fokussierbar (Tab), per Enter/Space auslösbar, und wird von Screenreadern als “Button” angekündigt. Ein <div onclick="..."> hat nichts davon - das müsste man alles händisch mit JavaScript und ARIA-Attributen nachbauen, und macht dabei fast immer etwas falsch oder unvollständig.

Überschriften und Landmarks

Einen Überblick über die Inhalte der Seite zu erhalten, ist schwierig, wenn man nicht sehen kann. Screenreader verwenden Überschriften und sogenannte Landmarks, um diesen Überblick zu schaffen - vergleichbar damit, wie sehende NutzerInnen eine Seite kurz überfliegen.

Die Überschrift h1 sollte nur einmal pro Seite verwendet werden und die gesamte Seite beschreiben. Die weiteren Überschriften h2, h3, … werden für die weiteren Gliederungsebenen verwendet - ohne Ebenen zu überspringen (nach h2 kommt h3, nicht direkt h4).

Für Bereiche der Seite, die eine wichtige Rolle spielen (Navigation, Suche, Header, Main, Section, …), sollte man die entsprechenden semantischen HTML-Tags verwenden. Falls das nicht möglich ist, kann man die Rolle explizit mit dem role-Attribut definieren:

HTML-Tag	Role-Attribut	Bedeutung
main	main	Primärer Inhalt der Seite
section	region	Bedeutsamer, benannter Bereich, den man direkt anspringen will
nav	navigation	Links zur Seiten- oder Website-Navigation
keine HTML-Entsprechung	search	Suchfunktion für Inhalte der Website
header	banner	Logo/Identität der Site, meist oben
footer	contentinfo	Copyright, Links zu Datenschutz/Barrierefreiheit
aside	complementary	Ergänzend zum Hauptinhalt, bleibt auch isoliert sinnvoll
form	form	Ein Formular, wenn kein anderes Landmark passt

<form role="search">
  <input type="search" aria-label="Suchtext" size="20">
  <input type="submit" value="Suchen">
</form>

Siehe auch w3c: ARIA Landmarks Example

Skip Link: direkt zum Inhalt springen

Bei einer typischen Seite steht vor dem eigentlichen Inhalt oft eine lange Navigation mit vielen Links. TastaturnutzerInnen müssten sich bei jeder einzelnen Seite erst durch die komplette Navigation tabben, bevor sie beim Inhalt ankommen.

Die Lösung ist ein Skip Link (“Zum Inhalt springen”): ein ganz normaler Link, der als allererstes fokussierbares Element im <body> steht und per Sprungmarke direkt zum <main> springt:

<body>
  <a href="#main-content" class="skip-link">Zum Inhalt springen</a>

  <header>...</header>
  <nav>... viele Links ...</nav>

  <main id="main-content">
    <h1>Eigentlicher Inhalt</h1>
  </main>
</body>

Damit der Link sehende NutzerInnen nicht stört, aber trotzdem für alle da ist, wird er visuell versteckt und erscheint nur, wenn er per Tab den Fokus bekommt:

.skip-link {
  position: absolute;
  top: -40px;   /* außerhalb des sichtbaren Bereichs */
  left: 0;
}

.skip-link:focus {
  top: 0;       /* bei Fokus wieder sichtbar */
}

Tipp

Das ist kein theoretisches Konzept - diese Kursseite selbst hat genau so einen Skip Link eingebaut. Probiert es aus: Klickt irgendwo auf die Seite und drückt dann Tab - der Skip Link erscheint als allererstes Element.

ARIA-Basics

WAI-ARIA (Accessible Rich Internet Applications) ist ein Set von HTML-Attributen, mit denen man Screenreadern zusätzliche Informationen über ein Element mitgeben kann - vor allem für interaktive Elemente, die es in reinem HTML nicht gibt.

“Die erste Regel von ARIA”: so wenig wie möglich

Bevor ihr ARIA verwendet: Gibt es ein natives HTML-Element, das dasselbe schon von Haus aus kann? Dann verwendet das. <button> braucht kein role="button", <nav> kein role="navigation" (siehe Tabelle oben - das war nur zur Erklärung des Zusammenhangs, nicht als “immer beides hinschreiben”-Empfehlung). ARIA ist dafür da, Lücken zu füllen, nicht um natives HTML zu ersetzen. Falsch eingesetztes ARIA macht eine Seite oft schlimmer als gar kein ARIA.

Trotzdem gibt es ein paar ARIA-Attribute, die im Alltag immer wieder gebraucht werden:

Attribut	Wofür
aria-label="..."	Zugänglicher Name für ein Element ohne (ausreichenden) sichtbaren Text - z.B. ein reiner Icon-Button
aria-hidden="true"	Versteckt ein Element nur vor Screenreadern (bleibt visuell sichtbar) - z.B. für rein dekorative Icons
aria-expanded="true/false"	Zeigt an, ob ein aufklappbares Element (z.B. Dropdown-Menü) gerade offen ist
aria-live="polite"	Kündigt Änderungen des Inhalts automatisch an - z.B. eine Erfolgsmeldung, die per JavaScript eingefügt wird

<!-- Icon-Button ohne sichtbaren Text -->
<button aria-label="Menü schließen">
  <svg aria-hidden="true">...</svg>
</button>

Hinweis

aria-hidden="true" auf dem <svg> verhindert, dass ein Screenreader das Icon zusätzlich zum aria-label des Buttons vorliest oder unsinnige Beschreibungen wie “Grafik” ausgibt.