Web Accessibility Grundlagen Andreas Jeitler, Bakk.techn. Mark Wassermann HTL Villach, 16.11. 2009
Barrierefrei, was soll das sein? Accessibility Access = Zugriff auf etwas haben (Informationen) Barrierefreiheit Keine Barrieren beim Zugriff (auf Informationen) Eher Barrierearm DAS barrierefreie Angebot gibt es nicht.
Usability vs. Accessibility Usability: ISO-Norm 9241: Das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen Accessibility ist Usability für mehr Personen in mehr Situationen
Usability beim aktuellen Projekt Ziel: Informationen finden effektiv, effizient und zufriedenstellend Gilt das auch für Menschen mit Behinderungen? BenutzerInnen: Betroffene, Organisationen, Presse Kontext: Hilfsmittel, Smartphones
Weitere Usability Fragen Tasks auch für MmB durchführbar? Sind auch MmB als Personas berücksichtigt? Sind User-Tests mit MmB eingeplant?
Blinde Menschen Beeinträchtigung: Keine Graphiken, Animationen wahrnehmen Eingabe nur mit Tastatur Keine Maus Hilfsmittel: Braillezeile (Taktil) Immer nur eine Zeile Lesen Webseiten sequenziell Screen Reader (Audio)
Personen mit Sehbeeinträchtigung Beeinträchtigung Kurzsichtigkeit Vergrößerung nötig Eingeschränkte Sicht (tunnelblick) Probleme mit Farben Farbblindheit (Rot/Grün) Hoher Kontrast nötig Hilfsmittel Vergrößerungsprogramme Screen Reader Verwenden Maus, aber auch viele Tastenkürzel
Gehörlose Menschen Beeinträchtigung: Kommunizieren in Gebärdensprache Deutsch ist nicht die Muttersprache Gehörlose Menschen lesen nur schwer Anforderungen an Website: Einfache Sprache Gebärdensprache-Videos
Schwerhörige Menschen Beeinträchtigung: Im Web verhältnismäßig wenig Probleme Probleme bei Audio-gestützten Systemen Schlecht hören!= leise hören Anforderungen an Website: Wenn Audio, dann Textalternativen Lautstärke einstellbar
Menschen mit Lernschwierigkeiten Beeinträchtigung: Lernen langsamer Verstehen komplizierte Texte schwerer z.b. Dyslexie / Legastenie Anforderungen an Website: Texte in Leichter Sprache Viele Bilder Gute und einfache Strukturierung
Motorische Beeinträchtigungen Beeinträchtigung Können Arme, Beine etc. nur eingeschränkt benutzen RollstuhlfahrerInnen Anforderungen an Website Tastatureingabe Große Schaltflächen Spracheingabe Besondere Eingabegeräte
Und wer noch? Ganz Normale Nutzer Mobile Devices Interaktives TV Mikrowelle mit Internetzugang Suchmaschinen Semantisches Web
WCAG
4 Prinzipien Wahrnehmbar Bedienbar Verständlich Robust 12 Richtlinien innerhalb der Prinzipien 61 Erfolgskriterien zum erreichen der 12 Richtlinien
Techniken General (allgemein) G HTML H CSS C Client Side Scripting SCR Servier Side Scripting SVR SMIL SM Plain Text - T ARIA - ARIA Common Failures (häufige Fehler) - F Andreas Jeitler,
Prinzip 1: Wahrnehmbar Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können. Erklärung: Alle Teile eines Webangebotes müssen für ALLE NutzerInnen wahrnehmbar sein.
1.1: Textalternativen Stelle Textalternativen für alle Nicht- Text-Inhalte zur Verfügung, Alles was nicht Text ist, soll auch als Text dargestellt werden können. Bilder Diagramme Videos Audio
1.2: Zeitbasierte Medien Stelle Alternativen für zeitbasierte Medien zur Verfügung. Textalternativen Audiodeskription von Video Untertitel Gebärdensprache Video Zwei Sinne Prinzip Audio und Video
1.3: Anpassbar Erstelle Inhalte, die auf verschiedene Arten dargestellt werden können, ohne dass Informationen oder Struktur verloren gehen. Struktur des Inhalts nicht nur visuell, sondern auch logisch.
Trennung von Inhalt und Layout HTML bietet Strukturierungsmöglichkeiten für den Inhalt Überschriften: h1.. h3 Listen: ul, ol, dl Inhalt und Struktur in HTML Layout in CSS
Tabellen Nicht für Layout verwenden Reihenfolge und Textfluss passen oft nicht Bsp: Formulare mit Labels in erster Zeile Tabellen-Header (th) einsetzen Und mit einzelnen Zellen verbinden Screen Reader lesen header zu jeder Zelle
1.4: Unterscheidbar Mache es Benutzern leichter, Inhalt zu sehen und zu hören einschließlich der Trennung von Vorder- und Hintergrund. Farbe Kontrast Audio Textgröße (bis 200%) Bilder eines Textes
1.4. (2): Farben und Kontraste Verlass Dich nicht auf Farben allein! Den grünen Knopf drücken. Links auswählen nur durch Farbänderung Prüfung im reinen S/W Modus Kontrast von Vorder- und Hintergrundfarbe Sollte möglichst hoch sein. Kann durch Analyseprogramme geprüft werden.
Prinzip 2: Bedienbar Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.
2.1: Mit Tastatur bedienbar Sorge dafür, dass alle Funktionalitäten per Tastatur zugänglich sind. Alle Funktionen auch mit Tastatur Keine Tastaturfallen
2.2: Ausreichend Zeit Benutzer muss auf Zeiteinteilung Einfluss nehmen können
2.3: Anfälle Gestalte Inhalte nicht auf Arten, von denen bekannt ist, dass sie zu Anfällen führen. Kein Blitzen und Flimmern Blinkender Text
2.4: Navigierbar Blöcke umgehen Seite mit Titel versehen Fokus-Reihenfolge Linkzweck (Im Kontext) Mehr Links Screen Reader listen alle Links einer Seite auf Skip over Navigation Links Sitemap Suchfunktion
Prinzip 3: Verständlich Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.
3.1: Lesbar Mache Inhalt lesbar und verständlich. Dokumentsprache definieren: z.b. <html lang= de > Fremdwörter mit z.b. lang=en anzeigen Screen Reader lesen sonst falsch Abkürzungen: ABBR und ACRONYM Für Menschen mit Lernschwierigkeiten Leseniveau: Einfache Sprache
Einfache Sprache Verwendung einfacher Sprache Klare Formulierungen Kurze Sätze Text strukturieren (Absätze) Ein Gedanke pro Absatz
3.2: Vorhersehbar Sorge dafür, dass Webseiten vorhersehbar aussehen und funktionieren.
3.3: Hilfestellung bei der Eingabe Hilf den Benutzern dabei, Fehler zu vermeiden und zu korrigieren. Fehlererkennung Beschriftungen oder Anweisungen Hilfe
Prinzip 4: Robust Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.
4.1: Kompatibel Maximiere die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken. Syntaktisch korrekter (valider) Code Name, Rolle, Wert Für Scripts und eigene Bedienelemente Standar-HTML-Steierelemente erfüllen dies bereits
Evaluierungsschritte Überblick über die Struktur der Site verschaffen Auswahl von geeigneten Seiten innerhalb der Site Testen mit Werkzeugen (automatische Tests) Validität des Source-Codes prüfen Überprüfen der Richtlinien-Konformität Manuelle Tests Erstellen eines Berichts
Verwendete Screenreader JAWS 75.2% Window Eyes 23.5% VoiceOver 14.6% System Access 22.3% NVDA 25.6% ZoomText 7.5% Supernova 2.7% Hal 2.7% Other 7.7% Quelle: http://webaim.org/projects/screenreadersurvey2/
Probleme in der Praxis 1. CAPTCHA Bild mit Text zur Überprüfung ob Benutzer menschlich ist 2. Unzugängliche Flash Inhalte 3. Links oder Buttons die keinen Sinn machen 4. Bilder mit falschen oder fehlenden Beschreibungen (Alternativtext) 5. Komplexe Formulare 6. Fehlende Unterstützung der Tastatur 7. Seiten oder Teile von Seiten die sich unerwartet verändern 8. Fehlende oder unpassende Überschriften 9. Zu viele Links 10. Komplexe Datentabellen 11. Fehlende "Skip Over Navigation" Links 12. Fehlende oder unzugängliche Suchfunktionalität Quelle: http://webaim.org/projects/screenreadersurvey2/