Websiteentwicklung: Barrierefreiheit und Benutzbarkeit
Dieses Buch steht im Regal EDV.
Inhaltsverzeichnis |
[Bearbeiten] Einleitung
In einer Zeit, in der immer mehr mit alternativen Geräten wie PDAs, Handys oder Fernsehern im Internet gesurft wird und in der auch seh-, hör- oder motorisch behinderte Menschen das Internet erfahren und erforschen möchten, ist die Barrierefreiheit von Websites ein zentrales Thema. Barrierefreiheit ist der Ansatz, 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 PDA's oder eine leichte Sehschwäche vorhanden. Barrierefreiheit versucht also, jedem das Web-Angebot zugänglich zu machen. Es ist nicht immer möglich eine Webseite komplett barrierefrei zu gestalten, daher wird alternativ auch der Begriff barrierearm verwendet.
Barrieren in Webseiten können in verschiedene Bereiche gegliedert werden:
- technische Barrieren
- hierunter werden Barrieren verstanden, die durch die Verwendung oder Nichtverwendung einer bestimmten Technologie entstehen, z.B.:
- feste Schriftgrößen
- geringe Kontraste bei Farben für Text und in Grafiken
- keine Semantik des zugrunde liegenden Markups
- soziale Barrieren
- diese Barrieren lassen sich auch durch den geschickten Einsatz von Technik nicht vermeiden, sondern hängen unmittelbar vom jeweiligen Autor ab, z.B.:
- schwerverständliche Texte
- Nutzung von Jargon, Abkürzungen, Fachsprache
- logische Barrieren
-
- durchbrechen bestehender Konventionen
- Inkonsistenz
[Bearbeiten] Methoden
[Bearbeiten] Trennung von Inhalt und Struktur
Um Barrieren abzubauen und die Gestaltung für verschiedene Endgeräte zu ermöglichen (z.B. Screenreader, Smartphones), sollten Elemente im Markup niemals dem Layout dienen. Das gesamte Aussehen sollte über einen externen Stylesheet geregelt werden – und auch nur dort. Erst die konsequente Trennung von Inhalt und Layout ermöglicht es, dem Inhaltsanbieter bzw. dem Nutzer, die Darstellung auf seine Bedürfnisse hin zu optimieren.
[Bearbeiten] Semantisches Markup
Semantik bezeichnet im Zusammenhang mit Webseiten, die Auszeichnung von Inhalten mit einer Bedeutung. So sollten beispielsweise HTML-Element immer nach ihrem (in den entsprechenden Standards) vorgesehenen Verwendungszweck eingesetzt werden, niemals entgegen diesem. Tabellen sollten nur dazu dienen, tabellarischen Daten zu strukturieren und nicht um ein Layout zu gestalten. Überschriften sollten entsprechend als diese verwendet werden, niemals um lediglich Text hervorzuheben.
Nur wenn Inhalte der Bedeutung entsprechend ausgezeichnet sind, können Sie auch ohne die Nutzung eines bestimmten Layouts mit Bedeuung versehen werden. Die ist insbesondere für Software nützlich, welche die Inhalte von Webseiten vorliest (Screenreader), aber auch Suchmaschinen greifen auf diese Formatierungen zurück.
[Bearbeiten] Erreichbarkeit von Inhalten
Sämtliche Inhalte einer Webseite sollten unabhängig vom jeweiligen Eingabegerät angesteuert und ausgewählt werden können. Nicht alle Nutzer können oder wollen eine Maus zum surfen verwenden (z.B. bei eingeschränkter Motorik oder der Verwendung von Touchscreens – wie sie in modernen Mobilgeräten üblich sind). Zusätzlich sollten zu audiovisuellen Medien Text-Alternativen bestehen. Dies ist hilfreich, wenn der Nutzer diese Medien nicht laden kann (oder will) oder sie schlicht aufgrund körperlicher Einschränkungen nicht erfassen.
- Tab-Index
- Mit dem Attribut Tab-Index kann die Reihenfolge der zu fokussierenden Hyperlinks festgelegt werden, was mit der Tabulator-Taste möglich ist. So können zum Beispiel unwichtige Links wie zum Beispiel Werbelinks und Ähnliches übersprungen werden.
- Sprungmenu (Skiplinks)
- Ein sogenannter Skiplink (Sprunglink) ist ein Hyperlink, der Dokumentintern auf den Inhalt verweist. So können zum Beispiel unwichtige Elemente wie Kopfzeile oder Navigation übersprungen werden, wenn ein Screenreader verwendet wird oder das Layout nicht geladen wird.
- Tastenkürzel (Accesskeys)
- Tastenkürzel (auch Tastaturkürzel) können Operationen ausführen, die normalerweise per Maus erledigt werden. So kann um Beispiel der Navigation der Accesskey 1 zugewiesen werden:
<ul accesskey="1"> <li>Startseite</li> <li>Dokumente</li> </ul>
- Interaktive Inhalte
- Interaktive Inhalte (z.B. durch Skripte realisiert) sollten immer nur ein Zusatz, niemals Voraussetzung zum Zugang zum 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
[Bearbeiten] Sprachattribute
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>
[Bearbeiten] Logische Struktur
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. Desweiteren sollten Überschriften hierarchisch verwendet werden, um die Verzweigung eines Elementes verständlicher zu machen.
[Bearbeiten] Aria Auszeichnungen
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 zu weisen. 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. Desweiteren ist die Skala von 0 bis 10 zu verstellen. Der aktuelle Wert beträgt 2 von 10 Punkten.
Für weitere Informationen:
