Webdesign
Accessibility




                                      Accessibility
                                          ...
Webdesign
Accessibility




                                      Usability



Webdesign A     Version: 30.04.2009        ...
Webdesign
Accessibility



     Was ist Web-Usability?


     • Benutzbarkeit / Funktionstauglichkeit

     • Brauchbarkei...
Webdesign
Accessibility



     Was zeichnet gute Web-Usability aus?


     • Sinnvoll (Mehrnutzen, Arbeitserleichterung)
...
Webdesign
Accessibility



     Wieso Usability?


     • Bessere Conversion

     • Höhere Ziele erreichen

     • Zufrie...
Webdesign
Accessibility




                                      Accessibility



Webdesign A     Version: 30.04.2009    ...
Webdesign
Accessibility



     Was ist Web-Accessibility?


                                       Wenn Menschen mit

   ...
Webdesign
Accessibility



     Wahrnehmbarkeitdefizite


     • Blinde Menschen können z. B. Bilder nicht erkennen
      ...
Webdesign
Accessibility



     Wieso Web-Accessibility?


     • Staatliche und öffentlich zugängliche Webangebote müssen...
Webdesign
Accessibility



     Web-Usability und Web-Accessibility


     • Usability ist keine Vorstufe von Accessibilit...
Webdesign
Accessibility



     Gemeinsame Faktoren


     • Angebot leicht verständlich gestalten

     • Einfache Handha...
Webdesign
Accessibility




                                      Richtlinien



Webdesign A     Version: 30.04.2009      ...
Webdesign
Accessibility



     Richtlinien


     • Section 508 (veraltets US Gesetz)

     • WAI (Web Accessibility Init...
Webdesign
Accessibility



     Inhalt WCAG 2.0


     • Wahrnehmbarkeit
       (Textalternativen für Bilder, Untertitel f...
Webdesign
Accessibility



     was ist neu in 2.0


     • Spricht ein breiteres Publikum an (nicht nur Webdesigner)

   ...
Webdesign
Accessibility



     WAI Labels


     • A/AA/AAA
       Grundlage WAI (W3C)


     • Stiftung Access-for-all
 ...
Webdesign
Accessibility



     WAI Label Definitonen


     •A
      Die Erfüllung dieses Checkpunkts ist ein grundlegend...
Webdesign
Accessibility



     Welche Hilfsmittel werden benutzt?


     • Screenreader


     • Bedienung per Tastatur

...
Webdesign
Accessibility




                                      Best Practice



Webdesign A     Version: 30.04.2009    ...
Webdesign
Accessibility



     Vorgehen

     Ablauf der Prüfungen und Massnahmen




                       visuell     ...
Webdesign
Accessibility



     Wichtigste Punkte


     • Klare Navigation

     • Verständliche Texte

     • Eindeutige...
Webdesign
Accessibility



     Grundlage


     • CSS Layout (kein Tabellenlayout)

     • W3C valider Code (strict, tran...
Webdesign
Accessibility



     Ins Detail 1/2


     •   Korrekte Metatags (Sprache)
     •   Tabstopps (Sprungmarken)
  ...
Webdesign
Accessibility



     Ins Detail 2/2


     • Lesbarkeit Schriftgrösse, Zeilenabstand, Schriftart
     • Korrekt...
Webdesign
Accessibility



     Beispiel: generell


     HTML
     ... xml:lang=“de“ lang=“de“
     img src=“image.jpg“ a...
Webdesign
Accessibility



     Beispiel: Navigation

     ul
        li
            dfn/dfn
            a href=“...“erste...
Webdesign
Accessibility



     Beispiel: Formular

     form
        fieldset
            div
                label for=“...
Webdesign
Accessibility



     Beispiel: verstecke Inhalte

     .hidden {
         position:absolute;
         left:-000...
Webdesign
Accessibility



     Probleme mit dynamischen Inhalten

     ARIA (Accessible Rich Internet Applications)

    ...
Webdesign
Accessibility



     Beispiel: JavaScript / AJAX

     AJAX funktioniert auch bei ausgeschaltetem JavaScript

 ...
Webdesign
Accessibility



     Beispiel: Video

     • Video nicht in Website einbetten (VideoPlayer sind besser bedienba...
Webdesign
Accessibility



     Beispiel: Flash

     Derzeit nur beschränkte Screenreader Unterstützung!

     •   Altern...
Webdesign
Accessibility



     Beispiel PDF


     PDF Dokumente können durch Tags barrierefrei gestaltet werden

     • ...
Webdesign
Accessibility



     CMS Einrichtung (TYPO3)




     User zur Eingabe zwingen:
     Pflichtfelder z.B. Alt Tag...
Webdesign
Accessibility



     CMS Einrichtung (TYPO3)




     User zur Eingabe zwingen:
     Pflichtfelder z.B. Alt Tag...
Webdesign
Accessibility



     TYPO3 Extentions


     • RealURL: URLs like normal websites [realurl]

     • Accessible ...
Webdesign
Accessibility



     Schulung


     Website Redaktor schulen

     • Verständnis für die Problematik erwerben
...
Webdesign
Accessibility



     Checkliste Bund


     Checkliste des Bundes


              - Checkliste
              „A...
Webdesign
Accessibility



     Web Checker

     • Cynthia




Webdesign A     Version: 30.04.2009   Seite 39 / 46
Webdesign
Accessibility



     Web Checker

     • WAVE




Webdesign A     Version: 30.04.2009   Seite 40 / 46
Webdesign
Accessibility



     Web Checker

     • Hera




Webdesign A     Version: 30.04.2009   Seite 4 / 46
Webdesign
Accessibility



     Web Checker

     • FAE




Webdesign A     Version: 30.04.2009   Seite 42 / 46
Webdesign
Accessibility



     WAI Checker

     • Software
       A-Prompt
       aDesigner (IBM) / JAWS

     • Browser...
Webdesign
Accessibility



     Screenreader

     •   Blindows
     •   Window-Eyes
     •   JAWS
     •   NVDA (Open Sou...
Webdesign
Accessibility




                                      Viel Erfolg



Webdesign A     Version: 30.04.2009      ...
Webdesign
Accessibility



     Tipps / Links

     Infos
     http://www.access-for-all.ch/
     http://www.webforall.inf...
Upcoming SlideShare
Loading in …5
×

Accessibility im Internet

1,898 views
1,793 views

Published on

Barrierefreies Webdesign nach W3C Richtlinen

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,898
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×