5. Barrierefreie GUI-Gestaltung

Transkript

1 5. Barrierefreie GUI-Gestaltung Prinzipen Barrierefreie Webseiten Barrierefreie Webapplikationen Barrierefreie Software-GUIs Prüfprogramme Ilse Schmiedecke 2008

2 Motivationsvideo des Schweizer Fernsehens: schmiedecke 13 HCI 2

3 Barrierefreie Gestaltung Barrierefreie Gestaltung Zugangsmöglichkeiten mit Hilfsmitteln oder unterstützenden Geräte-Einstellungen Englisch: Accessability Umfangreiches Regelwerk: WCAG2.0 des W3C "Web Content Accessability Guide" Weitestgehend übernommen in ISO "Leitlinien für die Zugänglichkeit von Software" 3 Konformitätsstufen A - grundsätzliche Bedienbarkeit AA - erweiterte Bedienbarkeit AAA universelle Bedienbarkeit schmiedecke 13 HCI 3

4 Barrierefreiheit technisch und inhaltlich Technisch: Hilfsmittelgerechte Gestaltung Hilfsmittelkompatible Techniken für Webseiten und Anwendungssoftware Inhaltlich: Verstehbarkeit auch mit Hilfsmitteln Anpassung an Benutzer mit besonderen Einschränungen und Bedürfnissen schmiedecke 13 HCI 4

5 Prinzipien des WCAG Zunächst die inhaltlichen Kriterien die WCAG-Prinzpien Prinzip 1 Wahrnehmbarkeit Prinzip 2 Bedienbarkeit Prinzip 3 Verständlichkeit Prinzip 4 Robustheit so in der ISO schmiedecke 13 HCI 5

6 Prinzipien des WCAG20 Prinzip 1 Wahrnehmbarkeit Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können. Textalternativen zu Audio- und Bildinformation Medienalternativen und Steuerbarkeit zeitbasierter Medien Anpassbarkeit der Darstellung Unterscheidbare Inhalte schmiedecke 13 HCI 6

7 Prinzipien des WCAG20 Prinzip 2 Bedienbarkeit Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein. Bedienbarkeit per Tastatur Steuerung des Zeitverhaltens Tempo, Pausen, Keine anfallsauslösenden Elemente hektische Animationen, Lichtblitze, Freie Navigierbarkeit auch mit Hilfsmitteln Semantische Auszeichnung, Tastaturnavigation, überspringbare Blöcke schmiedecke 13 HCI 7

8 Prinzipien des WCAG20 Prinzip 3 - Verständlichkeit Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein. Lesbarkeit Sprache, Sprachniveau, Abkürzungen, Aussprache Linearisierbarkeit Inhaltiche Linearisierungsreihenfolge Vorhersehbarkeit erwartungskonforme Fokuswahl und Navigation, aussagekräftige Link-Beschriftungen und Alternativtexte Hilfestellung bei Eingabe Beschriftungen und Hilfe, z.b. durch Tooltips) Fehlererkennung u. vermeidung schmiedecke 13 HCI 8

9 Prinzipien des WCAG20 Prinzip 4 Robustheit 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. Valide Auszeichnung Plattform-Kompatibilität (wichtig vor allem für <Widgets> - Javascript-basierte Bedienelemente) schmiedecke 13 HCI 9

10 Anforderungen technischer Barrierefreiheit Hilfsmittelgerechte Gestaltung Für sehbehinderte Nutzer Skalierbarkeit: Schriftvergrößerung / Auflösungsveränderung Bildschirmlupe Grafische Reduzierbarkeit Ausblenden von Farbflächen, Hintergrund- und Dekorationsbildern Für blinde Nutzer Linearisierbarkeit: Screenreader und Braillezeile Naviagationunterstützung Tastaturnavigation innerhalb der Seite Semantische Navigationsreihenfolge Objektlesbarkeit Objektart, Wert, Zustand schmiedecke 13 Änderungs-Erkennung HCI 10

11 Webtechnologien und Barrierefreiheit Webseiten: Valides HTML Semantische Auszeichnung Layout und Dekor nur durch CSS relative Größenangaben Rich Internet Applications Zusätzlich ARIA-Auszeichnung gehört sich sowieso... immer möglich, stört nicht Software: Hilfsmittel erwarten Accessibility-APIs müssen von der GUI-Technologie implementiert werden schmiedecke 13 HCI 11

12 Webseiten: Textalternativen Textalternativen: informativ, aber nicht "geschwätzig" Quelle: schmiedecke 13 HCI 12

13 Webseiten: Textalternativen Mit longdesc-attribut auf externe Textquelle verweisen Datei beschreibung_wahlbeteiligung.txt: Die Entwicklung der Wahlbeteiligung in Deutschland bei Bundestagswahlen von 1949 bis lag die Wahlbeteiligung nur bei 78,5 %. Bis 1969 lag die Beteiligung immer im Bereich von 86 bis 88 %, 1972 gab es einen Sprung auf 91,1 %. In den Folgejahren sank die Beteiligung, bis sie 1990 einen Tiefststand von 77,8 % erreichte. Nach einem kurzen Anstieg ende der 90er, sank die Beteiligung wieder... Quelle: schmiedecke 13 HCI 13

14 Webseiten: Linearisierbarkeit Linearisierbarkeit für blinde Nutzer: 1. Inhalt des Dokuments verstehbar gliedern 2. Gliederungsblöcke und ebenen mit <div>- Elementen markieren 3. Mithilfe von CSS Blöcke optisch anordnen 4. Blöcke mit CSS weiter gestalten <body> <div id="header">. </div> <div id="navigation"> </div> <div id="content"> <div id="news"> </div> <div id="main article"> </div> </div> <p id="blog entries"> </p> <div id="footer"> </div> </body> schmiedecke 13 HCI 14

15 Webseiten: Überspringbare Blöcke Der Screeenreader linearisiert erbarmungslos! D.h. er beginnt immer wieder von oben. Was am Anfang steht, wird immer wieder vorgelesen, z.b. eine lange Navigationsliste. Abhilfe lt. WCAG: Gruppierung und Überspringbarkeit verwandter Links: schmiedecke 13 HCI 15

16 Webseiten: Überspringbare Blöcke Unsichtbare Sprungmarken <nav> <a href="#navende" class="unsichtbar"> Navigation überspringen</a> <h4 class="unsichtbar"> Navigation </h4> <ul> </ul> <a name="navende"></a> </nav> CSS:.unsichtbar: { position:absolute; left: -1000px; top: -1000px; width: 0; height:0; } schmiedecke 13 HCI 16

17 Die verborgene Sprungmarke Im Screenreader: Im Browser: Navigation überspringen Navigation link1 link2 link3. link1 link2 link3 schmiedecke 13 HCI 17

18 Webseiten: Skalierbarkeit der Schirft Skalierbarkeit für Nutzer mit Sehbehinderung: Kein Informationsverlust und kein horizontales Scrollen durch - Schriftvergrößerung - Veränderung der Bildschirmauflösung Maßnahmen: Keine absoluten Größenangaben! Möglichkeiten: 55 % Tabellen: Texte: 0.5em - Relativ zur aktuellen Größe/Breite/Höhe - Relativ zur aktuellen Breite des "M" Breite den <td>-elementen in Prozent zuordnen, auf keinen Fall scrolling=no oder Noresize angeben! min-width und max-width angeben, scrolling=no schmiedecke 13 HCI 18

19 Rich Internet Applications Screenreader wird ausgebremst durch Eingebettete Programme wie Flash Flash wird immer "barrierefreier" Die Verwendung von Javascript-Widgets Bedeutung, Bedienung, Zustand bleiben verborgen Die Verwendung von Ajax Updates werden nicht erkannt Textbasierte Markierungen (* für "erforderlich") und auch das text- und farbbasierte Feedback schmiedecke 13 HCI 19

20 Rich Internet Applications: ARIA WAI-ARIA Web Accessibiliy Initiative Accessible Rich Internet Applications specification seit ca aktueller Status: W3C-Candidate Zusätzliche Auszeichnungsmöglichkeiten für beliebige sichtbare Elemente Fokusbehandlung, Rollen, Zustände und Eigenschaften von Hilfsmitteln interpretiert von Brownsern ignoriert problemlos einsetzbar schmiedecke 13 HCI 20

21 ARIA - Rollen Rollen bezeichnen die Bedeutung sichtbarer Elemente Rollen-Ontologie in 4 Kategorien Wigets alert, alertdiaolg, button, checkbox, gridcell, link, menuitem,... Composite Widgets Combobox, grid, listbox, menu, radiogroup, tablist, tree,... Document Structure Article, columnheader, definition, directory, heading, list,... Document Landmarks application, banner, complementary, contentinfo, main, navigation, search, math,... <div role= banner >... </div> <div role= navigation tabindex= 1 >... </div> schmiedecke 13 HCI 21

22 ARIA-Zustände und -Eigenschaften Zustände und Eigenschaften machen visualisierte Eigenschaften für Hilfsmittel zugänglich aria-valuenow aria-valuemax aria-valuemin aria-valuetext aria-labelledby aria-describedby... schmiedecke 13 HCI 22

23 ARIA-Beispiel Slider HTML-Tag ist input Screenreader erkennt slider leffective ist ein id, von dem der Text übernommen wird. Berechnung von valuenow kann durch javascript erfolgen Quelle: dev.opera.com/articles/introduction-to-wai-aria schmiedecke 13 HCI 23

24 ARIA-Aktive Regionen Aktive Regionen verändern sich, ohne dass die Seite neu geladen werden ( Ajax) Hilfsmittel müssen wissen welches aktive Regionen sind wann sie eine Veränderung bekannt geben sollen wieviel sie bei einem Update bekannt geben sollen wann ein Updaten abgeschlossen ist ARIA bietet die folgenden Attribute aria-live - Werte off, polite, assertive aria-atomic - Bereich, der bei Updaten bekannt zu geben ist aria-busy - Update noch nicht abgeschlossen? aria-relevant - welche DOM-Veränderungen werden bekannt gegeben? schmiedecke 13 HCI 24

25 ARIA-Beispiel List-update relevant=additions: Update wird bekanntgegeben, wenn DOM-Element hinzugefügt wird andere Werte: removals, text, all atomic=true: gesamte Liste wird bei Update angezeigt/wiedergegeben live=polite: Benutzeraktion wird nicht unterbrochen andere Werte: off, assertive schmiedecke 13 HCI 25

26 ARIA einsetzen? Zitat Gez Lemon, 2008: Be an early adopter As there are no negative side-effects from using ARIA, and support is already in place, there is nothing to lose by becoming an early adopter, but plenty to gain. Even if you have the simplest of websites, you could include document landmark roles to help users better navigate, and orientate themselves within the content. Besonders wichtig und wünschenswert für JS-Bibliotheken! schmiedecke 13 HCI 26

27 Vortrag zu WAI-ARIA Marco Zehe auf dem MMT schmiedecke 13 HCI 27

28 Freie Accessibility-Prüfprogramme Firefox Accessibility Extension WebAnywhere Visicheck (simuliert Fehlsichtigkeiten) WAVE schmiedecke 13 HCI 28

29 Barrierefreie GUIs: Objekte-Modell Hilfmittelunterstüzung HTML historisch: rein visuelle Gestaltung kein Modell /unstrukturiertes Modell heute, insbesondere in HTML 5: semantische Auszeichnung Trennung von Struktur (HTML) und visueller Gestaltung (CSS) Struktur liefert Modell Programmiersprachen: GUI-Bibliotheken realisieren (zunehmend) MVC es gibt ein strukturiertes Modell mit abstrakten Objekteigenschaften auf das die Hilfsmittel zurückgreifen können GUI-Bibliotheken implementieren Accessability-Schnittstellen auf der Grundlage dieses Modells schmiedecke 13 HCI 29

30 Technische Grundlagen: Software Accessibility Microsoft Schnittstellen für Zugangs-Hilfsmittel MSAA bzw MSUIA zunehmend auch von Clienttechnologien implementiert (flash, ) Java-Accessibitity Schnittstellen JAAPI Klassenbibliothek für Hilfsmittel Java Accessibility Utilities Schnittstelle zu MSAA Java Access Bridge schmiedecke 13 HCI 30

31 Java Accessibility JAAPI (Java Accessible API) Interface javax.accessibility.accessible wird von GUI-Frameorks standardmäßig implementiert AttributAccessibleContext enthält Accessible-Namen, Accessible-Beschreibung, Status, Alternativtext, automatisch oder von Hand zu setzen: Tastaturbedienung und -navigation in allen GUI-Komponenten standardmäßig enthalten schmiedecke 13 HCI 31

32 IBM Software Acessibility Checklist Tastaturalternativen Tastaturbedienbarkeit für alle Aktionen Keine Konflikte mit Tastatur-Accessibility des BS Objekt-Informationen Fokus visuell und Hilfsmittel-lesbar anzeigen Semantische Objektinformation Labels für alle UI-Elemente Hilfsmittelzugang für Formulare Töne und Multimedia Textalternativen zu Audio und Video Lautstärkeregulierung Darstellung Textalternativen für alle Objekte Systemeinstellungen für Kontrastverstärkung unterstützen Systemenstellungen für Schriftart, Schriftgröße, Farbe, Größe erben Timing Animationen abstellbar Blinkfrequenz zwischen 2 und 55 Hz www-03.ibm.com/ able/guidelines/ software/accesssoftware.html schmiedecke 13 HCI 32

33 Das war noch lange nicht alles aber genug für dieses Semester schmiedecke 13 HCI 33