Zahlung in Bearbeitung, bitte warten. 
Warum ist das notwendig?
Die Optimierung des HTML-Codes einer Website für die Barrierefreiheit ist unerlässlich, da gut strukturiertes und semantisches HTML sicherstellt, dass Hilfstechnologien (wie z. B. Bildschirmleser) den Inhalt und die Funktionalität genau interpretieren können, sodass alle Benutzer die Website effektiv und unabhängig nutzen können. Einfacher ausgedrückt: Korrektes HTML ist die Grundlage dafür, dass die Seite nicht nur für Browser, sondern auch für Hilfs-Plugins und damit für Menschen mit Behinderungen verständlich ist.Spracheinstellung
Stellen Sie sicher, dass der im lang-Attribut angegebene Sprachcode ein gültiger Sprachcode ist (z. B.<html lang="en"> stellt die Dokumentsprache auf Englisch ein). Bei der Konfiguration des Text-to-Speech-Lesers wählen die Benutzer die Standardsprache aus. Wenn die Sprache einer Webseite nicht angegeben ist, geht der Bildschirmleser davon aus, dass es sich um die vom Benutzer eingestellte Standardsprache handelt. Die Sprachauswahl wird für Benutzer, die mehrere Sprachen sprechen und auf die Website in mehr als einer Sprache zugreifen, problematisch. Um den Text der Website korrekt auszusprechen, ist es unerlässlich, die Sprache anzugeben.
Der Text-to-Speech-Leser verwendet für jede Sprache eine andere Soundbibliothek. Er kann problemlos zwischen diesen Sprachbibliotheken wechseln, aber nur, wenn auf der jeweiligen Seite angegeben ist, welche Sprache verwendet wird. Wenn die Sprache nicht angegeben ist, liest der Bildschirmleser das Dokument in der Standardsprache des Benutzers vor, was zu einem seltsamen Ergebnis führt, wenn die Sprachen nicht übereinstimmen!
Beispiel für die Angabe der aktuellen Sprache:
<html lang="de">
<head>
...
Kontrastverhältnis
Bei der Gestaltung von Websites konzentrieren wir uns oft auf das Visuelle, aber ein wesentliches Element, das oft in den Hintergrund tritt, ist der Farbkontrast. Ein angemessener Kontrast ist jedoch nicht nur eine ästhetische Frage, sondern von grundlegender Bedeutung für die Benutzererfahrung, die Barrierefreiheit und die Lesbarkeit von Inhalten.Allgemeine Kontrastanforderungen (AA-Niveau)
Text und Textbilder
Das Kontrastverhältnis von visuell dargestelltem Text und Textbildern muss mindestens 4,5:1 betragen.Großer Text
Großer Text (mindestens 18 Punkt oder 14 Punkt und fett) und große Textbilder müssen ein Kontrastverhältnis von mindestens 3:1 haben.Kontrastverhältnis-Prüfer
Bilder
Bildschirmleser können ein Bild nicht in Worte übersetzen, selbst wenn das Bild nur aus Text besteht.Aus diesem Grund müssen Bilder einen kurzen, beschreibenden
alt-Text haben, damit Benutzer von Bildschirmlesern den Inhalt des Bildes klar verstehen können.
Wenn Ihre Sehkraft eingeschränkt ist, sind alle Arten von visuellen Informationen – wie z. B. Bilder – völlig unbrauchbar, es sei denn, es wird eine digitale Textalternative bereitgestellt, damit Bildschirmleser den Text in Sprache oder Brailleschrift umwandeln können.
Es gibt drei Hauptmöglichkeiten, einem Bild alternativen Text hinzuzufügen:
Verwendung des alt-Attributs
Dies ist die Standard- und am häufigsten verwendete Methode für alle Bilder, die Informationen enthalten oder für den Inhalt relevant sind.
<img src="bild.jpg" alt="Zeichnung einer Katze"/>
Verwendung des Aria-Labels
<img src="bild.jpg" aria-label="Zeichnung einer Katze"/>
Verwendung des aria-labelledby- oder aria-describedby-Attributs
Wird verwendet, wenn der "Titel" oder die kurze zusammenfassende Beschreibung des Bildes von einem anderen Element bereitgestellt wird.
<h2 id="kurzbeschreibung">Roter Sportwagen</h2>
<img src="bild.jpg" arialabelledby="kurzbeschreibung" alt="Bild eines roten Sportwagens" />
<p id="langbeschreibung">Dies ist eine sehr detaillierte Beschreibung der auf dem Bild gezeigten Landschaft, einschließlich der Lage der Berge, der Biegung des Flusses und der Baumarten.</p>
<img src="landschaft.jpg" alt="Wunderschöne Berglandschaft mit Fluss" aria-describedby="langbeschreibung">
Formulare
Für barrierefreie Formulare sind effektive Formularbeschriftungen erforderlich.Der Zweck von Formularelementen wie Kontrollkästchen, Optionsfeldern, Eingabefeldern usw. ist für sehende Benutzer oft offensichtlich, aber Benutzer von Bildschirmlesern benötigen nützliche Formularbeschriftungen, um die Formularfelder zu identifizieren.
Wenn wir jedes Formularelement mit einer Beschriftung versehen, beseitigen wir Unklarheiten und tragen zu einfacher zu bedienenden Formularen bei.
In den meisten Fällen ist die empfohlene Methode die Verwendung des
label-Elements und die Zuordnung der Attribute for und id.
<label for="vorname">Vorname:</label> <input type="text" id="vorname">
Fehlerbehandlung und Validierung
Wenn beim Absenden des Formulars ein Fehler auftritt, müssen klare Fehlermeldungen angezeigt werden
Bei der Fehlerbehandlung von Formularen müssen die Fehlermeldungen sofort erkennbar, spezifisch und hilfreich sein und außerdem klar angeben, in welchem Feld das Problem aufgetreten ist.Vermeiden Sie Überraschungen
Generieren Sie keine unerwarteten Änderungen im Formular (z. B. Hinzufügen oder Entfernen neuer Felder), ohne den Benutzer zu benachrichtigen.Eingabetypen
HTML5-Eingabetypen
Verwenden Sie die entsprechenden HTML5-Eingabetypen (z. B.type="email", type="tel", type="date"). Diese helfen Geräten (z. B. mobilen Tastaturen), die richtige Eingabe vorzubereiten, und auch Bildschirmlesern.
Autocomplete-Attribut
Verwenden Sie dasautocomplete-Attribut für Formularfelder, wo es relevant ist. Dies hilft Browsern und Hilfstechnologien, Benutzerdaten automatisch auszufüllen, wodurch Tippfehler reduziert und das Ausfüllen von Formularen beschleunigt wird.
Kontext und Gruppierung
Gruppieren Sie zusammengehörige Formularfelder
Verwenden Sie die Elemente<fieldset> und <legend>, um zusammengehörige Eingabefelder logisch zu gruppieren (z. B. Lieferadressdaten). Das <legend>-Element stellt die Beschriftung der Gruppe für Bildschirmleser bereit.
<form>
<fieldset>
<legend>Persönliche Daten</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email">
</fieldset>
</form>
Schaltflächen müssen eindeutig beschriftet sein
Der Text der Schaltfläche sollte ihre Funktion klar angeben (z. B. "Registrieren", "Daten speichern", "Senden").Zoomen / Skalieren
Der Parameteruser-scalable=no im content-Attribut des <meta name="viewport">-Elements deaktiviert das Zoomen auf der Seite.
Der Parameter maximum-scale begrenzt den Betrag, den der Benutzer zoomen kann.
Dies ist problematisch für Menschen mit Sehbehinderungen, die auf Bildschirmvergrößerer angewiesen sind, um den Inhalt der Webseite richtig zu sehen.
Entfernen Sie den Parameter
user-scalable=no aus dem content-Attribut des <meta name="viewport">-Elements, um das Zoomen zu ermöglichen,
und stellen Sie sicher, dass der Parameter maximum-scale nicht kleiner als 2 ist.
Der allgemeine und barrierefreieste Ansatz besteht darin, das maximum-scale-Attribut nicht zu verwenden oder anstelle von maximum-scale=no (was 1.0 bedeutet) einen höheren Wert wie maximum-scale=2.0 oder sogar 3.0 oder 4.0 festzulegen.
<!-- Barrierefreieste Lösung -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Empfohlen (wenn eine maximale Skalierbarkeit erforderlich ist, erlaubt das Beispiel 300%) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0" />