4.5. Barrierefreie GUI-Gestaltung

Transkript

1 4.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 Konformitätsbedingungen des WCAG20 Bedingung 1 Konformitätsstufe angeben Bedingung 2 Konformität stets für ganze Seiten Bedingung 3 Konformität für Vollständigen Prozess Bedingung 4 Verzicht auf nicht barrierefreie Elemente Bedingung 5 Störungsfreier Zugang mit Hilfsmitteln (Steuerbarkeit aller zeitgebundenen Vorgänge und aller Audio-Wiedergaben) schmiedecke 13 HCI 4

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

6 WCAG-PRINZIPIEN schmiedecke 13 HCI 6

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

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

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

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

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

12 TECHNISCHE KRITERIEN schmiedecke 13 HCI 12

13 Kriterien 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 13

14 Technische Anforderungen der Barrierefreiheit Webseiten: Valides HTML Semantische Auszeichnung Layout und Dekor nur durch CSS relative Größenangaben Rich Internet Applications Zusätzlich ARIA-Auszeichnung Software: Hilfsmittel erwarten Accessibility-APIs müssen von der GUI-Technologie implementiert werden schmiedecke 13 HCI 14

15 Webseiten: Valides HTML / XHTML Validität (Gültigkeit) bedeutet Einhaltung der Syntaxregeln Überprüfbar duch frei verfügbare Validatoren z.b. Unicorn: Bedeutung für die Barrierefreiheit: Grundvoraussetzung: notwendig, aber nicht hinreichend! schmiedecke 13 HCI 15

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

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

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

19 Webseiten: Navigationsunterstützung Attribut tabindex Seit HTML 4 für alle Bedienelemente Seit ARIA für alle sichtbaren Elemente (auch div-s) Positive Zahlen (bis 32000) für die Navigationsreihenfolge 0 ist Default und bedeutet Reihenfolge des HTML-Dokuments Negative Zahlen werden nicht durch Tabulatoren angesteuert (Fokus wird programmatisch gesteuert) <inputtext tabindex= 5...>... </inputtext> <div id= progaccess tabindex= -1 >... </div> // Fokus durch Javascript var progdiv = document.getelementbyid( progaccess ); Progdiv.focus(); Quelle: dev.opera.com/articles/view/introduction-to-wai-aria/ schmiedecke 13 HCI 19

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

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

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

23 Anwendung: Skalierbarkeit 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 23

24 WAI-ARIA-AUSZEICHNUNG schmiedecke 13 HCI 24

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

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

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

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

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

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

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

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

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

34 ACESSABILITY-PRÜFUNG schmiedecke 13 HCI 34

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

36 Accessibility-Prüfprogramme Vollständige Liste des W3C unter schmiedecke 13 HCI 36

37 BARRIEREFREIE GUIS schmiedecke 13 HCI 37

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

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

40 Java Accessibility JAAPI (Java Accessible API) Interface javax.accessibility.accessible wird von GUI-Frameworks 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 40

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

42 Das war noch lange nicht alles aber genug für diesen Einstieg schmiedecke 13 HCI 42