Barrierefreies Webdesign berblick 1 Was bedeutet barrierefreies 2
Barrierefreies Webdesign
Überblick 1. Was bedeutet „barrierefreies 2. 3. 4. 5. Webdesign“? Für wen ist Barrierefreiheit erforderlich? Wer erstellt die Richtlinien? Welche Richtlinien gibt es? 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 • Menschen mit Texte Muskel-, und Nervenerkrankung fehlende zur. Gelenk. Bildbeschreibung (Screenreader) ausschließlich. Farbkombinationen mausorientierte Navigation unglückliche • Gehörlose blinkende, flackernde Elemente (Farbenblindheit) Audio-/ Videoelemente (fotosensitive Epilepsie) 20% der Surfer
2. Für wen „barrierefreies Webdesign“? Menschen mit Behinderungen Benutzer mit textorientierten Browsern oder ausgeschalteter Grafikfunktion 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
1. 4. Wichtige Inhalte in auditiver + visueller Welche Richtlinien gibt es? Form • Textalternativen für alle Elemente, die kein Text sind -z. B. : Grafiken + grafische Buttons + grafische Texte alt- Attribut zur Beschreibung • Audiodeskription visueller Darbietungen -ØImagemaps, Animationen, Programme, Frames von Funktionen visueller Elemente -Øgraph. Aufzählungszeichen longdesc. Attribut für längere • Untertitel + Audiodeskription -Beschreibungen Audio, Video in einem für Videospuren Zusatzdokument Ø D-Link ( 1 -Pixel-Grafik als Link) <IMG src=„umsatz 2001. gif“ alt=„Chart: Umsätze 2001“ longdesc=„umsatz 2001. htm“> <A href=„umsatz 2001. htm“><IMG src=„transparent. gif“ alt=„D-Link“ width=„ 1“ height=„ 1“>
2. Farbgestaltung • Text und Grafik auch ohne Farbe verständlich • Kontrast zw. Vorder- und Hintergrund (Farbwahrnehmungsdefizite, Monochrom-Monitore) Besonders gut zu lesen sind: schwarz auf weiß auf rot weiß auf schwarz blau auf weiß gelb auf blau Zu vermeiden sind: orange - grün gelb – weiß orange – rot – blau orange – gelb blau - orange 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“> • Sprachänderungen kennzeichnen Dieser Text wirdim im. Text weiteren in deutsch interpretiert. </html> <html lang=„de“> beim ersten Erscheinen angeben • Abkürzungsbedeutung <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>
5. Tabellengestaltung • Spalten- und Reihenüberschriften in Datentabellen kennzeichnen In Tabellen zu verwendende Elemente: TR Tabellenüberschriften (Tabellenreihe) • TabellenzellenØund verknüpfen ØTD (Tabellenzelle) • Tabellen nicht Ø zum Layout verwenden o. linearisieren TH (Tabellenkopf) ØCAPTION (Tabellenüberschrift) • 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, Tastaturbedienbarkeit, Spracheingabe und - ausgabe sichern 9. Bedienbarkeit mit verschiedenen Geräten z. 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 Alternative anbieten • Nebeneinander positionierte Links durch nicht-verlinkte Zeichen trennen • Textliche Platzhalter in editierbaren Formularfeldern anbieten Screenreader können leere Eingabefelder In Formularen nicht ansteuern Textarea - und Input-Attribute verwenden
11. W 3 C-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
14. Vereinfachung von Dokumenten 15. Überprüfung der Barrierefreiheit mit automatischen Werkzeugen und persönlicher Durchsicht
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
- Slides: 19
