Optimierung der Website

Tipps für eine effektive Barrierefreiheit.

Einstellen der Sprache der Seite
Bilder müssen einen alternativen Text haben
Formular <input> Elemente müssen Beschriftungen haben
Guidebot "Screenreader" Einstellung NEU BETA
Guidebot "Lesemodus" Einstellung NEU BETA
Zeitlich begrenzte Aktualisierung darf nicht existieren
Zoomen und Skalieren dürfen nicht deaktiviert werden
ARIA-Schaltflächen, -Links und -Menüpunkte müssen einen zugänglichen Namen haben

Das Guidebot-Widget hilft Ihnen, Ihre Website zugänglich zu machen. Es funktioniert sofort nach der einfachen Installation und erweitert die Zugänglichkeit Ihrer Website.

Guidebot funktioniert sowohl mit gekauften Vorlagen als auch mit selbst geschriebenen HTML/CSS-Umgebungen. Für ein perfektes Erlebnis sollten Sie ein paar Dinge beachten.


# Einstellen der Sprache der Seite

Bei der Konfiguration eines Screenreaders wählen die Benutzer eine Standardsprache aus. Wird die Sprache einer Webseite nicht angegeben, geht der Screenreader davon aus, dass es sich um die vom Benutzer eingestellte Standardsprache handelt. Für Benutzer, die mehrere Sprachen sprechen und die Website in mehr als einer Sprache aufrufen, wird die Sprachauswahl so zum Problem. Es ist wichtig, eine Sprache anzugeben und sicherzustellen, dass sie gültig ist, damit der Text der Website korrekt ausgesprochen wird.

Screenreader verwenden für jede Sprache unterschiedliche Soundbibliotheken, die auf der Aussprache und den Merkmalen der jeweiligen Sprache basieren. Sie können problemlos zwischen diesen Sprachbibliotheken wechseln, allerdings nur, wenn im Dokument angegeben ist, welche Sprache(n) gelesen werden soll(en). Wird die Sprache nicht angegeben, liest der Screenreader das Dokument in der Standardsprache des Benutzers vor – was zu einer verwirrenden Erfahrung führt!

Beispiel für die Einstellung der aktuellen Sprache: 

        
<html lang="de">
<head>
...

# Bilder müssen einen alternativen Text haben

Screenreader haben keine Möglichkeit, ein Bild in Worte zu übersetzen, die dem Benutzer vorgelesen werden können – selbst dann nicht, wenn das Bild nur aus Text besteht. Daher müssen Bilder einen kurzen, beschreibenden Alt-Text haben, damit Screenreader-Nutzer den Inhalt und den Zweck des Bildes klar verstehen.

Für blinde Menschen sind visuelle Informationen wie Bilder völlig nutzlos, sofern keine digitale Textalternative bereitgestellt wird, die Screenreader in Sprache oder Braille umwandeln können. Das Gleiche gilt in unterschiedlichem Maße für Menschen mit Sehschwäche oder Farbenblindheit.

Es gibt im Wesentlichen drei Möglichkeiten, einem Bild alternativen Text hinzuzufügen: 

        
Verwendung eines alt-Attributs: <img src="..." alt="drawing of a cat"> 

Verwendung eines Aria-Labels: <img src="..." aria-label="drawing of a cat"> 

Verwendung eines aria-labelledby-Attributs: <img src="..." arialabelledby="labelID">

# Formular <input> Elemente müssen Beschriftungen haben

Wirksame Formularbeschriftungen sind erforderlich, um Formulare zugänglich zu machen. Der Zweck von Formularelementen wie Kontrollkästchen, Optionsschaltflächen, Eingabefeldern usw. ist für sehende Benutzer oft offensichtlich, selbst wenn das Formularelement nicht programmatisch beschriftet ist. Screenreader-Nutzer benötigen aussagekräftige Formularbeschriftungen, um Formularfelder zu identifizieren. Das Hinzufügen einer Beschriftung zu allen Formularelementen beseitigt Zweideutigkeiten und trägt zu einem besser zugänglichen Produkt bei.

Die empfohlene Methode für die meisten Fälle ist die Verwendung des label label-Elements und einer expliziten Assoziation mit den Attributen for und id. 

        
<label for="firstname">First name:</label> <input type="text" id="firstname">

# Guidebot "Screenreader" Einstellung NEU BETA

Der Screenreader ist in der Lage, den Inhalt der Website per Sprachsynthese vorzulesen. Ist er eingeschaltet, hebt Guidebot den vorlesbaren Inhalt der Seite hervor. Klicken Sie auf den Inhalt oder das Badge, um das Vorlesen zu starten. Der gelesene Text wird von Guidebot hervorgehoben.
Damit das Lesegerät richtig funktioniert, müssen wir den Inhalt definieren, der gelesen werden kann, indem wir einen data-gb-speech HTML-Tag hinzufügen. Wenn Sie den HTML-Tag ohne Wert angeben, nimmt das Lesegerät seinen Inhalt als Grundlage. Wird dies geändert oder ist der Inhalt so beschaffen, dass es nichts zu lesen gibt (z. B. ein Bild) können Sie den zu lesenden Inhalt als Wert des Tags angeben. Bei Schaltflächen und Links (solange der Screenreader aktiv ist) wird der Inhalt beim ersten Klick gelesen, beim zweiten Klick wird die Seite navigiert.


Beispiele für die richtige Einstellung: 

        
Ohne Wert:
<div data-gb-speech>Dieser Inhalt wird vorgelesen</div>
<a href="#" data-gb-speech>Dies ist ein Link</a>
<button type="button" data-gb-speech>Titel der Schaltfläche</button>

Mit Wert:
<div data-gb-speech="Dieser Inhalt wird vorgelesen">Und dieser Inhalt wird nur angezeigt</div>
<img src="..." data-gb-speech="Klicken Sie auf das Bild, um den Inhalt des Bildes zu lesen"/>

# Guidebot "Lesemodus" Einstellung NEU BETA

Der Lesemodus sammelt den Textinhalt der Seite und zeigt ihn in einem leicht lesbaren Format an, das keine Ablenkung bietet. Damit der Lesemodus richtig funktioniert, müssen wir das Element, das den Seiteninhalt enthält, durch einen data-gb-content HTML-Tag definieren.


Beispiel für die richtige Einstellung: 

        
<main data-gb-content>...</main>

# Zeitlich begrenzte Aktualisierung darf nicht existieren

Da die Benutzer nicht erwarten, dass eine Seite automatisch aktualisiert wird, kann eine solche Aktualisierung verwirrend sein. Die Aktualisierung verschiebt auch den programmatischen Fokus zurück an den Anfang der Seite, weg von der Stelle, wo der Benutzer ihn hatte. Ein solches Zurücksetzen ist für die Benutzer frustrierend.

Entfernen Sie das Attribut http-equiv="refresh" aus allen meta-Elementen, in denen es vorhanden ist.

Schlechtes Beispiel: 

        
<meta http-equiv="refresh" content="10" url="http://www.domain.com/index.html">

# Zoomen und Skalieren dürfen nicht deaktiviert werden

Der Parameter user-scalable=no innerhalb des content-Attributs des <meta name="viewport">-Elements deaktiviert das Zoomen auf einer Seite. Der Parameter maximum-scale begrenzt den Umfang, in dem der Benutzer zoomen kann. Dies ist problematisch für Menschen mit Sehschwäche, die auf Bildschirmlupen angewiesen sind, um den Inhalt einer Webseite richtig zu sehen.

Entfernen Sie den Parameter user-scalable=no aus dem Attribut content des Elements <meta name="viewport">, um das Zoomen zu ermöglichen, und stellen Sie sicher, dass der Parameter maximum-scale nicht kleiner als 2 ist.

Schlechtes Beispiel: 

        
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />

# ARIA-Schaltflächen, -Links und -Menüpunkte müssen einen zugänglichen Namen haben

Benutzer von Screenreadern sind nicht in der Lage, den Zweck von Elementen mit role="link", role="button", oder role="menuitem" zu erkennen, die keinen zugänglichen Namen haben.

Die Regel aria-command-name hat vier Auszeichnungsmuster, die die Testkriterien erfüllen: 

        
<div role="link" id="al" aria-label="Name"></div>

<div role="button" id="alb" aria-labelledby="labeldiv"></div>

<div role="menuitem" id="combo" aria-label="Aria Name">Name</div>

<div role="link" id="title" title="Title"></div>