Barrierefreies Webdesign. Überblick 1. Was bedeutet barrierefreies Webdesign? 2. Für wen ist Barrierefreiheit erforderlich? 3. Wer erstellt die Richtlinien?

Barrierefreies Webdesign

Überblick

1. Was bedeutet „barrierefreies Webdesign“?

2. Für wen ist Barrierefreiheit erforderlich?

3. Wer erstellt die Richtlinien?4. Welche Richtlinien gibt es?5. Wie sind die Richtlinien

umzusetzen?

1. Was bedeutet „barrierefreies Webdesign“?

engl. „Accessibility“ (Zugänglichkeit)

Webseiten so gestalten, dass sie von jedermann gelesen werden können

2. Für wen „barrierefreies Webdesign“?

Menschen mit Behinderungen• Blinde und Sehbehinderte

fehlende Texte zur Bildbeschreibung (Screenreader) unglückliche Farbkombinationen (Farbenblindheit)

• Menschen mit Muskel-, Gelenk- und Nervenerkrankung ausschließlich mausorientierte Navigation blinkende, flackernde Elemente(fotosensitive Epilepsie)

• Gehörlose

Audio-/ Videoelemente

20% der Surfer

2. Für wen „barrierefreies Webdesign“?

Benutzer mit textorientierten Browsern oder ausgeschalteter Grafikfunktion

Menschen mit Behinderungen

Surfer mit Palmtop oder Handy Gebiete mit niedrigen

Übertragungsraten Suchmaschinen, die wie textorientierte Browser arbeiten

3. Wer erstellt die Richtlinien?

• WAI (Web Accessibility Initiative) • Web Content Accessibility Guidelines (1999)

• wenden sich an Webgestalter, aber auch an Hersteller von Browsern, Editoren und Spezialsoftware

4. Welche Richtlinien gibt es?1. Wichtige Inhalte in auditiver + visueller Form

• Textalternativen für alle Elemente, die kein Text sind- Grafiken + grafische Buttons + grafische Texte- Imagemaps, Animationen, Programme, Frames- graph. Aufzählungszeichen- Audio, Video

z.B.: alt- Attribut zur Beschreibung von Funktionen visueller Elemente longdesc- Attribut für längere Beschreibungen in einem Zusatzdokument D-Link ( 1-Pixel-Grafik als Link)<IMG src=„umsatz2001.gif“alt=„Chart: Umsätze 2001“longdesc=„umsatz2001.htm“><A href=„umsatz2001.htm“><IMGsrc=„transparent.gif“ alt=„D-Link“width=„1“ height=„1“>

• Audiodeskription visueller Darbietungen

• Untertitel + Audiodeskription für Videospuren

Besonders gut zu lesen

sind: schwarz auf weißweiß auf rotweiß auf schwarzblau auf weißgelb auf blau

Zu vermeiden sind:orange - grüngelb – weißorange – rotrot – blauorange – gelbblau - orange

2. Farbgestaltung

• Text und Grafik auch ohne Farbe verständlich• Kontrast zw. Vorder- und Hintergrund (Farb-wahrnehmungsdefizite, Monochrom-Monitore)

www.vischeck.com/examples

3. Organisation der Seite

• Trennung von Struktur + Layout- Struktur mit Html- Layout mit CSS-Style Sheets

• Überschriften- und Listenelemente für Strukturierung

4. Kennzeichnung von Sprache und Abkürzungen

• Hauptsprache des Dokuments kennzeichnen

<html lang=„de“>Dieser Text wird im weiteren in deutsch interpretiert.</html>

• Sprachänderungen im Text kennzeichnen

<html lang=„de“><head>...</head><body> Und es wurde still im Saal. Dann sagte er: <SPAN lang=„en“>"I want to make money, not music!". Damit war klar, ....</SPAN></body></html>

• Abkürzungsbedeutung beim ersten Erscheinen angeben

5. Tabellengestaltung

• Spalten- und Reihenüberschriften in Datentabellen kennzeichnen

In Tabellen zu verwendende Elemente:TR (Tabellenreihe)TD (Tabellenzelle)TH (Tabellenkopf)CAPTION (Tabellenüberschrift)

• Tabellenzellen und Tabellenüberschriften verknüpfen

• Tabellen nicht zum Layout verwenden o. linearisieren

• Tabellenzusammenfassungen

summary-Attribut

6. Zugänglichkeit und Aktualisierung sichern

• Lesbarkeit auch ohne Style-Sheets

• Zugänglichkeit von dynamischen Inhalten

• Aktualisierung der Alternativen bei dynamischen Inhalten

• Anzeigbarkeit auch ohne Script- oder andere Programmierungen

• Event-Handler geräteunabhängig gestalten Tastaturalternative

7. Abstellbarkeit von Blinken und Autoaktualisierung

• Vermeiden von Bildschirmflackern, Blinken, anderer sich bewegender Elemente, Autoaktualisierung

• Sonst deren Anhalten und Abstellbarkeit sichern

Mit CSS arbeiten: Style=„text-decoration:blink“ Style-Sheets sind im Browser ausstellbar

8. Zugang zu Funktionen, Tastaturbedien-barkeit, Spracheingabe und - ausgabe sichern

9. Bedienbarkeit mit verschiedenen Gerätenz.B.• logische Tabulatorenreihenfolge für Links, Formularfelder und Objekte• Tastaturkürzel für wichtige Links

10. Zugänglichkeit für technische Hilfsmittel und ältere Browser

• Bezeichnungen von Formularen korrekt positionieren

• Bei Spaltenlayout von Texten linearisierte Alternativeanbieten

• Nebeneinander positionierte Links durch nicht-verlinkteZeichen trennen

• Textliche Platzhalter in editierbaren Formularfeldern anbieten

Screenreader können leere Eingabefelder In Formularen nicht ansteuern Textarea- und Input-Attribute verwenden

11. W3C-Richtlinien anwenden

12. Komplexe Seiten vereinfachen

13. Klare Navigation anbieten

z.B. • Deutliche Zielbenennung aller Links

• Metainformation zur jeweiligen Seite (z.B. Inhaltsverzeichnis)

• Themenverwandte Links in Gruppen zusammenfassen, benennen und überspringbar machen

15. Überprüfung der Barrierefreiheit mitautomatischen Werkzeugen und persönlicherDurchsicht

14. Vereinfachung von Dokumenten

4. Wie sind die Richtlinien umzusetzen?

1. Startseite und meistbesuchte Seiten an Priorität-1-Richtlinien anpassen

2. Neue Seiten sofort richtlinienkonform erstellen

3. Weiterte Bereiche der Website an Priorität-1-Richtlinien anpassen

4. Nachrangige Anforderungen ( Priorität 2, 3) anwenden

Ende der Präsentation

Documents

Barrierefreies Webdesign. Überblick 1. Was bedeutet barrierefreies Webdesign? 2. Für wen ist Barrierefreiheit erforderlich? 3. Wer erstellt die Richtlinien?