HTML -Barrierefreiheit
HTML-Barrierefreiheit
Schreiben Sie HTML-Code immer unter Berücksichtigung der Barrierefreiheit!
Bieten Sie dem Benutzer eine gute Möglichkeit, auf Ihrer Website zu navigieren und mit ihr zu interagieren. Gestalten Sie Ihren HTML-Code so semantisch wie möglich.
Semantisches HTML
Semantisches HTML bedeutet, so weit wie möglich die richtigen HTML-Elemente für ihren richtigen Zweck zu verwenden. Semantische Elemente sind Elemente mit einer Bedeutung; wenn Sie eine Schaltfläche benötigen, verwenden Sie das Element <button> (und kein Element <div>).
Semantisches HTML liefert Kontext für Screenreader, die den Inhalt einer Seite laut vorlesen.
Mit Blick auf das Schaltflächenbeispiel:
- Schaltflächen haben standardmäßig einen passenderen Stil
- ein Screenreader erkennt es als Schaltfläche
- fokussierbar
- anklickbar
Eine Schaltfläche ist auch für Personen zugänglich, die auf eine reine Tastaturnavigation angewiesen sind. Es kann sowohl mit der Maus als auch mit den Tasten angeklickt werden und es kann mit der Tabulatortaste zwischen ihnen gewechselt werden (mit der Tabulatortaste auf der Tastatur).
Beispiele für nicht-semantische Elemente: <div> und <span> – Sagt nichts über seinen Inhalt.
Beispiele für semantische Elemente: <form>, <table> und <article> - Definiert klar seinen Inhalt.
Überschriften sind wichtig
Überschriften werden mit den Tags <h1> bis <h6> definiert:
Beispiel
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Try it Yourself »
Suchmaschinen nutzen die Überschriften, um die Struktur und den Inhalt Ihrer Webseiten zu indizieren.
Benutzer überfliegen Ihre Seiten anhand der Überschriften. Es ist wichtig, Überschriften zu verwenden, um die Dokumentstruktur und die Beziehungen zwischen verschiedenen Abschnitten darzustellen.
Auch Screenreader nutzen Überschriften als Navigationshilfe. Die verschiedenen Überschriftentypen geben den Umriss der Seite vor. Als Hauptüberschriften sollten <h1>-Überschriften verwendet werden, gefolgt von <h2>-Überschriften und dann den weniger wichtigen <h3> und so weiter.
Hinweis: Verwenden Sie HTML-Überschriften nur für Überschriften. Verwenden Sie Überschriften nicht, um den Text GROSS oder fett zu machen.
Alternativer Text
Das Attribut alt stellt einen alternativen Text für ein Bild bereit, wenn der Benutzer es aus irgendeinem Grund nicht sehen kann (aufgrund einer langsamen Verbindung, eines Fehlers im src-Attribut oder wenn der Benutzer einen Bildschirmleser verwendet).
Der Wert des Attributs alt sollte das Bild beschreiben:
Beispiel
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Try it Yourself »
Wenn ein Browser ein Bild nicht finden kann, zeigt er den Wert des Attributs alt an:
Beispiel
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Try it Yourself »
Deklarieren Sie die Sprache
Sie sollten immer das Attribut lang in das Tag <html> einschließen, um die Sprache zu deklarieren der Webseite. Dies soll Suchmaschinen und Browsern helfen.
Im folgenden Beispiel wird Englisch als Sprache angegeben:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Verwenden Sie eine klare Sprache
Verwenden Sie immer eine klare Sprache, die leicht zu verstehen ist. Versuchen Sie außerdem, Zeichen zu vermeiden, die von einem Screenreader nicht klar gelesen werden können. Zum Beispiel:
- Halten Sie die Sätze so kurz wie möglich
- Vermeiden Sie Bindestriche. Anstatt 1-3 zu schreiben, schreiben Sie 1 bis 3
- Vermeiden Sie Abkürzungen. Anstatt Feb zu schreiben, schreiben Sie February
- Vermeiden Sie umgangssprachliche Wörter
Erstellen Sie guten Linktext
Ein Linktext sollte klar erklären, welche Informationen der Leser erhält, wenn er auf diesen Link klickt.
Beispiele für gute und schlechte Links:
Gut
Erfahren Sie mehr über die HTML-Sprache
Lesen Sie mehr darüber wie man sich gesund ernährt
Try it Yourself »
Hinweis: Diese Seite ist eine Einführung in die Barrierefreiheit im Internet. Weitere Informationen finden Sie in unserem Barrierefreiheits-Tutorial.
