accessibility im internet

Webdesign Accessibility

Seite � / 46Webdesign A Version: 30.04.2009

Accessibility

Lars Messmer COMSOLIT GmbH

Seite 2 / 46Webdesign A Version: 30.04.2009


Usability



Was ist Web-Usability?

Benutzbarkeit / Funktionstauglichkeit

Brauchbarkeit / Nützlichkeit

Ergonomie / User Experience

Reliability (Zuverlässigkeit)

•

•

•

•



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)

...

•

•

•

•

•

•

•



Wieso Usability?

Bessere Conversion

Höhere Ziele erreichen

Zufriedene Benutzer

Benutzung macht Freude

Weniger Supportkosten

•

•

•

•

•



Accessibility



Was ist Web-Accessibility?

Wenn Menschen mit

eingeschränkter Wahrnehmbarkeit

trotzdem

am Webangebot teilnehmen können



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

•

•

•

•

•

•



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


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

•

•

•

•


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

•

•

•

•

•

•



Richtlinien



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

•

•

•

•

•



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)

•

•

•

•



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

•

•

•

•

•

•



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

•

•

•

•



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.

•

•

•



Welche Hilfsmittel werden benutzt?

Screenreader

Bedienung per Tastatur

Vergrösserungen (Schrift, Zoom, Lupe)

Braille Tastatur

•

•

•

•



Best Practice



Vorgehen Ablauf der Prüfungen und Massnahmen

Tastatur-eingabe

Screenreader Testperson

technisch valides HTML WAI

visuell

strukturell

funktionell


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

•

•

•

•

•

•

•



Grundlage

CSS Layout (kein Tabellenlayout)

W3C valider Code (strict, transitional, frameset)

Design / Lesbarkeit Erkennbarkeit

Lesbare Inhalte

•

•

•

•



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

•••••••

••••



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

•••

•••••••



Beispiel: generell HTML <... xml:lang=“de“ lang=“de“> <img src=“image.jpg“ alt=“Bildbeschreibung“ ... /> CSSp { font-size : �.�em; }.content-container { width . �00% }



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



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.



Beispiel: verstecke Inhalte .hidden { position:absolute; left:-�000px; top:-�000px; width:0; height:0; overflow:hidden; display:inline; }

KEIN display: none;



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“!



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)



Beispiel: Video

Video nicht in Website einbetten (VideoPlayer sind besser bedienbar)Video mit Untertitel bereitstellenTextbeschreibung für Screenreader

•••



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

•••••••



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

•

•

•

•



CMS Einrichtung (TYPO3)

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



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]

•

•

•

•

•



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

•

•

•

•

•

•



Checkliste Bund

Checkliste des Bundes - Checkliste „AccessabilityChecklist_v0�0_bf.pdf“

- Erleuterungen „AccessabilityChecklist-Erklaerungen_v0�0_bf.pdf“



Web Checker

Cynthia •



Web Checker

WAVE •



Web Checker

Hera•



Web Checker

FAE •



WAI Checker

Software A-Prompt aDesigner (IBM) / JAWS

Browser Add-On Web-Developer Toolbar (Firefox) Web Accessibility Toolbar (IE)

Webtools Hera TAW WAVE FAE

•

•

•



Screenreader

BlindowsWindow-EyesJAWSNVDA (Open Source)

Orca (Linux)brltty (Linux)ViaVoice (Linux)

VoiceOver (MAC built in)

Fire Vox (Firefox Add-On)Webformator (IE Add-On)

••••

•••

•

••



Viel Erfolg



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/

accessibility im internet

Technology