Erstellen Sie eine barrierefreie Website

Machen Sie Ihre Website für eine Vielzahl von Besuchern zugänglicher, z. B. für Bildschirmleser, Lupen usw.

Der Editor ist so optimiert, dass Benutzer unterstützender Technologien das bestmögliche Surferlebnis erhalten. Dies wird durch drei spezifische Merkmale erreicht:

1. Das Hinzufügen von ARIA-Beschriftungen (Accessible Rich Internet Applications) im Website-Code, um sehbehinderten Benutzern zu helfen, Elemente zu verstehen, auf denen keine Textbeschriftungen angebracht sind.
2. Eine Funktion Zum Inhalt springen, mit der Bildschirmleser die Hauptnavigation der Website umgehen können, damit sie nicht jedes Mal wiederholt wird, wenn der Benutzer eine neue Seite auf der Website öffnet.
3. Eine Fokusanzeige-Übersicht, die Benutzern von Hilfstechnologien klar anzeigt, welches Element auf der Website gerade aktiv ist.

 
Sie finden das Menü Eingabehilfen im Editor, indem Sie auf die drei Punkte in der oberen rechten Ecke des Interfaces klicken und Einstellungen auswählen.

Wählen Sie Eingabehilfen auf der linken Seite des Menüs aus.

ARIA-Labels aktivieren

ARIA-Labels wurden bereits zu allen relevanten Elementen auf Ihrer Website hinzugefügt, sie werden jedoch erst aktiviert und sind für Screenreader zugänglich, wenn Sie die Option ARIA aktivieren angekreuzt haben.

Im Website-Code wird das Attribut aria-label verwendet, um eine Zeichenfolge zu definieren, die ein bestimmtes Element auf der Website kennzeichnet. Sie wird auf den Website-Code angewendet, wenn auf dem betreffenden Element keine Textbeschriftung sichtbar ist, z. B. ein Symbol, eine Karte oder ein Button. ARIA-Labels sind auf der Website nicht sichtbar vorhanden, werden jedoch von Bildschirmlesern aufgenommen und laut vorgelesen.

Beispiel 1: Karte

Mit dem Kartenmodul des Editors können Unternehmen ihren Standort den Besuchern auf einfache Weise anzeigen. Der Standort wird jedoch visuell mit einem Stift auf der Karte angezeigt. Mit anderen Worten, es gibt keine tatsächliche Textanzeige, es sei denn, Sie klicken auf die Stecknadel. Dies bedeutet, dass Bildschirmleser das Element zwar als Karte erkennen können, den darauf befestigten Ort jedoch nicht vorlesen können. Wenn ARIA auf der Website aktiviert ist, werden Bildschirmleser jedoch aufgefordert, einen alternativen Text vorzulesen, der so eingerichtet ist, dass er die tatsächliche Adresse auf der Karte enthält. Es sieht folgendermaßen aus, wenn der Bildschirmleser auf dem Kartenelement aktiv ist:

Wäre ARIA nicht aktiviert worden, würde der Bildschirmleser eine viel weniger aussagekräftige Antwort zurückgeben:

Beispiel 2: Social icons

Sie können Symbole an mehreren Stellen auf Ihrer Website hinzufügen, z. B. im  Soziale Medien Links-Modul, wo Sie Links zu Ihren Seiten auf Facebook, Twitter usw. erstellen können. Die Links werden als Symbole ohne Textbezeichnung angezeigt. Bei aktiviertem ARIA lesen Bildschirmleser einen Text vor, der die Funktion des Symbols beschreibt:

Wäre ARIA nicht aktiviert worden, könnten Bildschirmleser das Symbolobjekt nicht beschreiben:

Beispiel 3: Digitale Visitenkarte-Modul

In diesem Beispiel haben wir einer Website ein digitales Visitenkartenmodul hinzugefügt. Das Modul fügt automatisch Symbole hinzu, um Informationen auf der Visitenkarte zu klassifizieren, z. B. eine Pinnnadel zur Angabe der Adresse, einen Umschlag zur Angabe der E-Mail usw. Da diese Symbole keinen Text enthalten, der laut vorgelesen werden kann, wird das aria-label Attribut verwendet, um Text für unterstützende Technologien bereitzustellen. In diesem Beispiel lautet die Bezeichnung im Code "Adresse". Dies ist also das Wort, das ein Bildschirmleser vorliest, wenn er auf dem Element aktiv ist.

Wäre die Option ARIA aktivieren im Editor nicht angekreuzt, würde ein Bildschirmleser keine Antwort zurückgeben, wenn er für das Element aktiv ist:

Die gleiche Logik gilt für alle anderen Elemente ohne Textbeschriftung, z. B. das X-Schließen-Symbol in Dialogen, das mit dem aria-label „Schließen“ versehen wurde.

"Zum Inhalt springen" aktivieren

Wenn Benutzer mit Tastatur auf Ihrer Website interagieren, verwenden sie die Tabulatortaste, um von Element zu Element zu springen. Dies bedeutet auch, dass sie jedes Mal, wenn sie eine neue Seite auf Ihrer Website öffnen, alle Links in Ihrer Hauptnavigation (Kopfzeile) durchblättern müssen, um zum Hauptinhalt der Seite zu gelangen. Durch Aktivieren von Zum Inhalt springen unter Einstellungen > Eingabehilfen können sie dies leicht umgehen und das Surferlebnis für den Benutzer weniger repetitiv werden lassen.

Technisch wird die Option Zum Inhalt springen ermöglicht, indem im Website-Navigationscode eine tabindex -1-Eigenschaft vorhanden ist, die unterstützende Technologien anweist, dieses bestimmte Element zu ignorieren. Dies hat wiederum keinen Einfluss darauf, wie die Website anderen Besuchern visuell angezeigt wird.

Wie ist die Benutzererfahrung?

Wenn ein Benutzer eines Bildschirmlesegeräts eine neue Seite auf der Website öffnet, wird in der oberen linken Ecke des Browserfensters automatisch das Element "Navigation überspringen" angezeigt. Es ist das erste umsetzbare Element, das der Bildschirmleser vorliest. Wenn ein Benutzer auf die Leertaste klickt, während er sich auf dem Element befindet, wird die Navigation übersprungen und das nächste Fokuselement befindet sich am Anfang des Websiten-Inhalts

Aktivieren der Fokusanzeige

Die Fokusanzeige ist eine farbige Kontur, die angibt, welches Element derzeit auf der Website fokussiert ist. Dies hilft den Benutzern klar anzuzeigen, wo sie sich auf der Website gerade befinden.