 |
Man kann sich eine Website auch vorlesen lassen.
Die möglichen Gründe dafür sind vielfältig: vielleicht sehen Sie nicht mehr so gut, seit Sie einen Unfall hatten. Oder Sie genießen es einfach, sich zu später Stunde mit Tee und im Ohrensessel die neuesten Nachrichten vorlesen zu lassen. Entspannend ist das allemal.
In diesem Falle benutzen Sie wahrscheinlich einen sogenannten "Screen Reader". Wie der Name verrät, handelt es sich dabei um ein Programm, das HTML-Code akustisch zugänglich macht. Natürlich geht es nicht nur darum, die einzelnen Tags und ihren Inhalt der Reihe nach vorzulesen. Auch eine möglichst einfache Navigation durch den Inhaltsbereich ist wichtig. Wie gut das funktionieren kann, hängt maßgeblich von der Website ab, die vorgelesen werden soll.
Die gute Nachricht: mit einigen recht einfachen Maßnahmen können Sie die Screen Reader Usability Ihrer Website deutlich verbessern, Ihre Seite also zu einem Freudenfest für alle Sinne machen.
Grundstruktur: Titel und Headlines
Achten Sie darauf, jeder Seite einen guten, d.h.: beschreibenden, Titel zu geben. Gliedern Sie dann den folgenden Text mit Headline-Tags. Ihre Überschriften sollten ebenfalls möglichst deskriptiv in Bezug auf nachfolgende Inhalte sein - wer die Headline vorgelesen bekommt, sollte wissen, welche Inhalte ihn darunter erwarten. Viele Screen Reader haben speziell auf Überschriften zugeschnittene Funktionen, z.B. eine Übersicht über alle Headlines. Das funktioniert natürlich nur, wenn Sie semantisch korrektes Markup verwenden, also Überschriften erster Ordnung auch mit <h1> kennzeichnen.
Lineare Anordnung
Screen Reader verarbeiten eine Seite von oben nach unten, von links nach rechts. Platzieren Sie daher wichtige Elemente möglichst weit oben und möglichst weit links, zumindest, was die Code-Strutkur betrifft.
Beispielsweise könnten Sie der Meinung sein, dass der Inhalt einer Seite wichtiger ist als das Navigationsmenü, welches aber trotzdem im normalen Browser am linken Rand angezeigt werden sollte. In diesem Falle können Sie div-Container einsetzen, die Sie mit absoluten Positionsangaben versehen, sodass der an erster Stelle platzierte Inhalts-Container trotzdem rechts neben dem im Code nachfolgenden Navigations-Container angezeigt wird.
Besonders beliebt bei den Benutzern von Screen Readern ist auch, ein Formular betreffende Hinweise erst nach dem letzten Feld einzufügen. Die umgekehrte Reihenfolge ist ohnehin zu empfehlen.
Navigation vereinfachen
Stellen Sie das Navigationsmenü im Code entweder direkt an den Anfang Ihrer Seiten oder unter eine aussagekräftige Headline erster Ordnung, z.B. "Navigation".
Verwenden Sie möglichst deskriptive Links - ebenfalls eine Empfehlung, die auch im Rahmen der normalen Usability gilt.
Vermeiden Sie den Linktext hier klicken - man muss normalerweise den Kontext kennen, um solche Links zu interpretieren. Gerade das aber versuchen Screen Reader-Benutzer häufig zu vermeiden.
Bilder mit ALT kennzeichnen
Geben Sie Bildern, die Inhalte transportieren, einen aussagekräftigen ALT-Text. Versuchen Sie, sich hier so kurz wie möglich und so ausführlich wie nötig zu fassen - man möchte auch nicht mit Bildbeschreibungen überflutet werden, wenn man sich eine Website vorlesen lässt.
Textinhalte vereinfachen
Wenn möglich, bieten Sie Inhalte in Form einer Liste an - das schafft Übersicht.
Verwenden Sie inhaltlich sinnvolle p-Tags, um die Voraussetzung zum Überspringen von uninteressanten Abschnitten zu schaffen.
Und schließlich: Setzen Sie auf einen "kopflastigen" Aufbau Ihrer Texte. Schlussfolgerungen und Zusammenfassungen sind weiter vorne besser aufgehoben - wer sich vorlesen lässt, merkt so sehr schnell, was interessiert - und was eben nicht. Als Nebeneffekt erleichtert dies auch visuell orientierten Surfern das sogenannte "Scannen" einer Website.
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
