Märchen, Theorien und Praxis:

„Barrierefreies Webdesign“

Best of Accessibility Symposium – 25. September 2008

Zur Person

• Nils Pooker, 43 Jahre alt

• Webdesigner in Preetz (Schleswig-Holstein)

• Kunden: Freiberufler, Vereine, Unternehmen

• www.pookerart.de

www.webkrauts.de

... ab Ende November 2008

Barrierefreiheit bedeutet:

„Zugänglichkeit“

Behinderungen und Barrieren im Web

ca. 7 Millionen

Schwerbehinderte

600.000 Behinderte

Eingliederungshilfe nach SGB XII

350.000Sehbehinderte und

Blinde

• blind oder sehbehindert,

• motorisch behindert,

• gehörlos,

• oder kognitiv behindert.

Ein behinderter Mensch ist:

Quelle: Wikimedia

Quelle: Wikimedia

Barrierefreies Webdesign

„Zugängliche Webseiten“

Ältere MenschenBrillenträger

SuchmaschinenUnfallverletzteMigranten

Kinder

Behinderte

Behinderte

Behinderte

Ältere MenschenBrillenträger

SuchmaschinenUnfallverletzteMigranten

Kinder

Behinderte

Und was ist nunBarrierefreies Webdesign?

„Barrierefrei sind […] Systeme der Informationsverarbeitung […], wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.“

Behindertengleichstellungsgesetz

Barrierefreies Webdesign ermöglicht behinderten Menschen den Zugang zu den Inhalten einer Website.

Barrierefreies Webdesign ermöglicht behinderten Menschen den Zugang zu den Inhalten einer Website.

Das bedeutet: man vermeidet Barrieren, die den Zugang erschweren oder unmöglich machen.

• Inhalte müssen wahrnehmbar sein.

• Benutzerschnittstellen im Inhalt müssen bedienbar sein.

• Inhalte und Bedienelemente müssen verständlich sein.

• Inhalte sollten robust genug sein, um mit aktuellen und zukünftigen Benutzeragenten zu arbeiten (inklusive assistiver Hilfsmittel)

WCAG, 1999

BITV, 2002

Anlage 1

14 Anforderungen

Muss-, Soll- und Kann-Bestimmungen anhand von

Bedingungen

• Trennung von Inhalt und Design

• Volle Funktionalität auch ohne Javascript

• Ausreichende Farbkontraste

• Skalierbarkeit von Schriften und Layout

• Semantisch korrekte Auszeichnung der Inhalte

• Auszeichnung von Sprachwechseln

• Auszeichnung von Abkürzungen und Akronymen

• Sinnvoller Einsatz von Alternativtexten

• Verwendung sinnvoller Sprungmarken (Skip-Link-Möglichkeit)

• Navigation auch über die Tastatur (Pseudoklasse a:focus)

Web, 2008

Accessibilty =

valider Code?

Nicht alles zu kompliziert machen.

• Trennungen von Links (<span class=“hidden“>. </span>)

• Mehr als drei Sprungmarken

• „Foto:“ oder „Bild:“ in Alternativtexten

• Identischen Title-Angaben als Link-Ergänzung zu Alternativtexten

• Accesskeys und TAB-Index

Realitäten und Machbarkeiten.

Trotzdem, gerade deshalb:

weitermachen, weiterkämpfen, weiterstreiten!