Nützliche Informationen zur Barrierefreiheit auf diesen Seiten

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Nützliche Informationen zum Thema Barrierefreiheit

Immer mehr Menschen nutzen das Internet um sich über einen bestimmten Dienstleistungszweig zu informieren. Und weil vermehrt ältere Menschen oder Personen mit körperlichen Einschränkungen das Internet nutzen, wird es für einen Webdesigner immer wichtiger einen barrierefreien Zugang zu den Inhalten seiner Website bereitzustellen. Barrierefreie Webgestaltung bietet aber noch viele weitere Vorteile, zum Beispiel die Bedienung mit einem Smartphone oder anderen mobilen Endgeräten.

Eine vollständig barrierefreie Website für Jedermann zu erstellen, ist allerdings so gut wie unmöglich, daher spricht man auch von einer barrierearmen oder zugänglichen Website. Schlagwörter in dem Zusammenhang sind auch Accessibility (deutsch: Zugänglichkeit) und Usability (deutsch: Gebrauchstauglichkeit).

Wie sieht nun die vernünftige Umsetzung für barrierefreie Webauftritte aus, und was gehört alles dazu?

Auf dieser Webseite finden Sie nützliche Informationen zum Thema Barrierefreiheit und wie es auf diesen Seiten umgesetzt wurde.

Stärkere Kontraste

Menschen mit einer Sehbehinderung benötigen stärkere Kontraste zwischen Vorder- und Hintergrund. Die Farben, zum Beispiel für einen Button im Menü, habe ich vorab auf das Kontrastverhältnis getestet, und einen sehr guten Farbkontrastcheck findet man auf der Seite: Colour Contrast Check.

Sprechende Alternativ-Texte für Bilder

Bilder auf Webseiten sind für Sehbehinderte unzugänglich und sollten daher mit einem beschreibenden Text ergänzt werden. Der Sehbehinderte möchte wissen, was auf dem Bild zu sehen ist, und darum empfiehlt es sich die Bilder mit einem beschreibenden Text, also einer Bilderklärung, in dem "alt-Attribut" zu versehen. Aus Sicht des W3C (World Wide Web Consortium: Gremium zur Standardisierung der Techniken im World Wide Web) ist ein Text im "alt-Attribut" daher auch eine "Pflicht-Angabe".

Wird aber ein Bild nur für das Aussehen einer Seite benutzt, zum Beispiel für das Seitenlayout, wäre ein beschreibender Text für Blinde störend. In dem Fall sollte das "alt-Attribut" zwar aufgeführt, aber leer gelassen werden, damit so ein Bild von einem Screen-Reader ignoriert wird. Außerdem kann es vorkommen, dass das Bild nicht aufrufbar ist, weil es verschoben wurde. In dem Fall wird anstelle des Bildes das "alt-Tag" angezeigt.

Zusätzlich kann man bei einem Bildaufruf das "title-Tag" definieren. Das "title-Attribut" erscheint im Browser als "Tool-Tipp", wenn man mit dem Mauszeiger über ein Bild fährt. Es ist also eine zusätzliche Information, und keine alternative wie das "alt-Attribut". Ich würde es zum Beispiel setzen wenn die Bilder keine Bildunterschrift haben.

Ein Text passt sich unterschiedlich breiten Bildschirmen automatisch an, aber bei Bildern geht das nicht so einfach. Zum Beispiel sind die verschiedenen Bildbeispiele auf diesen Seiten manchmal 800 Pixel breit. Um so ein Bild in einer Seite einzubinden, erhalten die Bilder über das CSS (Cascading Style Sheet) eine maximale Breitenangabe von 100 Prozent. Hierzu fügt man die folgenden Zeilen in das CSS (Cascading Style Sheet) ein: img { height: auto; max-width: 100%; }. Damit behalten die Bilder zuerst einmal ihre normale Breite. Wenn aber der Bildschirm zu klein für das Bild ist, wird es auf die notwendige Breite herunter skaliert.

Skalierbarkeit der Inhalte und der Schrift

Absolute Größenangaben in Pixel (px) sollten vermieden werden, da sie vom Leser nur schwer veränderbar sind. Stattdessen empfiehlt es sich für Schriften, Größe von Bereichen oder Abstände, relative Größen in "em" oder "%" einzusetzen. Besonders die Breite und Höhe von Elementen sollte relativ angegeben werden, damit sie sich bei einer Schriftgrößenänderung entsprechend dem Textinhalt anpassen.

Wichtig für eine Umrechnung von Pixel in "em"!

Die Standardschriftgröße in allen gängigen Browsern ist 16 Pixel. Von dieser Basis aus, kann man dann die anderen Größen umrechnen. Zum Umrechnen empfehle ich dieses Online-Tool, mit dem man sogar eine andere Standardschriftgröße auswählen kann.

Außerdem ist zu beachten, dass der Schriftgrad eines Elements in "em" vererbt wird. Wenn also die Schriftgröße eines Eltern-Elements 0.8 em beträgt, ist die Schriftgöße des Kind-Elements bei 0.9 em verhältnismäßig kleiner (0.72 em). Hätte das Kind-Element eine Schriftgröße von 1 em, würde der tatsächliche Wert 0.8 em betragen.
Auf dieser Seite können Sie das Ergebnis leicht testen, in dem Sie die Schriftgröße in Ihrem Browser vergrößern, oder mit "Strg +" die komplette Darstellung zoomen. Alle Elemente der Navigation, die Buttons, das Suchfeld und das Logo werden angepasst, so dass sich bei beiden Varianten am Design der Seite nichts ändert.

Leichte Sprache

Abkürzungen oder Fremdwörter sollten vermieden werden. Englischsprachige Wörter sollten gekennzeichnet werden, so dass der Screenreader die Wörter richtig vorlesen kann. Präsentieren Sie die Inhalte übersichtlich und in einer leicht verständlichen Sprache.

Komfortable Bedienbarkeit und sinnvolle Link-Texte

Eine Navigation sollte nicht mit Bildern oder einem JavaScript aufgebaut werden, aber über die gesamte Website konsistent sein. Die Buttons sollten auch nicht zu klein gewählt werden, und im zugehörigen "title-Tag" ist eine selbsterklärende Bezeichnung des Linkziels für Sehbehinderte von Vorteil. Begriffe wie "weiterlesen" oder "hier klicken" sind dabei nicht ratsam und sollten vermieden werden. Der Text soll dem User einen Hinweis auf die Seite geben, die er nach dem Klick auf den Hyperlink erreicht.

Ein externer Hyperlink zu einer fremden Webseite sollte speziell gekennzeichnet werden. Auf diesen Webseiten wird nach dem Hyperlink ein kleiner Pfeil eingeblendet, und im "title-Tag" des Sprungbefehls steht zu Beginn immer "Externer Seitenaufruf" und dann ein Hinweis zur anderen Webseite. Bei den Codeschnipseln auf der Seite "Wie gehen wir mit dem Aufruf von anderen Webseiten um?" ist das noch ausführlicher erklärt.

Bedienbarkeit mit der Tastatur

Menschen mit motorischen Einschränkungen können eine Maus nur bedingt einsetzen. Daher ist es ein wichtiges Kriterium für die Zugänglichkeit und Barrierefreiheit, dass eine Webseite auch mit der Tastatur bedienbar sein muss.

Bieten Sie außerdem eine Möglichkeit an, die Navigation zu überspringen. Eine bewährte Möglichkeit ist ein Verweis am Anfang der Seite mit dem Text "zum Inhalt springen". Wie das am besten umzusetzen ist, haben wir auf der Webseite "Barrierefreiheit und Bedienungen mit der Tastatur" etwas ausführlicher beschrieben.

Die Bedienung der Website funktioniert auch ohne Maus!

Accesskey - Tastaturkürzel

Tastenkombinationen sind eine zusätzliche Möglichkeit, um Verweise auf einer Website anzusteuern. Und Accesskeys erlauben den schnellen Zugriff per Tastatur auf bestimmte oder besondere Seiten einer Website.

Die Computerbedienung mit Hilfe von Tastaturkürzeln ist insbesondere für Menschen mit visuellen oder motorischen Einschränkungen wichtig, da sie eine Maus nicht oder nur bedingt einsetzen können. Sie sind auf die Tastatur oder alternative Eingabegeräte angewiesen. Aber auch alle anderen Nutzer, die lieber mit der Tastatur als der Maus arbeiten, können von einer guten Bedienbarkeit mit der Tastatur profitieren.

Sie verwenden Accesskeys, indem Sie folgenden Tasten auf ihrer Tastatur gleichzeitig drücken

Leider unterscheiden sich die Tastenkombinationen um Accesskeys zu aktivieren teilweise erheblich in den unterschiedlichen Browsern. Aus dem Grund habe ich unten mal die unterschiedlichen Tastenkombinationen aufgeführt.

Folgende Tastenkombinationen werden auf dieser Website unterstützt

Bei den Accesskeys sollte auf die Verwendung von Buchstaben verzichtet werden, da Tastenkombinationen mit Buchstaben oft zu Konflikten mit den browserinternen Tastenkombinationen führen kann.
Deshalb habe ich mich auf dieser Website auf die unten aufgeführten Tastaturkürzel beschränkt.

Zum Seitenanfang springen Λ