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 "Screen Reader" Einstellung NEU
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 Bildschirmlesegeräts wählen die Benutzer eine Standardsprache aus. Wenn die Sprache einer Webseite nicht angegeben wird, geht das Bildschirmlesegerät davon aus, dass es sich um die vom Benutzer eingestellte Standardsprache handelt. Die Sprachauswahl wird zu einem Problem für Benutzer, die mehrere Sprachen sprechen und die Website in mehr als einer Sprache aufrufen. Es ist wichtig, eine Sprache anzugeben und sicherzustellen, dass sie gültig ist, damit der Text der Website richtig ausgesprochen wird.

Bildschirmlesegeräte verwenden für jede Sprache unterschiedliche Soundbibliotheken, die auf der Aussprache und den Merkmalen der jeweiligen Sprache basieren. Bildschirmlesegeräte können problemlos zwischen diesen Sprachbibliotheken wechseln, allerdings nur, wenn in den Dokumenten angegeben ist, welche Sprache(n) gelesen werden soll(en). Wird die Sprache nicht angegeben, liest das Bildschirmlesegerät 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

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

Wenn man nicht sehen kann, sind alle Arten von visuellen Informationen, wie z. B. Bilder, völlig nutzlos, es sei denn, es wird eine digitale Textalternative bereitgestellt, so dass Screenreader den Text entweder in Ton oder in 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. Benutzer von Bildschirmlesegeräten benötigen nützliche 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 "Screen Reader" Einstellung NEU BETA

Das Bildschirmlesegerät ist in der Lage, den Inhalt der Website per Sprachsynthese vorzulesen. Wenn er eingeschaltet ist, zeigt der Guidebot den Inhalt der Seite an, der gelesen werden kann. Klicken Sie auf den Inhalt oder das Abzeichen, um das Vorlesen zu starten. Der gelesene Text wird vom 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>