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 viel wie möglich korrekte 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 <button>Element (und kein
<div>Element).
Semantik
<button>Report an Error</button>
Nicht semantisch
<div>Report an Error</div>
Semantisches HTML gibt Screenreadern Kontext, die den Inhalt einer Seite laut vorlesen.
Mit dem Schaltflächenbeispiel im Hinterkopf:
- Schaltflächen haben standardmäßig ein passenderes Design
- ein Screenreader erkennt es als Schaltfläche
- fokussierbar
- anklickbar
Eine Schaltfläche ist auch für Personen zugänglich, die sich auf die reine Tastaturnavigation verlassen; es kann sowohl mit der Maus als auch mit den Tasten angeklickt werden, und es kann mit der Tabulatortaste zwischen ihnen gewechselt werden (mithilfe der Tabulatortaste auf der Tastatur).
Beispiele für nicht-semantische Elemente: <div>und <span>- sagt nichts über seinen Inhalt aus.
Beispiele für semantische Elemente: <form>, <table>, und <article>- Definiert eindeutig seinen Inhalt.
Überschriften sind wichtig
Überschriften werden mit den <h1>to <h6>-Tags 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>
Suchmaschinen verwenden die Überschriften, um die Struktur und den Inhalt Ihrer Webseiten zu indizieren.
Benutzer überfliegen Ihre Seiten anhand ihrer Überschriften. Es ist wichtig, Überschriften zu verwenden, um die Dokumentstruktur und die Beziehungen zwischen verschiedenen Abschnitten darzustellen.
Screenreader verwenden Überschriften auch als Navigationswerkzeug. Die verschiedenen Arten von Überschriften geben die Gliederung der Seite vor.
<h1>Überschriften sollten für Hauptüberschriften verwendet werden, gefolgt von <h2>Überschriften, dann die weniger wichtigen
<h3>und so weiter.
Hinweis: Verwenden Sie HTML-Überschriften nur für Überschriften. Verwenden Sie keine Überschriften, um Text GROSS oder fett darzustellen .
alternativer Text
Das altAttribut bietet einen alternativen Text für ein Bild, wenn der Benutzer es aus irgendeinem Grund nicht anzeigen kann (aufgrund einer langsamen Verbindung, eines Fehlers im
src
Attribut oder wenn der Benutzer einen Bildschirmleser verwendet).
Der Wert des altAttributs sollte das Bild beschreiben:
Beispiel
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Wenn ein Browser ein Bild nicht finden kann, zeigt er den Wert des alt
Attributs an:
Beispiel
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Deklarieren Sie die Sprache
Sie sollten das lang
Attribut immer in das <html>Tag einfügen, um die Sprache der Webseite anzugeben. Dies soll Suchmaschinen und Browsern helfen.
Das folgende Beispiel gibt Englisch als Sprache an:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Verwenden Sie eine klare Sprache
Verwenden Sie immer eine klare Sprache, die leicht verständlich ist. Versuchen Sie auch, Zeichen zu vermeiden, die von einem Screenreader nicht klar gelesen werden können. Beispielsweise:
- Halte 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 Februar zu schreiben, schreiben Sie Februar
- Vermeiden Sie Slangwö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
Schlecht
Hinweis: Diese Seite ist eine Einführung in die Barrierefreiheit im Internet. Weitere Informationen finden Sie in unserem Tutorial zur Barrierefreiheit.