1 / 19

Barrierefreies Webdesign

Barrierefreies Webdesign. Überblick. Was bedeutet „barrierefreies 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“?.

aric
Télécharger la présentation

Barrierefreies Webdesign

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Barrierefreies Webdesign

  2. Überblick • Was bedeutet „barrierefreies Webdesign“? • Für wen ist Barrierefreiheit erforderlich? • Wer erstellt die Richtlinien? • Welche Richtlinien gibt es? • Wie sind die Richtlinien umzusetzen?

  3. 1. Was bedeutet „barrierefreies Webdesign“? • engl. „Accessibility“ (Zugänglichkeit) Webseiten so gestalten, dass sie von jedermann gelesen werden können

  4. 2. Für wen „barrierefreies Webdesign“? • Menschen mit Behinderungen • Blinde und Sehbehinderte • Menschen mit Muskel-, Gelenk- und Nervenerkrankung • fehlende Texte zur Bildbeschreibung (Screenreader) • unglückliche Farbkombinationen (Farbenblindheit) • ausschließlich mausorientierte Navigation • blinkende, flackernde Elemente (fotosensitive Epilepsie) • Gehörlose  Audio-/ Videoelemente  20% der Surfer

  5. 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

  6. 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

  7. 4. Welche Richtlinien gibt es? 1. Wichtige Inhalte in auditiver + visueller Form • Textalternativen für alle Elemente, die kein Text sind • 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“><IMG src=„transparent.gif“ alt=„D-Link“ width=„1“ height=„1“> • Grafiken + grafische Buttons + grafische Texte • Imagemaps, Animationen, Programme, Frames • graph. Aufzählungszeichen • Audio, Video • Audiodeskription visueller Darbietungen • Untertitel + Audiodeskription für Videospuren

  8. Besonders gut zu lesen sind: schwarz auf weiß weiß auf rot weiß auf schwarz blau auf weiß gelb auf blau Zu vermeiden sind: orange - grün gelb – weiß orange – rot rot – blau orange – gelb blau - orange 2. Farbgestaltung • Text und Grafik auch ohne Farbe verständlich • Kontrast zw. Vorder- und Hintergrund (Farb- • wahrnehmungsdefizite, Monochrom-Monitore)  www.vischeck.com/examples

  9. 3. Organisation der Seite • Trennung von Struktur + Layout • - Struktur mit Html • - Layout mit CSS-Style Sheets • Überschriften- und Listenelemente für Strukturierung

  10. 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“>&quot;I want to make money, not music!&quot;. Damit war klar, ....</SPAN> </body> </html> • Abkürzungsbedeutung beim ersten Erscheinen angeben

  11. 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

  12. 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

  13. 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

  14. 8. Zugang zu Funktionen, Tastaturbedien- barkeit, 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

  15. 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

  16. 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

  17. 14. Vereinfachung von Dokumenten 15. Überprüfung der Barrierefreiheit mit automatischen Werkzeugen und persönlicher Durchsicht

  18. 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

  19. Ende der Präsentation

More Related