Accessibility im Internet

Webdesign Accessibility Accessibility Lars Messmer COMSOLIT GmbH Webdesign A Version: 30.04.2009 Seite / 46

Webdesign Accessibility Usability Webdesign A Version: 30.04.2009 Seite 2 / 46

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

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

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

Webdesign Accessibility Accessibility Webdesign A Version: 30.04.2009 Seite 6 / 46

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

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

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

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

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

Webdesign Accessibility Richtlinien Webdesign A Version: 30.04.2009 Seite 2 / 46

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

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

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

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

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

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

Webdesign Accessibility Best Practice Webdesign A Version: 30.04.2009 Seite 9 / 46

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

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

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

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

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

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

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 A Version: 30.04.2009 Seite 26 / 46

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

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

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

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

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

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

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

Webdesign Accessibility CMS Einrichtung (TYPO3) User zur Eingabe zwingen: Pflichtfelder z.B. Alt Tag Webdesign A Version: 30.04.2009 Seite 34 / 46

Webdesign Accessibility CMS Einrichtung (TYPO3) User zur Eingabe zwingen: Pflichtfelder z.B. Alt Tag Webdesign A Version: 30.04.2009 Seite 3 / 46

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

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

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

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 Add-On Web-Developer Toolbar (Firefox) Web Accessibility Toolbar (IE) • Webtools Hera TAW WAVE FAE Webdesign A Version: 30.04.2009 Seite 43 / 46

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

Webdesign Accessibility Viel Erfolg Webdesign A Version: 30.04.2009 Seite 4 / 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

Accessibility im Internet

by comsolit AG on Aug 13, 2009

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Accessibility im Internet Presentation Transcript