accessibility im internet
DESCRIPTION
Barrierefreies Webdesign nach W3C RichtlinenTRANSCRIPT
Webdesign Accessibility
Seite � / 46Webdesign A Version: 30.04.2009
Accessibility
Lars Messmer COMSOLIT GmbH
Seite 2 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Usability
Webdesign Accessibility
Seite 3 / 46Webdesign A Version: 30.04.2009
Was ist Web-Usability?
Benutzbarkeit / Funktionstauglichkeit
Brauchbarkeit / Nützlichkeit
Ergonomie / User Experience
Reliability (Zuverlässigkeit)
•
•
•
•
Seite 4 / 46Webdesign A Version: 30.04.2009
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 Accessibility
Seite � / 46Webdesign A Version: 30.04.2009
Wieso Usability?
Bessere Conversion
Höhere Ziele erreichen
Zufriedene Benutzer
Benutzung macht Freude
Weniger Supportkosten
•
•
•
•
•
Seite 6 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Accessibility
Webdesign Accessibility
Seite � / 46Webdesign A Version: 30.04.2009
Was ist Web-Accessibility?
Wenn Menschen mit
eingeschränkter Wahrnehmbarkeit
trotzdem
am Webangebot teilnehmen können
Seite � / 46Webdesign A Version: 30.04.2009
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 Accessibility
Seite 9 / 46Webdesign A Version: 30.04.2009
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
•
•
•
•
Seite �0 / 46Webdesign A Version: 30.04.2009
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 Accessibility
Seite �� / 46Webdesign A Version: 30.04.2009
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.)
•
•
•
•
•
•
Seite �2 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Richtlinien
Webdesign Accessibility
Seite �3 / 46Webdesign A Version: 30.04.2009
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
•
•
•
•
•
Seite �4 / 46Webdesign A Version: 30.04.2009
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 Accessibility
Seite �� / 46Webdesign A Version: 30.04.2009
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
•
•
•
•
•
•
Seite �6 / 46Webdesign A Version: 30.04.2009
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 Accessibility
Seite �� / 46Webdesign A Version: 30.04.2009
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.
•
•
•
Seite �� / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Welche Hilfsmittel werden benutzt?
Screenreader
Bedienung per Tastatur
Vergrösserungen (Schrift, Zoom, Lupe)
Braille Tastatur
•
•
•
•
Webdesign Accessibility
Seite �9 / 46Webdesign A Version: 30.04.2009
Best Practice
Seite 20 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Vorgehen Ablauf der Prüfungen und Massnahmen
Tastatur-eingabe
Screenreader Testperson
technisch valides HTML WAI
visuell
strukturell
funktionell
Webdesign Accessibility
Seite 2� / 46Webdesign A Version: 30.04.2009
Wichtigste Punkte
Klare Navigation
Verständliche Texte
Eindeutige Links
Alles mit der Tastatur bedienbar
Akronyme, Abkürzungen vermeiden (erklären)
Übersichtliche Struktur
Screenreader tauglich
•
•
•
•
•
•
•
Seite 22 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Grundlage
CSS Layout (kein Tabellenlayout)
W3C valider Code (strict, transitional, frameset)
Design / Lesbarkeit Erkennbarkeit
Lesbare Inhalte
•
•
•
•
Webdesign Accessibility
Seite 23 / 46Webdesign A Version: 30.04.2009
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 NavigationTextausrichtung immer Linksbündig korrekte Grammatik, guter Sprachstiel
•••••••
••••
Seite 24 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Ins Detail 2/2
Lesbarkeit Schriftgrösse, Zeilenabstand, SchriftartKorrekte Grammatik, guter SprachstielKorrekte und gut leserliche Textgestaltung (Unterstreichung, Links, kursiv, Schriftart)Semantische Gliederung der InhalteTabellen korrekt nach xhtml RichtlinienBilder mit Alt Tags versehen (Inhalt, Funktion des Bildes)Klar voneinander getrennte SchaltflächenFormulare (Label Tag, Tabstopp, Tastatur Bedienung)Video / Audio (Tastatur Bedienung, alternative Inhalte)Bei Captcha Audio anbieten
•••
•••••••
Webdesign Accessibility
Seite 2� / 46Webdesign A Version: 30.04.2009
Beispiel: generell HTML <... xml:lang=“de“ lang=“de“> <img src=“image.jpg“ alt=“Bildbeschreibung“ ... /> CSSp { font-size : �.�em; }.content-container { width . �00% }
Seite 26 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Beispiel: Navigation <ul> <li> <dfn>�</dfn> <a href=“...“>erster Navigationspunkt</a> <span class=“usb“>.</span> </li> <li> <dfn>2</dfn> <a href=“...“>zweiter Navigationspunkt</a> <span class=“usb“>.</span> </li> <li> <dfn>3</dfn> ...
Webdesign Accessibility
Seite 2� / 46Webdesign A Version: 30.04.2009
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.
Seite 2� / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Beispiel: verstecke Inhalte .hidden { position:absolute; left:-�000px; top:-�000px; width:0; height:0; overflow:hidden; display:inline; }
KEIN display: none;
Webdesign Accessibility
Seite 29 / 46Webdesign A Version: 30.04.2009
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“!
Seite 30 / 46Webdesign A Version: 30.04.2009
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 Accessibility
Seite 3� / 46Webdesign A Version: 30.04.2009
Beispiel: Video
Video nicht in Website einbetten (VideoPlayer sind besser bedienbar)Video mit Untertitel bereitstellenTextbeschreibung für Screenreader
•••
Seite 32 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Beispiel: Flash
Derzeit nur beschränkte Screenreader Unterstützung!
Alternative InhalteDesign: Farb- und KontrastgestaltungTastatursteuerung, TabstopsLabels bei ButtonsBildbeschreibungen, Text-AlternativenAlternativen für AudioKontrollmöglichkeiten bei Animationen
Tipp: Best Practices for Accessible Flash Design
•••••••
Webdesign Accessibility
Seite 33 / 46Webdesign A Version: 30.04.2009
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
•
•
•
•
Seite 34 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
CMS Einrichtung (TYPO3)
User zur Eingabe zwingen: Pflichtfelder z.B. Alt Tag
Webdesign Accessibility
Seite 3� / 46Webdesign A Version: 30.04.2009
CMS Einrichtung (TYPO3)
User zur Eingabe zwingen: Pflichtfelder z.B. Alt Tag
Seite 36 / 46Webdesign A Version: 30.04.2009
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 Accessibility
Seite 3� / 46Webdesign A Version: 30.04.2009
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
•
•
•
•
•
•
Seite 3� / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Checkliste Bund
Checkliste des Bundes - Checkliste „AccessabilityChecklist_v0�0_bf.pdf“
- Erleuterungen „AccessabilityChecklist-Erklaerungen_v0�0_bf.pdf“
Webdesign Accessibility
Seite 39 / 46Webdesign A Version: 30.04.2009
Web Checker
Cynthia •
Seite 40 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Web Checker
WAVE •
Webdesign Accessibility
Seite 4� / 46Webdesign A Version: 30.04.2009
Web Checker
Hera•
Seite 42 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Web Checker
FAE •
Webdesign Accessibility
Seite 43 / 46Webdesign A Version: 30.04.2009
WAI Checker
Software A-Prompt aDesigner (IBM) / JAWS
Browser Add-On Web-Developer Toolbar (Firefox) Web Accessibility Toolbar (IE)
Webtools Hera TAW WAVE FAE
•
•
•
Seite 44 / 46Webdesign A Version: 30.04.2009
Webdesign Accessibility
Screenreader
BlindowsWindow-EyesJAWSNVDA (Open Source)
Orca (Linux)brltty (Linux)ViaVoice (Linux)
VoiceOver (MAC built in)
Fire Vox (Firefox Add-On)Webformator (IE Add-On)
••••
•••
•
••
Webdesign Accessibility
Seite 4� / 46Webdesign A Version: 30.04.2009
Viel Erfolg
Seite 46 / 46Webdesign A Version: 30.04.2009
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 Linkshttp://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/