1 Anforderungsliste 2.3.1, I, II A, AAA

Transkript

1 1 Anforderungsliste Die vollständigen Anforderungen können der BITV 2.0 [1], die zusätzlichen Anforderungen von [2] entnommen werden. Die Tabelle gibt die Anforderungsnummer (BITV 2.0), die Priorität und die Konformitätsstufen (Level) der WCAG 2.0 an. Anforderung BITV 2.0 Priorität Level Aufbau Syntaxanalyse I A Webseiten-Titel I A Umgehen von Elementgruppen I A Bei Eingabe I A Zweck eines Links (im Kontext) 2.4.4, I, II A, AAA Veränderbare Textgröße I AA Beschreibungen I AA Abschnittsüberschriften II AAA Unterbrechungen II AAA Wiederanmeldung II AAA Navigation Bei Fokussierung I A Einheitliche Navigation I AA Einheitliche Bezeichnung I AA Alternative Zugangswege I AA Kontextänderungen II AAA Standort I AAA Zusätzliche Anforderungen: H7.2, H6.1, H6.2, H6.3, H1.2, H1.3, H3.1, H3.2, H3.3, H3.4, H3.5, H4.1, H4.2, H11.1 1

2 1 Anforderungsliste Assistive Technologien Nicht-Text-Inhalte I A Informationen und Beziehungen I A Aussagekräftige Reihenfolge I A Name, Rolle, Wert I A Zusätzliche Anforderungen: H2.2 Tastaturbedienbarkeit Tastaturbedienbarkeit 2.1.1, I, II A, AAA Keine Tastaturfalle I A Fokus-Reihenfolge I A Sichtbarer Fokus I AA Benutzereingaben und -hilfen Beschriftungen I A Fehleridentifizierung I A Fehlervermeidung 3.3.4, I, II A, AAA Korrekturvorschläge I AA Hilfe II AAA Zusätzliche Anforderungen: H10.1, H11.2, H11.3, H11.4 Darstellung Sensorische Merkmale I A Farbe I A Dreimaliges Aufblitzen Unterschreiten der Schwellenwerte 2.3.1, I, II A, AAA Kontrast 1.4.3, I, II AA, AAA Schriftgrafiken 1.4.5, I, II AA, AAA Visuelle Präsentation II AAA Zusätzliche Anforderungen: H1.1, H2.1, H2.3, H5.2, H5.3, H5.4, H5.5, H8.1, H8.2, H8.3, H8.4, H9.1, H9.2, H9.3, H9.4, H9.5, H9.6 2

3 1 Anforderungsliste Sprache/Verständlichkeit Sprache I A Sprache einzelner Abschnitte I AA Ungebräuchliche Wörter II AAA Abkürzungen II AAA Einfache Sprache II AAA Aussprache II AAA Zusätzliche Anforderungen: H5.1 Zeitbezogene Inhalte Zeitbezogene Anforderungen I A Anhalten, beenden, ausblenden I A Keine Zeitbegrenzung II AAA Zusätzliche Anforderungen: H7.1 Audio-Dateien Audio-Kontrolle I A Aufgezeichnete Audio-Dateien I A Erweiterte Untertitel (Captions) I A Live-Untertitel I AA Gebärdensprache II AAA Live-Audio-Inhalte II AAA Hintergrundgeräusche II AAA Video-Dateien Aufgezeichnete Video-Dateien I A Audio-Deskription oder Volltext- Alternative I A Audio-Deskription I AA Erweiterte Audio-Deskription II AAA Volltext-Alternative II AAA 3

4 Der Aufbau der Kriterienliste entspricht dem Aufbau der Anforderungsliste (vgl. Kapitel 1). Hier werden die Anforderungen in konkrete Techniken oder Kriterien übertragen, die von Dextra geprüft werden. Die jeweiligen Anforderungen enthalten jeweils eine Bezeichnung, die aus einem Buchstaben und einer fortlaufenden Nummer besteht. Handelt es sich um ein HTML-betreffendes Kriterium, wird dies mit H gekennzeichnet, bei CSS mit C und sonstige mit S. Hinter dem jeweiligen Kriterium steht eine Bezeichnung in Klammern, die auf die Quelle verweist. Tabelle 2.1 erläutert die verwendeten Abkürzungen. Aufgrund der zum Teil Tabelle 2.1: Quellen-Abkürzungen Abkürzung Bezeichnung BIA BIENE Award [3] BITV Barrierefreie-Informationstechnik-Verordnung 2.0 [1] ETF Eigene Tests und Folgerungen GOP Research-Derived Web Design Guildelines for Older People [2] W3S w3schools.com [4] W3C World Wide Web Consortium [5] eigenen Kriterien bedarf es an manchen Stellen einiger Anmerkungen, die jeweils unter der entsprechenden Anforderung stehen. w3schools.com bezeichnet eine Liste von allen HTML(5)-Tags. Wird die Seite als Quelle angegeben, ist dies so zu verstehen, dass gewisse Tags für einen bestimmten Zweck vorhanden sind und diese entsprechend verwendet werden sollten. A. Aufbau 1. Webseiten-Titel [H1] Webseiten enthalten einen Titel (BITV) [H2] Enthält mindestens 3 zusammenhängende Buchstaben, maximal 5 Zahlen, maximal 3 Sonderzeichen und maximal 6 Leerzeichen (ETF) 4

5 [H3] Schlüsselwörter, die innerhalb eines <title>-elementes verwendet werden, werden auf der Seite wiederholt (ETF) Anmerkung 1: Die Anzahl der Zeichen wird begrenzt angegeben, da Screenreader häufig beim Betreten der Seite zuerst den Titel vorlesen. Es ist daher sinnvoll, einen Titel zu wählen, der den Inhalt der Seite beschreibt. 2. Umgehen von Elementgruppen [H4] iframe-elemente haben ein title-attribut (W3C) 3. Beschreibungen [H5] Prüfen auf Überschriften (W3C, ETF) 4. Veränderbare Textgröße [C1] Prüfen, ob font-size in Prozent, em oder wörtlich (larger, smaller, medium) angegeben (W3C) B. Navigation 1. Einheitliche Bezeichnung [H6] In einem Webangebot und innerhalb verbundener Webseiten werden Elemente mit gleicher Funktionalität einheitlich bezeichnet. (Doppelte Links) (BITV, ETF) Anmerkung 2: Das heißt, es gibt keine Links, die denselben Namen haben und auf unterschiedliche Seiten verweisen und es gibt keine Links mit verschiedenen Namen, die auf dieselbe Seite verweisen. 2. Alternative Zugangswege [H7] Suchfunktion (input: type="search") (ETF) [H8] Suche nach Schlagwörtern: Sitemap, Inhaltsverzeichnis, Inhalt, Inhaltsübersicht, Übersicht (ETF, GOP) [H9] Suche nach Schlagwörtern in input-elementen (id, name): Suche, Search (ETF) [H10] <link>-elemente werden im <head> verwendet; jedes enthält ein rel- und ein href-attribut (W3C) 3. Standort [C2] :focus, :active unterscheidet sich von :link, :visited (ETF) 4. Zusätzliche Anforderungen [H11] Links stehen in einer Liste, d. h. es gibt Listenelemente, die <a>-tags beinhalten (W3C) [H12] Es werden keine zusätzlichen Fenster geöffnet (JS: window.open oder target) (ETF) [H13] Keine rekursiven Links (BIA) [C3] :link unterscheidet sich von :visited (GOP) Anmerkung 3: Werden Links in neuem Fenster geöffnet, sollte dies gekennzeichnet werden. Viele Benutzer nutzen den Zurück -Button im Browser. Wird ein neues Fenster geöffnet, funktioniert dies nicht [6]. 5

6 C. Assistive Technologien 1. Nicht-Text-Inhalte [H14] Bilder, d. h. <img>-, <area>-tags werden mit einem alt-attribut versehen (W3C) [H15] Wenn das alt-attribut leer ist, dann darf kein title-attribut angegeben sein oder muss auch leer sein (W3C) [H16] Enthält ein <a>-element ein <img>-tag, dann muss das alt-attribut verschieden von dem Textinhalt des <a>-tags sein (W3C) [H17] <area>-tags benötigen nur ein alt-attribut, wenn ein href-attribut angegeben ist (W3C) [H18] SVG-Grafiken enthalten Titel und Beschreibung (ETF) [H19] Der Inhalt eines <object>-elementes ist nicht leer (W3C) 2. Informationen und Beziehungen [H20] Verwenden von semantischem HTML: <nav> und (<header> oder <footer>) und (<section> oder <article>) (ETF) [H21] Bei Zitaten: Prüfen auf <q>, <cite> und <blockquote> (W3S) [H22] Statt <b>, <i> besser <strong>, <em> verwenden (W3S) [H23] Korrekter Aufbau von Tabellen: Wenn <table>, muss auch mindestens <th>, <td> und <tr> verwendet werden (W3C) [H24] Alle <th>-elemente enthalten ein scope-attribut (W3C) Anmerkung 4: Wird HTML5 verwendet, sollten auch die entsprechenden Tags verwendet werden, in der Regel verfügt jede Seite über eine Navigation (<nav>), einen Fuß- oder Kopfbereich (<header> / <footer>) und Inhalt in Abschnitten oder Artikeln (<section> / <article>). 3. Aussagekräftige Reihenfolge [H25] Auf gesperrte Wörter prüfen (W3C) D. Tastaturbedienbarkeit 1. Tastaturbedienbarkeit [H26] Verwenden von tabindex und accesskey für wichtige Links, z. B. Navigationselemente (ETF) [H27] accesskey darf nicht leer sein und der Wert kommt nur einmal vor (ETF) Anmerkung 5: Es ist sinnvoll, für eine schnelle Navigation Accesskeys zu verwenden. Diese müssen einen Wert haben, während tabindex auch leer sein kann. Bei der Verwendung von tabindex ist darauf zu achten, dass eine sinnvolle Reihenfolge noch gewährleistet ist. 2. Keine Tastaturfalle [H28] Folgende JavaScript-Eventhandler können zu Tastaturfallen führen: onkeypress, onkeydown, onkeyup, onchange (ETF) 6

7 3. Sichtbarer Fokus [C4] :focus ist angegeben und unterscheidet sich von anderen Links (ETF) Anmerkung 6: Wenn :focus nicht angegeben wird, werden die Benutzervoreinstellung verwendet. Wird :focus angegeben, muss sich dieser von anderen Links (z. B. :link, :visited) unterscheiden, um den Tastaturfokus sichtbar zu machen. E. Benutzereingaben und -hilfen 1. Nicht-Text-Inhalte [H29] Wenn input: type="image", dann muss ein alt-attribut angegeben sein (W3C) 2. Bei Eingabe [H30] Wenn <form> verwendet, muss ein submit-button vorhanden sein (input: type="submit", input: type="image", button: type="submit") (W3C) 3. Beschriftungen [H31] Für jedes <input>-element gibt es ein <label>-element. Ausnahmen bei type: button, hidden, image, submit, reset (W3C) [H32] Wenn kein <label>-element vorhanden ist, gibt es ein <title>-attribut (W3C) 4. Hilfe [H33] Prüfen, ob es ein value-attribut gibt (bereits ausgefüllte Daten können bei Fehlermeldung erhalten bleiben) (ETF) [H34] Wenn Checkboxen oder Radio-Buttons verwendet, muss ein <label>-element dahinter folgen, sonst davor (W3C) 5. Name, Rolle, Wert [H35] Jedes <fieldset>-element hat ein <legend>-element (W3C) [H36] Jedes select- und jedes textarea-element verfügt über ein <label>-element (W3C) F. Darstellung 1. Farbe [C5] Wenn color verwendet, muss auch background-color verwendet werden (W3C) 2. Kontrast [C6] Prüfen, ob Kontrast von color und background-color ausreichend ist (W3C) [C7] Weniger Kontrast möglich bei 18pt(1.5em, 150%) oder 14pt (1.2em, 120%) bold (W3C, ETF) 3. Visuelle Präsentation [H37] Prüfen auf Spacer-GIFs: spacer.gif, transparent.gif, 1x1.gif (BIA) [C8] Kein Blocksatz (prüfen auf text-align: justify) (BITV) [C9] Prüfen, ob text-align links oder rechts ist (W3C) 7

8 [C10] Zeilenabstand mindestens 1,5 (line-height: 1.5em, 150%, 18pt) (BITV, ETF) [C11] letter-spacing muss einen Wert zwischen 0 und 9px/7pt/0.3em haben (ETF) [C12] Abstand zwischen den Abätzen muss größer als der Zeilenabstand sein (BITV, ETF) [C13] Nicht mehr als 10 unterschiedliche Farben für Vorder- und Hintergrund verwenden (ETF) [C14] Alle width-angaben eines Containers in Prozent angeben (W3C) [C15] Sans-Serif-Schritarten verwenden (W3C) [S1] Die Zeilenbreite beträgt nicht mehr als 80 Zeichen (BITV) Anmerkung 7: letter-spacing darf nicht zu groß angegeben sein, um eine gute Lesbarkeit zu gewährleisten. Nicht zu viele unterschiedliche Farben verwenden, zehn reichen in der Regel aus. G. Sprache / Verständlichkeit 1. Sprache [H38] Angabe eines lang- und/oder xml:lang-attributs (W3C) 2. Ungebräuchliche Wörter [H39] Wenn <dl> verwendet wird, muss auch <dt> und <dd> verwendet werden (W3C) 3. Abkürzungen [H40] Prüfen auf Wörter, die aus mindestens 3 Großbuchstaben bestehen, die nicht in einem <abbr>- Tag stehen (ETF) Anmerkung 8: Abkürzungen sollten mit einem <abbr>-tag gekennzeichnet werden, um die Verständlichkeit zu verbessern. In der Regel werden Abkürzungen durch mehrere Großbuchstaben dargestellt. H. Zeitbezogene Inhalte 1. Anhalten, beenden, ausblenden [H41] Prüfen auf SVG set, animate, animatecolor, animatemotion, animatetransform (ETF) [H42] Prüfen, ob http-equiv="refresh" wenn ja, dann muss content="0" sein (W3C) [C16] Prüfen auf text-decoration: blink (ETF) [C17] Prüfen (ETF) Anmerkung 9: Es werden Elemente gesucht, die Animationen oder ein Blinken auslösen. Hierfür sind spezielle Vorkehrungen zu treffen, vgl. BITV 2.0 (Anforderung 2.2.1, 2.2.2) [1] I. Audio-Dateien 1. Audio-Kontrolle [H43] Prüfen, ob Audio-Elemente eingebunden sind (Suche nach <audio> und konkreten Dateiendun- 8

9 gen) (ETF) Anmerkung 10: Für Audio-Inhalte sind je nach Erfüllungsgrad der BITV 2.0 (Priorität I oder Priorität II) spezielle Vorkehrungen zu treffen, vgl. BITV 2.0 [1] 2. Aufgezeichnete Audio-Dateien [H44] Link mit Audio-Datei (Dateiendung) hat ein alt-attribut oder ist nicht leer (W3C) J. Video-Dateien 1. Aufgezeichnete Video-Dateien [H45] Prüfen, ob Video-Elemente eingebunden sind (Suche nach <video> und konkreten Dateiendungen) (ETF) [H46] Link mit Video-Datei (Dateiendung) hat ein alt-attribut oder ist nicht leer (W3C) Anmerkung 11: Für Video-Inhalte sind je nach Erfüllungsgrad der BITV 2.0 (Priorität I oder Priorität II) spezielle Vorkehrungen zu treffen, vgl. BITV 2.0 [1] 9

10 Quellverzeichnis [1] Bundesministerium für Justiz: Barrierefreie-Informationstechnik-Verordnung - BITV 2.0. Version: BJNR html, Abruf: [2] S. Kurniawan, P. Zaphiris: Research-Derived Web Design Guidelines for Older People. Version: assets2005.pdf, Abruf: [3] Kriterien der BIENE (Web-Award). #kriteriengruppe-0, Abruf: [4] w3schools.com: HTML Reference - (HTML5 Compliant). com/tags/default.asp, Abruf: [5] W3C: How to Meet WCAG Overview.php, Abruf: [6] aperto: Usability-Test mit Menschen mit Behinderung. Version: Abruf: