Handbuch Webdesign: Barrierefreiheit
Barrierefreiheit ist der Versuch, Web-Angebote so zu gestalten, dass keine Barrieren aufgebaut werden. Sprich, kein Nutzer grundsätzlich ausgeschlossen wird. Wir wollen unsere Angebote zum Beispiel auch für eingeschränkte Menschen optimieren. Einschränkungen sind schon durch PDAs oder eine leichte Sehschwäche vorhanden. Barrierefreiheit versucht also, jedem das Web-Angebot zugänglich zu machen. Wir können natürlich nicht alle Barrieren der Webseite entfernen, es werden sich immer automatisch welche ergeben. Wir können sie aber barrierearm gestalten, also so wenig Barrieren wie möglich.
Methoden
[Bearbeiten]Um barrierearme Webseiten zu gestalten, bedarf es gewisser Techniken, die im Allgemeinen recht wenig verbreitet sind. Diese beinhalten unter Anderem qualitative Techniken, die wir nur durch die Struktur, Semantik oder Formatierung erreichen können. Es gibt aber auch Möglichkeiten, die durch Markup umgesetzt werden können.[1]
Trennung von Inhalt und Struktur
[Bearbeiten]Um Barrieren abzubauen, sollten Elemente im Markup niemals dem Layout dienen. Das gesamte Aussehen sollte über einen externen Stylesheet geregelt werden – und auch nur dort.
Erreichbarkeit von Inhalten
[Bearbeiten]Tab-Index
[Bearbeiten]Mit dem Attribut Tab-Index kann die Reihenfolge der zu fokussierenden Hyperlinks festgelegt werden, was mit der „Tab-Taste“ möglich ist. So können wir zum Beispiel den Skiplink, die Navigation und andere wichtige Hyperlinks direkt anspringen lassen, und unwichtige Links überspringen wie zum Beispiel Werbelinks und Ähnliches.
Skiplinks
[Bearbeiten]Ein sogenannter Skiplink (Übersprungslink) ist ein Hyperlink, der dokumentintern auf den Inhalt verweist. So können zum Beispiel, sollte ein Screen-Reader verwendet werden, unwichtige Elemente wie Kopfzeile oder Navigation übersprungen werden, und werden nicht wiederholt vorgelesen.
Accesskeys – Zugangsschlüssel
[Bearbeiten]Zugangsschlüssel sind zum Beispiel belegte Zahltasten(1,2,3..), die Operationen ausführen, die normalerweise per Maus erledigt werden. So können wir zum Beispiel der Navigation den Accesskey 1 zuweisen:
<ul accesskey="1">
<li>Startseite</li>
<li>Dokumente</li>
</ul>
Wenn jetzt die „1“ gedrückt wird, wird zur Navigation navigiert.
Sprachattribute
[Bearbeiten]In Texten kommen oft Wörter in anderen Sprachen, zum Beispiel Englisch vor. Von Screen-Readern werden diese dann in der eingestellten Sprache vorgelesen. Wenn nun ein englisches Wort vorkommt, wird dieses dann mit deutschem Sprachlaut vorgelesen. Um das zu vermeiden, können wir dieses Wort in ein <span>-Tag einschließen, und diesem die Sprache Englisch zuweisen, so dass dieses auch englisch vorgelesen wird.
<p>Zurück zu <span lang="en">Home</span>.</p>
Interaktive Inhalte
[Bearbeiten]Interaktive Inhalte wie Scripts oder eingebundene Objekte sollten immer nur ein Zusatz sein, niemals Voraussetzung für den Inhalt sein. Man sollte sie, wenn gewünscht nutzen können. Da man Nutzer aussperren würde wenn man sie zur Voraussetzung erklärt, ist das der barrierearmen Webseite nicht dienlich.
Negative Beispiele
- Flash-Inhalte und Flashwebseiten
- JavaScript Navigationen
- Bilder, die dem Inhalt dienen und per Script eingebunden werden
- Bilder, die nicht erklärt werden
Logische Struktur
[Bearbeiten]Das Dokument sollte eine logische Struktur verfolgen. So sollten Elemente und Inhalte an erwarteten Stellen platziert werden. Der Nutzer sollte alle Elemente leicht finden. Zwischen ihnen sollten Assoziationen erstellt werden, damit man der Struktur leichter folgen kann. Des Weiteren sollten Überschriften hierarchisch verwendet werden, um die Verzweigung eines Elementes verständlicher zu machen.
Aria Auszeichnungen
[Bearbeiten]Da HTML nur sehr wenige Widgets bereit stellt, müssen manchmal Widgets als Grafik o.ä. eingebunden werden. Um das ganze Zugänglich zu gestalten müssen wir ihnen Rollen zuweisen. Das funktioniert mit dem „role“ Attribut. Für das „role“ Attribut sind diverse Standard-Werte vorgesehen. Ferner gibt es noch ARIA-Zustände, die bestimmte Daten wiedergeben können. Beispiel:
<img src="regler.png" alt="Schieberegler" role="slider" aria-valuemin="0" aria-valuemax="10" aria-valuenow="2" aria-valuetext="2 von 10 Punkten">
Dem Bild wird die Rolle Schieberegler (Slider) zugewiesen. Des Weiteren ist die Skala von 0 bis 10 zu verstellen. Der aktuelle Wert beträgt 2 von 10 Punkten.
Für weitere Informationen:[2][3]