Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Accessibility im Internet

2.033 Aufrufe

Veröffentlicht am

Barrierefreies Webdesign nach W3C Richtlinen

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Accessibility im Internet

  1. 1. Webdesign Accessibility Accessibility Lars Messmer COMSOLIT GmbH Webdesign A Version: 30.04.2009 Seite / 46
  2. 2. Webdesign Accessibility Usability Webdesign A Version: 30.04.2009 Seite 2 / 46
  3. 3. Webdesign Accessibility Was ist Web-Usability? • Benutzbarkeit / Funktionstauglichkeit • Brauchbarkeit / Nützlichkeit • Ergonomie / User Experience • Reliability (Zuverlässigkeit) Webdesign A Version: 30.04.2009 Seite 3 / 46
  4. 4. Webdesign Accessibility Was zeichnet gute Web-Usability aus? • Sinnvoll (Mehrnutzen, Arbeitserleichterung) • Benutzerfreundlich (Hilfestellungen, alternative Möglichkeiten) • Bedürfnissgerecht / Zielgruppengerecht • Gutes Screendesign (fokusiert, strukturiert, Wahrnehmung) • Effektiv und effizient (Zeit sparen, Fehler vermeiden) • Gute Verfügbarkeit (Zuverlässigkeit, Performance) • ... Webdesign A Version: 30.04.2009 Seite 4 / 46
  5. 5. Webdesign Accessibility Wieso Usability? • Bessere Conversion • Höhere Ziele erreichen • Zufriedene Benutzer • Benutzung macht Freude • Weniger Supportkosten Webdesign A Version: 30.04.2009 Seite / 46
  6. 6. Webdesign Accessibility Accessibility Webdesign A Version: 30.04.2009 Seite 6 / 46
  7. 7. Webdesign Accessibility Was ist Web-Accessibility? Wenn Menschen mit eingeschränkter Wahrnehmbarkeit trotzdem am Webangebot teilnehmen können Webdesign A Version: 30.04.2009 Seite / 46
  8. 8. Webdesign Accessibility Wahrnehmbarkeitdefizite • Blinde Menschen können z. B. Bilder nicht erkennen benötigen Sprachausgabe oder Braille Tastatur • Menschen mit Sehschwäche können eine kleine Schrift kaum erkennen • Personen mit einer Farbfehlsichtigkeit (Farbenblind) • Kognitive Einschränkungen brauchen einfach verständliche Inhalte • Personen mit Spastiken können keine Maus bedienen benötigen alternative Eingabeberäte, Sprachsteuerung • Gehörlose Menschen können kein Audio verstehen Webdesign A Version: 30.04.2009 Seite / 46
  9. 9. Webdesign Accessibility Wieso Web-Accessibility? • Staatliche und öffentlich zugängliche Webangebote müssen barrierefreien Zugang gewährleisten Behindertengleichstellungsgesetzes BITV 2005 (D), BehiG 2004 (CH) Post, Bahn, Städte, Kanton, Institutionen etc. • Wettbewerbsvorteile • Mehrwert des Webangebotes • Grössere Reichweite Webdesign A Version: 30.04.2009 Seite 9 / 46
  10. 10. Webdesign Accessibility Web-Usability und Web-Accessibility • Usability ist keine Vorstufe von Accessibility • Usability Werkzeuge können Probleme verursachen Dropdown Menus (Trend Mega-Menus) Grafische Usability Hilfselemente (Pfeile, Farbabstufungen) • Automatisierte Abläufe im Hintergrund (AJAX, Flash) bereiten Probleme • Deshalb, gemeinsame Faktoren ausbauen Webdesign A Version: 30.04.2009 Seite 0 / 46
  11. 11. Webdesign Accessibility Gemeinsame Faktoren • Angebot leicht verständlich gestalten • Einfache Handhabung, schnell erkennbare Wege • Gutes Screendesign (Struktur, Fokus) • Wahrnehmbarkeit, Lesbarkeit • Hilfestellungen, Hilfunktionen anbieten • Verfügbarkeit (valider Code etc.) Webdesign A Version: 30.04.2009 Seite / 46
  12. 12. Webdesign Accessibility Richtlinien Webdesign A Version: 30.04.2009 Seite 2 / 46
  13. 13. Webdesign Accessibility Richtlinien • Section 508 (veraltets US Gesetz) • WAI (Web Accessibility Initiative) des W3C • WCAG 1.0, BITV und BehiG basieren noch darauf • WCAG aktuelle V 2.0 W3C Web Content Accessibility Guidelines (12/2008) Version 2.0 beinhaltet jetzt auch Flash und JavaScript • ARIA (Accessible Rich Internet Applications) ist in Arbeit Webdesign A Version: 30.04.2009 Seite 3 / 46
  14. 14. Webdesign Accessibility Inhalt WCAG 2.0 • Wahrnehmbarkeit (Textalternativen für Bilder, Untertitel für Audio, Anpassbarkeit der Darstellung und Farbkontraste) • Bedienbarkeit (Tastaturbedienung, Eingaben, Fehler und die Navigierbarkeit) • Verständlichkeit (Lesbarkeit, Vorhersagbarkeit und Hilfen bei der Eingabe) • Robustheit (Durch Kompatibilität mit assistierenden Technologien) Webdesign A Version: 30.04.2009 Seite 4 / 46
  15. 15. Webdesign Accessibility was ist neu in 2.0 • Spricht ein breiteres Publikum an (nicht nur Webdesigner) • Ist technologie-neutral, nicht mehr HTML orientiert • Kompatibel für zukünftige Technologien • Zum Teil neue oder andere Anforderungen • Nicht mehr so technisch, mehr Fokus auf Verständlichkeit • Von 14 auf 5 Punkte zusammengefasst Webdesign A Version: 30.04.2009 Seite / 46
  16. 16. Webdesign Accessibility WAI Labels • A/AA/AAA Grundlage WAI (W3C) • Stiftung Access-for-all vergibt Label / macht Prüfung in der Schweiz Beinhaltet auch Usertests (Web for All in Deutschland) • Zertifizierungskosten 2000.- bis 3000.- • Beispiele: post.ch, efd.admin.ch, sh.ch.... Webdesign A Version: 30.04.2009 Seite 6 / 46
  17. 17. Webdesign Accessibility WAI Label Definitonen •A Die Erfüllung dieses Checkpunkts ist ein grundlegendes Erfordernis, damit bestimmte Gruppen Web-Dokumente verwenden können. • AA Die Erfüllung dieses Checkpunkts beseitigt signifikante Hindernisse für den Zugriff auf Web-Dokumente. • AAA Die Erfüllung dieses Checkpunkts erleichtert den Zugriff auf Web-Dokumente. Webdesign A Version: 30.04.2009 Seite / 46
  18. 18. Webdesign Accessibility Welche Hilfsmittel werden benutzt? • Screenreader • Bedienung per Tastatur • Vergrösserungen (Schrift, Zoom, Lupe) • Braille Tastatur Webdesign A Version: 30.04.2009 Seite / 46
  19. 19. Webdesign Accessibility Best Practice Webdesign A Version: 30.04.2009 Seite 9 / 46
  20. 20. Webdesign Accessibility Vorgehen Ablauf der Prüfungen und Massnahmen visuell Tastatur- technisch eingabe strukturell valides HTML Screenreader funktionell WAI Testperson Webdesign A Version: 30.04.2009 Seite 20 / 46
  21. 21. Webdesign Accessibility Wichtigste Punkte • Klare Navigation • Verständliche Texte • Eindeutige Links • Alles mit der Tastatur bedienbar • Akronyme, Abkürzungen vermeiden (erklären) • Übersichtliche Struktur • Screenreader tauglich Webdesign A Version: 30.04.2009 Seite 2 / 46
  22. 22. Webdesign Accessibility Grundlage • CSS Layout (kein Tabellenlayout) • W3C valider Code (strict, transitional, frameset) • Design / Lesbarkeit Erkennbarkeit • Lesbare Inhalte Webdesign A Version: 30.04.2009 Seite 22 / 46
  23. 23. Webdesign Accessibility Ins Detail 1/2 • Korrekte Metatags (Sprache) • Tabstopps (Sprungmarken) • Screenreader tauglich texten (Punkte auch bei Navigationspunkten) • Logische, einheitliche und konsistente Navigation (Aufzählung der Punkte) • Accesskeys (Globale Navigation) • Design (Kontrast, Kritische Farbkombination) • Menüpunkte, Links Kennzeichnen (neue Fenster nur nach Ankündigung öffnen) • Nice URL (URL wird von Screenreader vorgelesen) • Akronyme, Fachwörter, Fremdwörter, Abkürzungen erklären (Tooltip) • Breadcrumb Navigation • Textausrichtung immer Linksbündig korrekte Grammatik, guter Sprachstiel Webdesign A Version: 30.04.2009 Seite 23 / 46
  24. 24. Webdesign Accessibility Ins Detail 2/2 • Lesbarkeit Schriftgrösse, Zeilenabstand, Schriftart • Korrekte Grammatik, guter Sprachstiel • Korrekte und gut leserliche Textgestaltung (Unterstreichung, Links, kursiv, Schriftart) • Semantische Gliederung der Inhalte • Tabellen korrekt nach xhtml Richtlinien • Bilder mit Alt Tags versehen (Inhalt, Funktion des Bildes) • Klar voneinander getrennte Schaltflächen • Formulare (Label Tag, Tabstopp, Tastatur Bedienung) • Video / Audio (Tastatur Bedienung, alternative Inhalte) • Bei Captcha Audio anbieten Webdesign A Version: 30.04.2009 Seite 24 / 46
  25. 25. Webdesign Accessibility Beispiel: generell HTML ... xml:lang=“de“ lang=“de“ img src=“image.jpg“ alt=“Bildbeschreibung“ ... / CSS p { font-size : .em; } .content-container { width . 00% } Webdesign A Version: 30.04.2009 Seite 2 / 46
  26. 26. Webdesign Accessibility Beispiel: Navigation ul li dfn/dfn a href=“...“erster Navigationspunkt/a span class=“usb“./span /li li dfn2/dfn a href=“...“zweiter Navigationspunkt/a span class=“usb“./span /li li dfn3/dfn ... Webdesign A Version: 30.04.2009 Seite 26 / 46
  27. 27. Webdesign Accessibility Beispiel: Formular form fieldset div label for=“Vorname“firma/label input type=“text“ id=“Vorname“ ... tabindex=““ / /div div label for=“Nachname“firma/label input type=“text“ id=“Nachname“ ... tabindex=“2“ / /div ... Achtung bei Formularprüfung! am besten Fehlerseite verwenden. Webdesign A Version: 30.04.2009 Seite 2 / 46
  28. 28. Webdesign Accessibility Beispiel: verstecke Inhalte .hidden { position:absolute; left:-000px; top:-000px; width:0; height:0; overflow:hidden; display:inline; } KEIN display: none; Webdesign A Version: 30.04.2009 Seite 2 / 46
  29. 29. Webdesign Accessibility Probleme mit dynamischen Inhalten ARIA (Accessible Rich Internet Applications) role=“toolbar“ (role taxonomy) Für Eigenschaften, Zustände etc. ARIA hilft die Probleme zu verstehen und Accessibility-Erweiterungen zu integrieren, ARIA Lösungen können von spezieller Hard- und Soft- ware verarbeitet werden. Nachteil Browser, und die Spezial-Soft- und Hardware müssen ARIA unterstützen. ARIA ist immer noch „Working Draft“! Webdesign A Version: 30.04.2009 Seite 29 / 46
  30. 30. Webdesign Accessibility Beispiel: JavaScript / AJAX AJAX funktioniert auch bei ausgeschaltetem JavaScript Workaround z.B. Problem „automatische Updates in Content“ - EventHandler (onclick) - Focus auf den Response legen - Response in Form-Elemente verpacken - Inhalte in Layer vorladen - Content per CSS verbergen (- Alerts verwenden) Webdesign A Version: 30.04.2009 Seite 30 / 46
  31. 31. Webdesign Accessibility Beispiel: Video • Video nicht in Website einbetten (VideoPlayer sind besser bedienbar) • Video mit Untertitel bereitstellen • Textbeschreibung für Screenreader Webdesign A Version: 30.04.2009 Seite 3 / 46
  32. 32. Webdesign Accessibility Beispiel: Flash Derzeit nur beschränkte Screenreader Unterstützung! • Alternative Inhalte • Design: Farb- und Kontrastgestaltung • Tastatursteuerung, Tabstops • Labels bei Buttons • Bildbeschreibungen, Text-Alternativen • Alternativen für Audio • Kontrollmöglichkeiten bei Animationen Tipp: Best Practices for Accessible Flash Design Webdesign A Version: 30.04.2009 Seite 32 / 46
  33. 33. Webdesign Accessibility Beispiel PDF PDF Dokumente können durch Tags barrierefrei gestaltet werden • Angabe der Sprache • Alt Tags für Bilder • Korrekte Auszeichnung von Link • Navigation, Lesezeichen Tipp: Creating Accessible PDF Documents Webdesign A Version: 30.04.2009 Seite 33 / 46
  34. 34. Webdesign Accessibility CMS Einrichtung (TYPO3) User zur Eingabe zwingen: Pflichtfelder z.B. Alt Tag Webdesign A Version: 30.04.2009 Seite 34 / 46
  35. 35. Webdesign Accessibility CMS Einrichtung (TYPO3) User zur Eingabe zwingen: Pflichtfelder z.B. Alt Tag Webdesign A Version: 30.04.2009 Seite 3 / 46
  36. 36. Webdesign Accessibility TYPO3 Extentions • RealURL: URLs like normal websites [realurl] • Accessible Menus [cron_accessiblemenus] • Accessibility Glossary [a21glossary] oder [sb_akronymmanager] • Formular [powermail] oder [th_mailformplus] • Accessible Form Validation [accessible_form_validation] Webdesign A Version: 30.04.2009 Seite 36 / 46
  37. 37. Webdesign Accessibility Schulung Website Redaktor schulen • Verständnis für die Problematik erwerben • Texte verständlich formulieren • Korrekte Verlinkung erlernen • Hilfsmittel im CMS erlernen (Glossar, Accesskeys, Tabstopps etc.) • Workflow nutzen • Controlling und Access-Tools nutzen Webdesign A Version: 30.04.2009 Seite 3 / 46
  38. 38. Webdesign Accessibility Checkliste Bund Checkliste des Bundes - Checkliste „AccessabilityChecklist_v00_bf.pdf“ - Erleuterungen „AccessabilityChecklist-Erklaerungen_v00_bf.pdf“ Webdesign A Version: 30.04.2009 Seite 3 / 46
  39. 39. Webdesign Accessibility Web Checker • Cynthia Webdesign A Version: 30.04.2009 Seite 39 / 46
  40. 40. Webdesign Accessibility Web Checker • WAVE Webdesign A Version: 30.04.2009 Seite 40 / 46
  41. 41. Webdesign Accessibility Web Checker • Hera Webdesign A Version: 30.04.2009 Seite 4 / 46
  42. 42. Webdesign Accessibility Web Checker • FAE Webdesign A Version: 30.04.2009 Seite 42 / 46
  43. 43. Webdesign Accessibility WAI Checker • Software A-Prompt aDesigner (IBM) / JAWS • Browser Add-On Web-Developer Toolbar (Firefox) Web Accessibility Toolbar (IE) • Webtools Hera TAW WAVE FAE Webdesign A Version: 30.04.2009 Seite 43 / 46
  44. 44. Webdesign Accessibility Screenreader • Blindows • Window-Eyes • JAWS • NVDA (Open Source) • Orca (Linux) • brltty (Linux) • ViaVoice (Linux) • VoiceOver (MAC built in) • Fire Vox (Firefox Add-On) • Webformator (IE Add-On) Webdesign A Version: 30.04.2009 Seite 44 / 46
  45. 45. Webdesign Accessibility Viel Erfolg Webdesign A Version: 30.04.2009 Seite 4 / 46
  46. 46. Webdesign Accessibility Tipps / Links Infos http://www.access-for-all.ch/ http://www.webforall.info/ PDF Checklisten http://www.access-for-all.ch/checklist/ W3C Links http://www.w3.org/WAI/WCAG20/ http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/ http://www.w3.org/TR/wai-aria-practices/ http://www.w3.org/WAI/ER/tools/Overview Adobe best practice für Flash und PDF http://www.adobe.com/de/accessibility/ WAI Checker http://wave.webaim.org/ http://www.sidar.org/hera http://fae.cita.uiuc.edu/ Webdesign A Version: 30.04.2009 Seite 46 / 46

×