Screenreader schaffen ein audio-strukturiertes Erlebnis
Blinde Menschen hören den Inhalt von Internetseiten mit einem Programm namens Screenreader. Das ist eine Stimme, die Text in Sprache
umwandelt. Man kann eine Webseite auch komplett laut vorlesen lassen, aber das macht kaum jemand. Wenn Sie das machen, müssen Sie
sich jedes Mal den Anfang der Seite anhören, auch den Markennamen, die Hauptnavigation und andere Funktionen wie Suche, Anmeldung
usw. Sobald Sie beim Hauptinhalt sind, müssen Sie sich alles anhören. Man konnte nicht überfliegen. Du müsstest dir auch alle Links
und Infos in der Fußzeile anhören.
Es wäre zu viel Arbeit, alles auf jeder Webseite zu hören.
Du kannst auch nicht einfach auf einer Webseite herumklicken, um etwas zu machen. Du musst immer erst den Screenreader stoppen und
dann die Tastatur benutzen, um die Aufgabe auszuführen.
Wie weißt du, wo du klicken kannst? Der Screenreader sagt Ihnen, wenn Sie zu einem Link, einer Texteingabe oder einer Schaltfläche
kommen. Der Screenreader weiß, was die Elemente sind, weil sie im Browser und Betriebssystem angezeigt werden.
Was ist die ideale audiostrukturelle Benutzererfahrung für eine Seite?
Wie machen Sie eine gute Benutzererfahrung bei Audioinhalten? Gibt es eine perfekte audiostrukturelle Benutzererfahrung?
Jede Website ist anders. Aber es gibt ein paar Dinge, die Sie immer beachten sollten.
Ideale Orientierungspunkte
Eine Liste mit Punkten, die man sich zum Orientieren merken kann, könnte so aussehen:
<header> (oder <div role="banner">)
<nav> (oder <div role="navigation">)
<div role="search">
<main> (oder <div role="main">)
<footer> (oder <div role="contentinfo">)
Das ist alles, was Sie brauchen. Die Liste mit den Sehenswürdigkeiten ist kurz. Das ist gut so. Landmarken helfen den Benutzern,
Teile einer Webseite schneller zu finden. Wenn die Liste zu lang ist, suchen die Benutzer genauso lange in den Landmarken wie auf
der Seite selbst.
In den meisten Fällen brauchen Sie nur eine Kopfzeile, eine Suche, einen Hauptinhalt und eine Fußzeile. Sie können mehrere
Navigationsbereiche haben, aber es ist oft besser, sie auf die Hauptnavigation zu beschränken. Wenn Sie mehrere Navigationsbereiche
festlegen, geben Sie ihnen eindeutige Namen. Verwenden Sie dafür aria-label.
Ideale Überschriften
Eine Überschrift sollte aus einer Ebene bestehen, die mit “h1” beginnt. Sie sollte im Hauptinhalt stehen.
Es sollte nur eine Überschrift der Ebene 1 geben, aber das ist nicht zwingend. Ein Dialogfeld sollte mit einer Überschrift der
Ebene 1 beginnen, da es wie eine kleine Webseite ist.
Jeder Hauptteil sollte eine Überschrift haben.
Die Überschriften sollten den Inhalt der Seite logisch gliedern.
Überschriften sollten nicht von einer Ebene zur nächsten springen. Ein Element der Ebene 2 sollte also nie Element der Ebene 5 sein.
Ideale Formularelemente
Alle Formularelemente brauchen genaue Beschriftungen. Es gibt noch andere Punkte zur Barrierefreiheit von Formularen. Diese kommen
aber erst zum Einsatz, wenn das Formular benutzt wird, nicht bei der Auflistung der Elemente.
Ideale Bilder
Der Alt-Text wird in der Liste der Bilder angezeigt. Deshalb sollten Sie sicherstellen, dass das Bild einen Alt-Text enthält und
dieser gut ist. Der Alt-Text muss genau, aussagekräftig und verständlich sein.
Ideale Links
Jeder Link braucht einen Namen, der gültig und barrierefrei ist. Der barrierefreie Name kann aus Text, dem Alt-Text eines Bildes
oder einer Beschriftung bestehen.
Der Linktext sollte sagen, was man auf der Seite findet.
Der Linktext sollte sinnvoll und eindeutig sein.
Fügen Sie so viele Links ein, wie Sie wollen. Wikipedia-Artikel haben oft mehr Links als andere Webseiten. Die Links sind aber
angemessen und es ist nicht falsch, viele Links zu haben. Allerdings dauert es lange, sich durch alle Links zu klicken.
Ideallisten
Verwende die richtigen Markierungen für Listen, wenn du eine Liste präsentierst.
Verwenden Sie immer die richtige Liste für den jeweiligen Fall.
Sie können so viele Listen nutzen, wie Sie wollen.