Erklärungen zur Accessibility-Checkliste 2.0

Erklärung der Erfolgskriterien und technische Beispiele zur Accessibility Checkliste 2.0 der «Richtlinien für barrierefreie Webinhalte (WCAG 2.0)»

 

 

        Inhalt

1.          Prinzip: Wahrnehmbar............................................................................................................................................ 3

1.1.       Stellen Sie Textalternativen für alle Nicht-Text-Inhalte zur Verfügung, so dass diese in andere vom Benutzer benötigte Formen geändert werden können, wie zum Beispiel Grossschrift, Braille, Symbole oder einfachere Sprache.... 3

1.2.       Stellen Sie Alternativen für zeitbasierte Medien zur Verfügung............................................................... 4

1.3.       Erstellen Sie Inhalte, die auf verschiedene Arten dargestellt werden können (zum Beispiel mit einfacherem Layout), ohne dass Informationen oder Strukturen verloren gehen......................................................................................... 7

1.4.       Unterscheidbar: Machen Sie es für den Benutzer leichter, Inhalte zu sehen und zu hören, einschliesslich der Trennung zwischen Vordergrund und Hintergrund.................................................................................................................. 13

2.          Prinzip: Bedienbar................................................................................................................................................. 19

2.1.       Sorgen Sie dafür, dass alle Funktionalitäten von der Tastatur aus verfügbar sind................................. 19

2.2.       Geben Sie den Benutzern ausreichend Zeit, Inhalte zu lesen und zu benutzen...................................... 20

2.3.       Gestalten Sie Inhalte nicht auf Arten, von denen bekannt ist, dass sie zu Anfällen führen................... 22

2.4.       Stellen Sie Mittel zur Verfügung, um Benutzer dabei zu unterstützen zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden............................................................................................................................................. 23

3.          Verständlich........................................................................................................................................................... 29

3.1.       Machen Sie Inhalt lesbar und verständlich.............................................................................................. 29

3.2.       Sorgen Sie dafür, dass Webseiten vorhersehbar aussehen und funktionieren....................................... 32

3.3.       Hilfestellung bei der Eingabe: Helfen Sie den Benutzern dabei, Fehler zu vermeiden und zu korrigieren.                                                                                                                                                                   34

4.          Robust.................................................................................................................................................................... 38

4.1.       Kompatibel: Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschliesslich assistierender Techniken.................................................................................................................................................. 38

 

 

Bezug:                                      http://www.access-for-all.ch/checklist/

                                                  http://www.ch.ch/accessibility

Version:                                   2.10                                                      

 


I.        Referenz: Die Richtlinien für barrierefreie Webinhalte (WCAG 2.0)

Diese Erklärungen zur Checkliste 2.0 basieren auf den international anerkannten «Richtlinien für barrierefreie Webinhalte (WCAG 2.0)». Original: http://www.w3.org/Translations/WCAG20-de/

Gültigkeit

Dieses Dokument enthält die Originaltexte der offiziellen Übersetzung der WCAG 2.0-Dokumente «Prinzipien», «Richtlinien» und «Erfolgskriterien». Zu jedem Erfolgskriterium wird ein vereinfachter, in Eigenredaktion erstellter Text «Verstehen» und «Beispiele» präsentiert. Dieser Text ist für Websites mit den aktuellen, meistverwendeten Gestaltungstechniken anwendbar und dient der effektiven Handhabung der Richtlinien.

Dieses Dokument ist kein Ersatz der Richtlinien der «Web Accessibility Initiative» (WAI). Zur definitiven Beurteilung gilt im Zweifelsfall immer der Originaltext der WAI.

Konformitätsbedingungen der WCAG 2.0

Für die Konformität einer der Stufen A (niedrigste), AA (empfohlene) oder AAA (höchste) muss die ganze Webseite alle Erfolgskriterien der entsprechenden Stufe/n erfüllen oder es wird eine stufenkonforme Alternativversion zur Verfügung gestellt.

Konformitätsbedingungen: http://www.w3.org/Translations/WCAG20-de/#conformance-reqs

Fachbegriffe im Glossar

Wichtige Rahmentexte der Richtlinien sind in diesem Dokument aus Platzgründen nicht aufgeführt. Viele Begriffe sind im Glossar erklärt, welches zusammen mit diesem Dokument ausgehändigt wird.

Glossar zur Accessibility Checkliste 2: http://www.access-for-all.ch/checklist/

Glossar der WAI (deutsch): http://www.w3.org/Translations/WCAG20-de/#glossary 

Anwendung

Die Accessibility-Checkliste 2.0 kann zur Beurteilung der Barrierefreiheit von Webinhalten verwendet werden. Die Beibehaltung des Aufbaus der Originalrichtlinien WCAG 2.0  und die Abbildung der Originaltexte, gewährleisten die grösstmögliche Übereinstimmung.

Einige Anforderungen sind auf mehrere Erfolgskriterien (EK) verteilt. Damit können verschiedene Aspekte detailliert überprüft werden. Auf diese Querverweise wird mit einer Bemerkung hingewiesen, z.B.: (siehe auch EK 1.2.1).

Zu jedem Erfolgskriterium werden auch Test-Tools und ein Link angegeben, unter «Wie erfüllen» werden weitere Lösungen dokumentiert.

Weitere Informationen im Anhang dieses Dokumentes.

1. Prinzip: Wahrnehmbar

Informationen und Bestandteile der Benutzeroberfläche müssen den Benutzern so präsentiert werden, dass sie diese wahrnehmen können.

1.1.        Stellen Sie Textalternativen für alle Nicht-Text-Inhalte zur Verfügung, so dass diese in andere vom Benutzer benötigte Formen geändert werden können, wie zum Beispiel Grossschrift, Braille, Symbole oder einfachere Sprache.

1.1.1.          Nicht-Text-Inhalt (Stufe A)

Nicht-Text-Inhalt: Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die einem äquivalenten Zweck dient, mit Ausnahme der unten aufgelisteten Situationen. (Stufe A)

1.       Steuerelemente, Eingabe: Wenn es sich bei dem Nicht-Text-Inhalt um ein Steuerelement handelt oder Eingaben durch den Benutzer akzeptiert, dann hat dieser einen Namen, der seinen Zweck beschreibt. (Beachten Sie Richtlinie 4.1.2 für zusätzliche Anforderungen an Steuerelemente und Inhalte, die Eingaben durch den Benutzer akzeptieren.)

2.       Zeitbasierte Medien: Wenn es sich bei den Nicht-Text-Inhalten um zeitbasierte Medien handelt, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit. (Beachten Sie Richtlinie 1.2 für zusätzliche Anforderungen an Medien.)

3.       Test: Wenn es sich bei dem Nicht-Text-Inhalt um einen Test oder eine Übung handelt, die nichtig wäre, wenn sie als Text dargestellt würde, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit.

4.       Sensorisch: Wenn Nicht-Text-Inhalt hauptsächlich dafür gedacht ist, eine bestimmte Sinneserfahrung zu schaffen, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit.

5.       CAPTCHA: Wenn der Zweck des Nicht-Text-Inhalts der ist zu bestätigen, dass eine Person und nicht ein Computer auf den Inhalt zugreift, dann werden Textalternativen bereitgestellt, die den Zweck des Nicht-Text-Inhalts identifizieren. Ausserdem werden alternative Formen von CAPTCHAs bereitgestellt, die Ausgabeformen für verschiedene Arten der sensorischen Wahrnehmung nutzen, um verschiedenen Behinderungen Rechnung zu tragen.

6.       Dekoration, Formatierung, unsichtbar: Wenn der Nicht-Text-Inhalt reine Dekoration ist, nur für visuelle Formatierung benutzt wird oder dem Benutzer gar nicht präsentiert wird, dann wird der Inhalt so implementiert, dass er von assistierender Technik ignoriert werden kann.

Verstehen:

Damit informative Grafiken für blinde und sehbehinderte Anwender (und Suchmaschinen) zugänglich sind, müssen sie mit einem sinnvollen Alternativ-Text beschrieben sein.

Handelt es sich bei der Grafik um ein Foto oder um ein Symbol (z.B.: Drucken, PDF) so muss der dargestellte Inhalt gleichbedeutend im Alt-Text beschrieben sein.

Handelt es sich um komplexe Informationsgrafiken wie Diagramme und Organigramme, so genügt die Beschreibung im Alternativtext oft nicht. Sie sollten zusätzlich beschrieben werden. Dies kann direkt im angrenzenden Text erfolgen oder durch das Longdesc-Attribut.

Code-Beispiel:

<p><img src=“dasbild.gif“ alt=“Das Organigramm der Verwaltung. Erläuterung in langer Beschreibung.“ longdesc=“organigramm-verwaltung.html“ /></p>

 

<p><img src=“dasbild.gif“ alt=“Das Organigramm der Verwaltung. Erläuterung im folgenden Absatz“ /></p>

Beispiel CAPTCHA:

::07.LAYOUT:Erkl-Exampes-01.png

Abbildung 1: Zwei Varianten von zugänglichen CAPTCHAS. Links wird das Sicherheitswort auch als Audiodatei abspielbar angeboten, rechts wird eine einfache Rechenaufgabe zur Lösung angeboten.

WCAG 2.0, 1.1.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-text-equiv-all

Test-Tools:                                Webdeveloper Toolbar oder AIS Toolbar, Quelltext-Analyse

1.2.        Stellen Sie Alternativen für zeitbasierte Medien zur Verfügung.                        

1.2.1.          Reine Audio- und Videoinhalte (aufgezeichnet) (Stufe A)

Für aufgezeichnete reine Audio- und aufgezeichnete reine Video- Medien gilt das Folgende, ausser die Audio- oder Videomedien sind eine Medienalternative für Text und als solche klar gekennzeichnet: (Stufe A)

-       Aufgezeichneter reiner Audioinhalt: Es wird eine Alternative für zeitbasierte Medien bereitgestellt, die äquivalente Informationen für aufgezeichneten reinen Audioinhalt bietet.

-       Aufgezeichneter reiner Videoinhalt: Es wird entweder eine Alternative für zeitbasierte Medien oder eine Audiospur zur Verfügung gestellt, die äquivalente Informationen für aufgezeichneten reinen Videoinhalt bietet.

Verstehen:

Damit der Informationsgehalt von aufgezeichneten reinen Audio- und Videoinhalten auch für blinde und gehörlose Menschen zugänglich ist, steht eine Alternative zur Verfügung.

Beispiel:

Die visuellen Inhalte eines Videos werden als Podcast (Audiodatei) zum anhören zur Verfügung gestellt. Umgekehrt werden die Inhalte eines Podcast mit Comiczeichnungen visuell beschrieben. Damit wird das Zwei-Sinne-Prinzip erfüllt.

Medienalternative: Eine Texttranskription (Textversion) der gesprochenen Worte mit Hinweisen zur sichtbaren oder hörbaren bedeutungsrelevanten Handlung wird als verlinktes Dokument (Format RTF oder HTML) zur Verfügung gestellt.

WCAG 2.0, 1.2.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-av-only-alt

Test-Tools:                                Sichtprüfung

1.2.2.          Untertitel (aufgezeichnet) (Stufe A)

Untertitel werden für alle aufgezeichneten Audioinhalte in synchronisierten Medien bereitgestellt, ausser die Medien sind eine Medienalternative für Text und als solche deutlich gekennzeichnet.

Verstehen:

Damit der Informationsgehalt von gesprochener Sprache in Videos auch für Gehörlose zugänglich ist, werden Untertitel zur Verfügung gestellt.

WCAG 2.0, 1.2.2, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-captions

Test-Tools:                                Sichtprüfung

1.2.3.          Audiodeskription oder Medienalternative (aufgezeichnet) (Stufe A)

Eine Alternative für zeitbasierte Medien oder eine Audiodeskription des aufgezeichneten Videoinhalts wird für synchronisierte Medien bereitgestellt, ausser die Medien sind eine Medienalternative für Text und als solche deutlich gekennzeichnet.

Verstehen:

Damit der Informationsgehalt von aufgezeichneten Medien, wie z.B. einem Audio-Podcast oder einem vertonten Video auch für blinde und gehörlose Menschen zugänglich ist, steht eine alternative Form zur Verfügung. Dabei ist auch die sichtbare, respektive hörbare, nonverbale Handlung zu beschreiben, wenn diese inhaltlich relevant ist.

Beispiel:

Unter einem Video wird ein Link «Audiodeskription» angeboten, welcher ein Tondokument bereitstellt. Dieses besteht aus dem Originalton, welcher mit Hinweisen eines Sprechers zur sichtbaren Handlung erweitert ist.

Medienalternative: Eine Texttranskription (Textversion) der gesprochenen Worte mit Hinweisen zur sichtbaren oder hörbaren bedeutungsrelevanten Handlung wird als verlinktes Dokument (Format RTF oder HTML) zur Verfügung gestellt.

WCAG 2.0, 1.2.3, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-audio-desc

Test-Tools:                                Sichtprüfung

1.2.4.          Untertitel (Live) (Stufe AA)

Untertitel werden für alle Live- Audioinhalte in synchronisierten Medien bereitgestellt.

Verstehen:

Damit der Informationsgehalt von live Audioinhalten auch für gehörlose Menschen zugänglich ist, werden Untertitel zur Verfügung gestellt.

Beispiel:

Die Live-Tagesschau wird mit Live-Untertiteln versehen und so ergänzt ausgestrahlt.

WCAG 2.0, 1.2.4, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-real-time-captions

Test-Tools:                                Sichtprüfung

1.2.5.          Audiodeskription (aufgezeichnet) (Stufe AA)

Eine Audiodeskription wird für alle aufgezeichneten Videoinhalte in synchronisierten Medien zur Verfügung gestellt.

Verstehen:

Damit der Informationsgehalt von allen aufgezeichneten Videoinhalten auch für blinde Menschen zugänglich ist, steht eine Audiodeskription zur Verfügung. Dabei ist auch die sichtbare und für den Inhalt relevante nonverbale Handlung zu beschreiben.

Beispiel:

Unter einem Video wird ein Link «Audiodeskription» angeboten, welcher ein Tondokument bereitstellt. Dieses besteht aus dem Originalton, welcher mit Hinweisen eines Sprechers zur sichtbaren Handlung erweitert ist.

WCAG 2.0, 1.2.5, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-audio-desc-only

Test-Tools:                                Sichtprüfung

1.2.6.          Gebärdensprache (aufgezeichnet) (Stufe AAA)

Eine Übersetzung in die Gebärdensprache wird für alle aufgezeichneten Audioinhalte in synchronisierten Medien bereitgestellt.

Verstehen:

Für Internetauftritte, die sich an die Allgemeinheit richten, wird die Verwendung von Gebärdensprachvideos empfohlen. Komplexe Inhalte einer Website sollen mit Gebärdensprachvideos als Alternative oder als moderierte Zusammenfassung angeboten werden.

Die Muttersprache vieler gehörloser Menschen ist die Gebärdensprache, Schriftsprache ist die Zweitsprache. Der Umgang mit Informationen in Schriftsprache ist für Gehörlose deshalb mühsam und für viele sehr eingeschränkt. Nur die Gebärdensprache kann alle Inhalte einer Information an Gehörlose vermitteln und nur so kann der gleiche Wissens- und Informationsstand garantiert werden. Für gehörlose Menschen ist die uneingeschränkte Verwendung ihrer Mutter- und Erstsprache, somit der Gebärdensprache, ein wichtiger Beitrag zur gleichberechtigten Nutzung von Informationsangeboten.

Beispiel:

Beispiel Gebärdensprachvideos: www.access-for-all.ch 

WCAG 2.0, 1.2.6, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-sign

Test-Tools:                                Sichtprüfung

1.2.7.          Erweiterte Audiodeskription (aufgezeichnet) (Stufe AAA)

Wenn die Pausen im Vordergrund-Audio nicht ausreichend sind, um Audiodeskriptionen zu ermöglichen, die den Sinn des Videos vermitteln, dann wird eine erweiterte Audiodeskription für alle aufgezeichneten Videoinhalte in synchronisierten Medien bereitgestellt.

Verstehen:

Um den Informationsgehalt von allen aufgezeichneten Videoinhalten auch für blinde Menschen zu erschliessen. Dabei ist auch die sichtbare für den Inhalt relevante nonverbale Handlung zu beschreiben.

Damit werden die A- und AA-Kriterien erweitert, wenn z.B. die Pausen zwischen den Szenen nicht ausreichen für die Beschreibung der visuell sichtbaren Handlung durch den Sprecher.

Beispiel:

Unter einem Video wird ein Link «Erweiterte Audiodeskription» angeboten, welcher ein Tondokument bereitstellt das den Originalton jeweils unterbricht um die sichtbare Handlung zu beschreiben.

WCAG 2.0, 1.2.7, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-extended-ad

Test-Tools:                                Sichtprüfung

1.2.8.          Medienalternative (aufgezeichnet) (Stufe AAA)

Eine Alternative für zeitbasierte Medien wird für alle aufgezeichneten synchronisierten Medien und für alle aufgezeichneten reinen Videomedien bereitgestellt. Es kann eine Transkription der Handlung und des Gesprochenen sein und via Link angeboten werden.

Verstehen:

Für alle aufgezeichneten Video-Medien gibt es eine Alternative. Es kann eine Abschrift oder Beschreibung der Handlung und des Gesprochenen sein und via Link angeboten werden.

Damit werden die A- und AA-Kriterien erweitert und die bereits formulierten Anforderungen auf alle aufgezeichneten Videos ausgedehnt, also auch auf solche, deren Inhalt auch in anderer Form bereits in der Website vorhanden ist.

Beispiel:

Eine Texttranskription (Textversion) der gesprochenen Worte mit Hinweisen zur sichtbaren bedeungsrelevanten Handlung wird als verlinktes Dokument (Format RTF oder HTML) zur Verfügung gestellt.

WCAG 2.0, 1.2.8, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-text-doc

Test-Tools:                                Sichtprüfung

1.2.9.          Reiner Audioinhalt (Live) (Stufe AAA)

Reiner Audioinhalt (Live): Eine Alternative für zeitbasierte Medien, die äquivalente Informationen für live übertragene reine Audioinhalte bietet, wird bereitgestellt.

Verstehen:

Eine Alternative ist für alle Live Audio-Medien bereitgestellt, damit die Inhalte z.B. auch von Gehörlosen verstanden werden können.

Beispiel:

Eine Live-Nachrichtensendung wird zusätzlich auch als Text übermittelt.

WCAG 2.0, 1.2.9, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-live-audio-only

Test-Tools:                                Sichtprüfung

1.3.        Erstellen Sie Inhalte, die auf verschiedene Arten dargestellt werden können (zum Beispiel mit einfacherem Layout), ohne dass Informationen oder Strukturen verloren gehen.

1.3.1.          Info und Beziehungen (Stufe A)

Info und Beziehungen: Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, können durch Software bestimmt werden oder stehen in Textform zur Verfügung.

Verstehen 1.3.1 A.  Überschriften-Struktur:

Überschriften (h1, h2, h3, usw.) müssen jeden Inhaltsblock einleiten und die Gliederung und Bedeutung der Inhaltsblöcke der Webseite wiedergeben. Eine Webseite muss nicht unbedingt mit einer Überschrift 1 (h1) beginnen. Es wird jedoch besonders von blinden Screen-Reader-Benutzern als guter Stil verstanden, wenn Überschriften hierarchisch richtig aufgebaut sind (h1, gefolgt von h2, h3, usw.) und keine Ebenen übersprungen werden.

Beispiel 1.3.1 A Überschriften-Struktur

Abbildung 2: Schematische Ansicht mit grauen Flächen der Informationsblöcke einer typischen Website (links). Das zugrundeliegende Markup ist in der rechten Spalte ausgelegt. Die Informationsblöcke können mit vorangestellten Überschriften (h1, h2, ..., h6) und Listen (ul) strukturiert werden.

Unsichtbare Überschriften:

Überschriften können auch mittels CSS-Klasse unsichtbar dargestellt werden, indem Sie aus dem Viewport geschoben werden. Diese Klasse kann allgemein für unsichtbare Hinweise nur für Screen-Reader-Benutzer verwendet werden.

.hidden {

display: inline;

left: -1000px;

overflow: hidden;

width: 0px;

position: absolute;

top: -1000px;

height: 0px
}

Verstehen 1.3.1 B. Aufzählungen und Listen:

Listen sind wichtige Elemente der semantischen Gruppierung und Gliederung. Sie helfen insbesondere Screen-Reader Benutzern zu erkennen, wenn Informationen aufgelistet werden oder welche Links zusammen gehören und wo eine neue Linkgruppierung beginnt.

Aufzählungen sind für Screen-Reader Benutzer ohne Formatierung ein unübersichtlicher Textbandwurm, es ist nicht ersichtlich wie lange dieser dauert. Im Unterschied dazu wird eine Liste vom Screen-Reader so angekündigt: „Liste mit 12 Einträgen ...“

-       Inhaltliche Aufzählungen, wie zum Beispiel Produktlisten, nicht nur als Liste darstellen, sondern auch als Liste formatieren.

-       Navigationen immer als Liste formatieren - auch wenn es sich um eine horizontale Navigation handelt.

-       Links in logische Einheiten zusammenfassen. Zum Beispiel mehrere Hauptkategorien-Gruppen in jeweils einer Liste (<ul> oder <ol>) und Unterkategorien wiederum in einer weiteren verschachtelten Liste zusammenfassen.

-       Für Glossare, kommentierte Linklisten und ähnliches können Definitionslisten (DL) verwendet werden, siehe Code-Beispiel.

-       Listen korrekt verschachteln, siehe Code-Beispiel.

Code-Beispiele:

<ul id="menue"><!--richtige Verschachtelung beachten -->

   <li><a href="#">Oberpunkt 01</a>

        <ul class="submenue" id="active">

           <li><a href="#">Untermenü 1.a</a></li>

           <li><a href="#">Untermenü 1.b</a></li>

           <li><a href="#">Untermenü 1.c</a></li>

        </ul>

   </li>         

<li> ... </li>

</ul>

 

<dl><!--Definitionsliste -->

  <dt><a href="website.htm">Website</a></dt>

  <dd>Beschreibung oder Kommentar des im DT-Element enthaltenen Links</dd>

  <dd>Auch mit mehreren Definitions-Daten-Zellen möglich</dd>

</dl>

 

Verstehen 1.3.1 C. Formular-Beziehungen:

Für die logische Verknüpfung von Beschriftungen mit Formularfeldern muss das Element <label> eingesetzt werden. Für die Schaffung von Abschnitten bei umfangreicheren Formularen und für die Gruppierung von Checkbox- und Radio-Buttons eignet sich das Element <fieldset>.

Best Practice für Formulare: http://www.usability.com.au/resources/wcag2/
Hinweise zu Formularen:

Für die logische Verknüpfung von Beschriftungen mit Formularfeldern muss das Label-Element eingesetzt werden.

Code-Beispiel:

<form action="formular.html">

    <fieldset>

         <legend>

               Persönliche Angaben

         </legend>

         <label for="vn">

               Vorname:

         </label>

         <input type="text" id="vn" title="Bitte Vornamen eingeben" name="vorname" value="">

         <br />

         <label for="nn">

               Nachname:

         </label>

         <input type="text" id="nn" title="Bitte Nachnamen eingeben" name="nachname" value="">

         <br />

         Bitte ankreuzen:

         <input type="checkbox" id="auswahl" name="agb" value="">

         <label for="auswahl">

               Die AGBs habe ich gelesen.</label>

         <br />

    </fieldset>

</form>

Kommentar:

Was im Label definiert wurde, wird von der Sprachausgabe vorgelesen. „Legend“ wird benötigt, um die Formularabschnitte (fieldset) zu beschriften. Sinnvolle Reihenfolge und kurze, klare Beschriftungen beachten.

So liest der Screen-Reader das obenstehende Code-Beispiel:

„Formular

Persönliche Angaben: Eingabefeld Vorname,
Persönliche Angaben: Eingabefeld Nachname,
Persönliche Angaben: Auswahlfeld Die AGBs habe ich gelesen
Ende Formular“

Checkboxen und Radio.Buttons

Damit Checkboxen und Radio-Buttons auch von blinden Anwendern korrekt verarbeitet werden können, müssen diese über ein "fieldset" mit der zugehörigen Beschriftung verknüpft werden.

Code-Beispiel:

<fieldset>

<legend>Anrede</legend>

<div>

<input type="radio" name="anrede" id="anrede_frau" value="1" />

<label for="anrede_frau">Frau</label>

</div>

<div>

<input type="radio" name="anrede" id="anrede_mann" value="0" />

<label for="anrede_mann">Mann</label>

</div>

</fieldset>

Kommentar:

"IDs" sind immer eindeutig über das gesamte Dokument, können also nur einmal verwendet werden. Die "name"-Attribute der Radio-Elemente sind gleich, die "ID"-Elemente sind unterschiedlich.

Verstehen 1.3.1 D. Daten-Tabellen

Bei einfachen Datentabellen mit nur 1 Spaltenüberschrift kann die erste Zeile als Header gelten, indem anstelle von "tr" "th" verwendet wird. Die scope-Attribute können weggelassen werden, siehe Code-Beispiel 1.

Bei zweidimensionalen Datentabellen werden „scope“-Attribute richtig verwendet, siehe Code-Beispiel 2. Für mehrdimensionale Datentabellen oder zusammengefasste Spaltenüberschriften, kann mit dem "ID"-Attribut eine Zuordnung erzeugt werden, siehe Technik H43.

Tabellen benötigen eine Überschrift, dies kann eine vorangestellte Überschrift (h2, ..., h6) sein oder das vorgesehene "caption"-Element. Die "Caption" kann auch für visuelle Benutzer ausgeblendet werden, siehe Code-Beispiel 1.

Komplexe Tabellen benötigen zusätzlich eine Zusammenfassung (summary). Da diese Zusammenfassung vom Screen-Reader immer gelesen wird, sollte auf Kürze und Aussagekraft geachtet werden. Siehe Code-Beispiel 2.

Bei Tabellen niemals leere Zellen verwenden um Abstände zu erzeugen. Ist eine Zelle leer, so wird am besten ein Zeichen gesetzt wie: - oder 0 (null).

Code-Beispiel 1 für eine einfache Datentabelle mit Spaltenüberschriften nur mit Headern (<th>):

Drei Städte im Vergleich

Chur

Bern

Basel

1287

2355

2233

 

<table>

    <caption>Drei Städte im Vergleich</caption>

    <tr>

         <th>Chur</th>

         <th>Bern</th>

         <th>Basel</th>

    </tr>

    <tr>

         <td>1287</td>

         <td>2355</td>

         <td>2233</td>

    </tr>

</table>

Code-Beispiel 2 für eine Datentabelle mit Spalten- und Zeilenüberschriften mit Scope:

Poststellen in der Schweiz

Poststellen

2005

2006

2007

Hauptfilialen

2389

2357

2312

Filialen

657

654

649

Agenturen

135

129

150

 

<table summary="Die Anzahl Hauptfilialen, Filialen und Agenturen werden in den Jahren 2005, 2006 und 2007 verglichen">

    <caption>Poststellen in der Schweiz</caption>

    <tr>

                   <th scope="col">Postellen</th>

                   <th scope="col">2005</th>

                   <th scope="col">2006</th>

                   <th scope="col">2007</th>

              </tr>

              <tr>

         <th scope="row">Hauptfilialen</th>

         <td>2'389</td>

         <td>2'357</td>

         <td>2'312</td>

    </tr>

    <tr>

         <th scope="row">Filialen</th>

                   <td>657</td>

                   <td>654</td>

                   <td>649</td>

    </tr>

    <tr>

         <th scope="row">Agenturen</th>

         <td>135</td>

         <td>129</td>

         <td>150</td>

    </tr>
</table>

Verstehen 1.3.1 E. Zeichenverwendung

Die Trennung von Information mit Struktur (Inhalt und HTML) und Darstellung (CSS) ist gewährleistet. Text wird mit dem semantisch richtigen Markup formatiert, z.B. Zitate mit <cite> und Auszüge mit <blockquote>, aber auch: <q>, <em> und <strong>, <sup>,<sub> werden angewendet.

Wenn Schriftvariationen eine inhaltliche Bedeutung haben, muss diese für alle erfahrbar sein (z.B. kursive Schrift ist für Screen-Reader nicht nachvollziehbar).

Keine Leerzeichen oder <pre> zum Layouten verwenden.

Elemente, wie zum Beispiel das Del-Element sind zu vermeiden, da sie von Screen-Readern nicht korrekt ausgewertet werden. Variationsunterschiede (z.B. wenn mehrere Personen an einem Text arbeiten) müssen deswegen im Text deutlich werden.

WCAG 2.0, 1.3.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation 

Test-Tools:                                Web Developer Toolbar, Web Accessibility Toolbar, Quellcode-Prüfung, Sichtprüfung

1.3.2.          Bedeutungstragende Reihenfolge (Stufe A)

Bedeutungstragende Reihenfolge: Wenn die Reihenfolge, in der Inhalte präsentiert werden, sich auf deren Bedeutung auswirkt, kann die korrekte Leseabfolge durch Software bestimmt werden.

Verstehen:

Alle Inhalte werden in sinnvoller Reihenfolge angeordnet, damit die Bedeutung stimmt auch wenn z.B. ein Screen-Reader den Inhalt ohne CSS und linear wiedergibt.

Beispiel 1.3.2 Reihenfolge

Abbildung 3: Die Reihenfolge der Inhalte ist nicht nur visuell sinnvoll (Abbildung links), sondern auch mit abgeschalteten CSS so, dass die Bedeutung stimmt (Abbildung rechts).

WCAG 2.0, 1.2.8, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-sequence

Test-Tools:                                Sichtprüfung, Ausschaltung von CSS,

1.3.3.          Sensorische Eigenschaften (Stufe A)

Anweisungen, die für das Verständnis und die Bedienung von Inhalt bereitgestellt werden, stützen sich nicht nur auf sensorische Eigenschaften von Komponenten wie Form, Grösse, visuelle Position, Ausrichtung oder Ton.

Anmerkung: Für Anforderungen in Bezug auf Informationsvermittlung über Farbe allein, beachten Sie Richtlinie 1.4.

Verstehen:

Informationen und Anweisungen werden so vermittelt, dass sie unabhängig von allfälligen sensorischen Einschränkungen verstanden werden können.

Beispiel:

"Weiterführende Informationen finden Sie im grau hinterlegten Kasten oben rechts.“
sondern:
Weiterführende Informationen finden Sie im Kasten "Einsetzen einer sinnvollen Überschrift".

WCAG 2.0, 1.3.3, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-understanding 

Test-Tools:                                Sichtprüfung, Greasemonkey-Script

1.4.         Unterscheidbar: Machen Sie es für den Benutzer leichter, Inhalte zu sehen und zu hören, einschliesslich der Trennung zwischen Vordergrund und Hintergrund.

1.4.1.          Benutzung von Farbe  (Stufe A)

Farbe wird nicht als einziges visuelles Mittel benutzt, um Informationen zu vermitteln, eine Handlung zu kennzeichnen, eine Reaktion zu veranlassen oder ein visuelles Element zu unterscheiden.

Anmerkung: Dieses Erfolgskriterium spricht ausdrücklich die Farbwahrnehmung an. Andere Formen der Wahrnehmung werden in Richtlinie 1.3 behandelt einschliesslich programmtechnischer Zugriff auf Farbe und andere visuelle Darstellungskodierungen.

Verstehen:

Informationen und Anweisungen werden so vermittelt, dass sie unabhängig von der Fähigkeit Farben zu erkennen, verstanden werden können.

Beispiel:

Aktive Menüpunkte sind nicht nur farbig sondern z.B. auch fett markiert. Überschriften sind nicht nur farbig, sondern auch grösser und fetter.

Abbildung 4: Die Abbildung links zeigt bei welchen Kursen es noch freie Plätze gibt. Die Information wird allein durch die Farben grün, rot und Gelb vermittelt. Ein Mensch mit Farbenfehlsichtigkeit oder ein Blinder kann diese Informationen nicht wahrnehmen. Bereits ein zusätzliches Zeichen (Abbildung rechts) genügt, um die Unterscheidbarkeit unabhängig von Farbe mitzuteilen.

WCAG 2.0, 1.4.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-without-color 

Test-Tools:                                Sichtprüfung, Ausschaltung von CSS, Verwendung benutzerdefinierter Farbeinstellungen

1.4.2.          Audio-Steuerelement (Stufe A)

Wenn Audioinhalt auf einer Webseite automatisch für mehr als 3 Sekunden abgespielt wird, dann gibt es entweder einen Mechanismus, um die Wiedergabe zu pausieren oder zu beenden, oder es gibt einen Mechanismus, um die Lautstärke unabhängig von der allgemeinen Systemlautstärke zu regeln. (Stufe A)

Anmerkung: Jeglicher Inhalt, der dieses Erfolgskriterium nicht erfüllt, kann die Möglichkeit eines Benutzers beeinträchtigen, die ganze Seite zu nutzen. Daher muss jeglicher Inhalt auf einer Webseite (egal ob er dazu benutzt wird, andere Erfolgskriterien zu erfüllen oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsbedingung 5: Nicht störend.

Verstehen:

Automatisch abspielendes Audio stört z.B. Screen-Reader Benutzer stark und muss gestoppt oder leiser gemacht werden können.

Beispiel:

Steuer-Buttons (Play, Stopp usw.) müssen zur Verfügung stehen.

WCAG 2.0, 1.4.2, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-dis-audio 

Test-Tools:                                Sichtprüfung

1.4.3.          Kontrast (Minimum) (Stufe AA)

Die visuelle Darstellung von Text und Bildern von Text hat ein Kontrastverhältnis von mindestens 4,5:1 mit folgenden Ausnahmen:

-       Grosser Text: Grosser Text und Bilder von grossem Text haben ein Kontrastverhältnis von mindestens 3:1;

-       Nebensächlich: Für Text oder Bilder eines Textes, die Teil eines inaktiven Bestandteils der Benutzerschnittstelle, rein dekorativ, für niemanden sichtbar oder Teil eines Bildes sind, welches signifikanten anderen visuellen Inhalt enthält, gibt es keine Kontrastanforderung.

-       Wortbildmarken: Text, der Teil eines Logos oder eines Markennamens ist, hat keine Kontrastanforderungen.

Verstehen:

Ausreichender Farbkontrast ist sehr wichtig, damit Text generell besser lesbar ist, weil er sich stärker vom Hintergrund abhebt. Zahlreiche Menschen sind sehbehindert und viele nutzen zusätzliche individuelle Einstellungen, z.B. die Farb-Invertierung. Damit diese Einstellungen die gewünschte Wirkung erzielen können, ist ausreichender Kontrast notwendig. Zu beachten sind auch die Links bei Hover (Mouse over) und die fokussierten und aktiven Links.

Notwendiger Mindestkontrast:

Schrift: Kontrastverhältnis von mindestens 4,5:1
Grosse Schrift (ab 18 Pt oder 14 Pt + fett): Kontrastverhältnis von mindestens 3:1
(Gilt auch für Texte in informativen Grafiken, aber nicht zwingend für Logos und Schriftzüge)

Anmerkung zur Schriftgrösse:

Das unübliche Mass Point (Pt) wird von der WAI verwendet, wir rechnen dies wie folgt um: Bei einem Bildschirm (Auflösung 1200 x 900 Pixel) entspricht die Schriftgrösse 18 Point mind. 5,3 mm Höhe des grossen W oder 14 Pt und fett, entspricht mind. 4 mm Höhe des grossen, fetten W.

Beispiel 1.4.3 Farbkontrast

Abbildung 5: Mit dem Test-Tool "Colour Contrast Analyser" können die verwendeten Farben bereits im Design-Prozess gemessen und abgestimmt werden. Der Algorithmus "Luminanz" misst die Farben in der für die WCAG 2.0 erforderlichen Weise.

WCAG 2.0, 1.4.3, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast

Test-Tools:                                Sichtprüfung, Kontrastmessung mit Colour-Contrast-Analyser (Freeware Win, Mac):

                                                  http://www.visionaustralia.org.au/info.aspx?page=628

1.4.4.          Textgrösse ändern (Stufe AA)

Mit Ausnahme von Untertiteln und Bildern eines Textes, kann Text ohne assistierende Technik um bis zu 200 Prozent geändert werden, ohne dass dabei Inhalt oder Funktionalität verloren geht.

Verstehen:

Viele Menschen mit Sehbehinderung sind auf die Funktionen des Browsers zur Vergrösserung angewiesen. Damit sie diese nutzen können, muss das Layout und das Schriftbild anpassbar sein.

Anforderungen:

Diese Voraussetzungen sind erfüllt:

-       Textgrösse (Font-Size) ist in den CSS in % oder em definiert.

-       Es darf bei Vergrösserung keine Layoutüberlagerung geben. Es darf kein Text verschwinden und dieser muss zu jeder Zeit lesbar sein.

-       Zoomfunktion (wenn vorhanden) des ganzen Fensterinhaltes bis 200%, Testschritte:

o    Internet Explorer 7, 8 Zoomfunktion: 200%.

o    Firefox: Zoomfunktion: 200%; 6 mal "strg" + "+" drücken (mit abgeschaltetem Nur Text vergrössern)

-       Text-Vergrösserung bis 200% (ohne Layoutüberlagerung), Testschritte:

o    Im Internet Explorer 7, 8: "Textgrösse gross"

o    Im Firefox: Textvergrösserung: 2 mal "strg" + "+" drücken (mit eingeschaltetem Nur Text vergrössern).

Beispiel:

Abbildung 6: Die Webseite links in normaler Darstellung und rechts mit 200% Text-Vergrösserung im Browser Firefox. Alle Texte müssen noch lesbar sein.

WCAG 2.0, 1.4.4, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale 

Test-Tools:                                Internet Explorer, Firefox, Sichtprüfung

1.4.5.          Bilder eines Textes (Stufe AA)

Wenn die benutzten Techniken die visuelle Präsentation bewirken können, dann wird Text statt Bilder eines Textes dazu benutzt, Informationen zu vermitteln mit den folgenden Ausnahmen:

-       Anpassbar: Das Bild eines Textes kann visuell an die Anforderungen des Benutzers angepasst werden;

-       Unentbehrlich: Eine bestimmte Präsentation von Text ist für die vermittelten Informationen unentbehrlich.

Anmerkung: Wortbildmarken (Text, der Teil eines Logos oder Markennamens ist) werden als unentbehrlich betrachtet.

Verstehen:

Für Inhalte wird Text anstelle von Schriftgrafik eingesetzt. Text kann mit grafischen CSS-Techniken in der Darstellung gesteuert werden.

WCAG 2.0, 1.4,5, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-text-presentation 

Test-Tools:                                Internet Explorer, Firefox, Einstellung von benutzerdefinierten Farben, Sichtprüfung

1.4.6.          Kontrast (erhöht) (Stufe AAA)

Die visuelle Präsentation von Text und Bildern eines Textes hat ein Kontrastverhältnis von mindestens 7:1, mit folgenden Ausnahmen: (Stufe AAA)

-       Grosser Text: Grosser Text und Bilder von grossem Text haben ein Kontrastverhältnis von mindestens 4,5:1;

-       Nebensächlich: Für Text oder Bilder eines Textes, die Teil eines inaktiven Bestandteils der Benutzerschnittstelle, rein dekorativ, für niemanden sichtbar oder Teil eines Bildes sind, welches signifikanten anderen visuellen Inhalt enthält, gibt es keine Kontrastanforderung.

-       Wortbildmarken: Text, der Teil eines Logos oder eines Markennamens ist, hat keine Mindest-Kontrastanforderungen.

Verstehen:

Ausreichender Farbkontrast ist sehr wichtig, damit Text generell besser lesbar ist, weil er sich stärker vom Hintergrund abhebt.

Dieses Erfolgskriterium erweitert EK 1.4.3 um höhere Mindestwerte.

Zu beachten sind auch die Links bei Hover (Mouse over) und die fokussierten und aktiven Links.

Notwendiger Mindestkontrast:

Schrift: Kontrastverhältnis von mindestens 7:1
Grosse Schrift (ab 18 Pt oder 14 Pt + gefettet): Kontrastverhältnis von mindestens 4,5:1
(Gilt auch für Texte in informativen Grafiken, aber nicht zwingend für Logos und Schriftzüge)

Anmerkung zur Schriftgrösse:

Bei einem Bildschirm (Auflösung 1200 x 900 Pixel) entspricht die Schriftgrösse 18 Point mind. 5,3 mm Höhe des grossen W oder 14 Pt und fett, entspricht mind. 4 mm Höhe des grossen, fetten W.

WCAG 2.0, 1.4.6, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast7 

Test-Tools:                                Color Contrast Analyser

1.4.7.          Leiser oder kein Hintergrund-Audioinhalt (Stufe AAA)

Für aufgezeichneten, reinen Audioinhalt, der (1) hauptsächlich Sprache im Vordergrund enthält, (2) kein Audio-CAPTCHA oder ein Audio-Logo ist und (3) bei dem es sich nicht um eine Vokalisierung handelt, die hauptsächlich als musikalischer Ausdruck bestimmt ist wie beispielsweise Singen oder Rappen, gilt mindestens eines der Folgenden: (Stufe AAA)

Kein Hintergrund: Der Audioinhalt enthält keine Hintergrundgeräusche.

-       Abschalten: Die Hintergrundgeräusche können abgeschaltet werden.

-       20 dB: Die Hintergrundgeräusche sind mindestens 20 Dezibel leiser als der Sprachinhalt im Vordergrund mit der Ausnahme von gelegentlichen Geräuschen, die nur 1 oder 2 Sekunden andauern.

Anmerkung: Gemäss der Definition von „Dezibel“ sind Hintergrundgeräusche, die diese Anforderung erfüllen, ungefähr viermal so leise wie der Sprachinhalt im Vordergrund.

Verstehen:

Damit Benutzer, die auf Sprache angewiesen sind, diese auch verstehen können, haben sprachlich wiedergegebene Inhalte keine oder sehr leise Hintergrundgeräusche.

WCAG 2.0, 1.4.6, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-noaudio 

Test-Tools:                                Sichtprüfung

1.4.8.          Visuelle Präsentation (Stufe AAA)

Für die visuelle Präsentation von Textblöcken gibt es einen Mechanismus, um das Folgende zu erreichen:

-       Vorder- und Hintergrundfarben können vom Benutzer ausgewählt werden.

-       Die Breite beträgt nicht mehr als 80 Zeichen oder Glyphen (40 wenn es sich um Chinesisch, Japanisch oder Koreanisch handelt).

-       Text ist nicht im Blocksatz ausgerichtet (sowohl links- als auch rechtsbündig ausgerichtet).

-       Der Zeilenabstand (Durchschuss) ist mindestens 1,5-fach innerhalb von Paragraphen und der Paragraphenabstand ist mindestens 1,5-fach so gross wie der Zeilenabstand.

-       Die Textgrösse kann ohne assistierende Technik bis auf 200 Prozent skaliert werden und zwar so, dass der Leser nicht horizontal scrollen muss, um eine Textzeile in einem bildschirmfüllenden Fenster zu lesen.

Verstehen:

Die Lesbarkeit der Inhalte wird enorm erhöht durch die Einhaltung der aufgeführten typographischen Kriterien.

WCAG 2.0, 1.4.8, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-visual-presentation 

Test-Tools:                                Sichtprüfung

1.4.9.          Bilder eines Textes (keine Ausnahme) (Stufe AAA)

Bilder eines Textes werden nur rein dekorativ benutzt oder dann, wenn eine bestimmte Präsentation von Text unentbehrlich für die zu vermittelnden Informationen ist.

Anmerkung: Wortbildmarken (Text, der Teil eines Logos oder Markennamens ist) werden als unentbehrlich betrachtet.

Verstehen:

Für relevante Inhalte wird Text anstelle von Schriftgrafik eingesetzt.

WCAG 2.0, 1.4.9, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-text-images 

Test-Tools:                                Sichtprüfung

2. Prinzip: Bedienbar

Bestandteile der Benutzeroberfläche und Navigation müssen bedienbar sein.

2.1.        Sorgen Sie dafür, dass alle Funktionalitäten von der Tastatur aus verfügbar sind.

2.1.1.          Tastatur (Stufe A)

Alle Funktionalitäten des Inhalts sind durch eine Tastaturschnittstelle bedienbar, ohne dass eine bestimmte Zeiteinteilung für einzelne Tastenanschläge erforderlich ist, ausser wenn die zugrunde liegende Funktion Eingaben verlangt, die vom Pfad der Bewegung des Benutzers und nicht nur von den Endpunkten abhängig sind.

Anmerkung 1: Diese Ausnahme bezieht sich auf die zugrunde liegende Funktion und nicht auf die Eingabetechnik. Zum Beispiel: Wenn man Handschrift benutzt, um Text einzugeben, dann verlangt die Eingabetechnik (Handschrift) Pfad-abhängige Eingaben, die zugrunde liegende Funktion (Texteingabe) verlangt dies aber nicht.

Anmerkung 2: Es ist nicht verboten noch sollte es Sie davon abhalten, eine Maus-Eingabe oder andere Eingabemethoden zusätzlich zur Tastaturbedienung zur Verfügung zu stellen.

Verstehen:

Viele Benutzer bedienen den PC mittels Tastatur und nicht mit der Maus. Auch spezielle Eingabegeräte verwenden die Tastatur als Schnittstelle.

Wird der Benutzer vorher in Textform informiert, können auch andere Tastaturtasten als die üblichen (Tab-, Pfeiltasten) verwendet werden, um eine Funktion auszuführen.

WCAG 2.0, 2.1.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-keyboard-operable 

Test-Tools:                                Sichtprüfung

2.1.2.          Keine Tastaturfalle (Stufe A)

Wenn der Tastaturfokus durch eine Tastaturschnittstelle auf einen Bestandteil der Seite bewegt werden kann, dann kann der Fokus von diesem Bestandteil weg bewegt werden, indem man nur die Tastaturschnittstelle benutzt; wenn man dazu mehr als nicht modifizierte Pfeil- oder Tabulatortasten oder andere übliche Ausstiegsmethoden benutzen muss, dann wird der Benutzer über die Methode zum Bewegen des Fokus informiert.

Anmerkung: Jeglicher Inhalt, der dieses Erfolgskriterium nicht erfüllt, kann die Möglichkeit eines Benutzers beeinträchtigen, die ganze Seite zu nutzen. Daher muss jeglicher Inhalt auf einer Webseite (egal ob er dazu benutzt wird, andere Erfolgskriterien zu erfüllen oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsbedingung 5: Nicht-Störend.

Verstehen:

Viele Benutzer bedienen den PC mittels Tastatur. Elemente, wie z.B. Videos oder eigene Programmierungen, können den Tastaturfokus „einfangen“ und eine weitere Bedienung ist nicht mehr möglich, diese Fallen müssen in allen gängigen Browsern vermieden werden.

Wird der Benutzer vorher in Textform informiert, können auch andere Tastaturtasten als die üblichen (Tab-, Pfeiltasten) verwendet werden, um eine Funktion auszuführen.

Beispiel:

Hinweis: „Lightbox mit ESC schliessen“.

 

WCAG 2.0, 2.1.2, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-trapping 

Test-Tools:                                Sichtprüfung

2.1.3.          Tastatur (keine Ausnahme) (Stufe AAA)

Alle Funktionalitäten des Inhalts sind durch eine Tastaturschnittstelle bedienbar, ohne dass eine bestimmte Zeiteinteilung für einzelne Tastenanschläge erforderlich ist.

Verstehen:

Viele Benutzer bedienen den PC mittels Tastatur. Die Tasturbedienbarkeit wird ohne Ausnahme erwartet.

WCAG 2.0, 2.1.3, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-all-funcs 

Test-Tools:                                Sichtprüfung

2.2.        Geben Sie den Benutzern ausreichend Zeit, Inhalte zu lesen und zu benutzen.

2.2.1.          Zeiteinteilung anpassbar (Stufe A)

Für jede zeitliche Begrenzung, die vom Inhalt festgelegt wird, gilt mindestens eines der Folgenden:

-       Abschalten: Der Benutzer kann die zeitliche Begrenzung abschalten, bevor er darauf trifft oder

-       Anpassen: Der Benutzer darf die zeitliche Begrenzung anpassen, bevor er darauf trifft, und zwar so weitreichend, dass es sich um die mindestens zehnfache Zeit der Standardeinstellung handelt oder

-       Ausweiten: Der Benutzer wird gewarnt, bevor die Zeit abläuft und bekommt mindestens 20 Sekunden Zeit, um die zeitliche Begrenzung mit einer einfachen Handlung auszuweiten (zum Beispiel: „Drücken Sie die Leertaste“) und der Benutzer darf die zeitliche Begrenzung mindestens 10 mal ausweiten oder

-       Echtzeit-Ausnahme: Die zeitliche Begrenzung ist ein erforderlicher Bestandteil eines Echtzeit-Ereignisses (zum Beispiel einer Auktion) und es gibt keine Alternative zur zeitlichen Begrenzung oder

-       Unentbehrliche Ausnahme: Die zeitliche Begrenzung ist unentbehrlich und eine Ausweitung dieser würde die Handlung ungültig machen oder

-       20 Stunden-Ausnahme: Die zeitliche Begrenzung beträgt mehr als 20 Stunden.

Anmerkung: Dieses Erfolgskriterium hilft dabei sicherzustellen, dass Benutzer Aufgaben beenden können ohne unerwartete Änderungen am Inhalt oder Gesamtzusammenhang, die das Ergebnis einer zeitlichen Begrenzung sind. Dieses Erfolgskriterium sollte zusammen mit Erfolgskriterium 3.2.1 betrachtet werden, welches Änderungen am Inhalt oder am Gesamtzusammenhang als Ergebnis von Benutzerhandlungen begrenzt.

Verstehen:

Viele Benutzer bedienen den PC sehr langsam. Ist eine Zeiteinteilung oder Zeitlimitierung notwendig, muss diese deshalb anpassbar sein.

Beispiel:

Die Session-Zeit innerhalb eines Bestellablaufs.

WCAG 2.0, 2.2.1, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-required-behaviors 

Test-Tools:                                Sichtprüfung

2.2.2.          Pausieren, beenden, ausblenden (Stufe A)

Für sich bewegende, blinkende, scrollende oder sich automatisch aktualisierende Informationen gelten alle folgenden Punkte:

-       Sich bewegend, blinkend, scrollend: Für alle sich bewegenden, blinkenden oder scrollenden Informationen, die (1) automatisch beginnen, (2) länger als 5 Sekunden dauern und (3) parallel zu anderen Inhalten dargestellt werden, gibt es einen Mechanismus für den Benutzer, um diese zu pausieren, zu beenden oder auszublenden ausser die Bewegung, das Blinken oder das Scrollen ist Teil einer Handlung, bei der es unentbehrlich ist und

-       Automatische Aktualisierung: Für alle sich automatisch aktualisierenden Informationen, die (1) automatisch beginnen und (2) parallel mit anderen Inhalten dargestellt werden, gibt es einen Mechanismus, damit der Benutzer die Aktualisierung pausieren, beenden oder ausblenden oder die Häufigkeit der Aktualisierung kontrollieren kann, ausser die automatische Aktualisierung ist Teil einer Handlung, bei der sie unentbehrlich ist.

Anmerkung 1: Für Anforderungen in Bezug auf flackernden oder blitzenden Inhalt beachten Sie Richtlinie 2.3.

Anmerkung 2: Jeglicher Inhalt, der dieses Erfolgskriterium nicht erfüllt, kann die Möglichkeit eines Benutzers beeinträchtigen, die ganze Seite zu nutzen. Daher muss jeglicher Inhalt auf einer Webseite (egal ob er dazu benutzt wird, andere Erfolgskriterien zu erfüllen oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsbedingung 5: Nicht-Störend.

Anmerkung 3: Inhalt, der regelmässig durch Software aktualisiert oder zum Benutzeragenten gestreamt wird, muss Informationen, die zwischen dem Beginn der Pause und der Wiederaufnahme der Präsentation generiert oder erhalten werden, nicht aufrechterhalten oder anzeigen, da dies möglicherweise technisch nicht möglich ist und es in vielen Situationen irreführend sein könnte, dies zu tun.

Anmerkung 4: Eine Animation, die als Teil einer Vorlade-Phase oder einer ähnlichen Situation entsteht, kann als unentbehrlich angesehen werden, wenn für alle Benutzer während dieser Phase keine Interaktion stattfinden kann und wenn es Benutzer verwirren könnte oder dazu führen könnte, dass sie denken, dass der Inhalt eingefroren oder defekt ist, wenn der Fortschritt nicht angezeigt wird.

Verstehen:

Benutzer mit speziellen kognitiven Bedürfnissen oder Benutzer, die mit Assistenzgeräten, z.B. mit einem Screen-Reader arbeiten, können von automatisch wechselnden Inhalten daran gehindert werden, die Seite zu nutzen.

Beispiel:

Ein automatischer News-Ticker, eine Slide-Show haben einen Stopp-Schalter.

WCAG 2.0, 2.2.2, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-pause 

Test-Tools:                                Sichtprüfung

2.2.3.          Keine Zeiteinteilung (Stufe AAA)

Die Zeiteinteilung ist kein unentbehrlicher Teil eines vom Inhalt dargestellten Ereignisses oder einer Handlung ausser bei nicht-interaktiven synchronisierten Medien und Echtzeit-Ereignissen.

Verstehen:

Viele Benutzer bedienen den PC sehr langsam. Eine Zeiteinteilung oder Zeitlimitierung ist deshalb zu vermeiden.

Beispiel:

Die Session in einem Bestellablauf ist zeitlich nicht limitiert.

WCAG 2.0, 2.2.3, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-no-exceptions

Test-Tools:                                Sichtprüfung

2.2.4.          Unterbrechungen (Stufe AAA)

Unterbrechungen können vom Benutzer aufgeschoben oder unterdrückt werden mit Ausnahme von Unterbrechungen, bei denen es sich um einen Notfall handelt.

Verstehen:

Für viele Benutzer sind z.B. Werbeinblendungen oder Newsmeldungen ein Hindernis, wenn sie die Handlung unterbrechen. Warnmeldungen bei fehlerhaften Benutzereingaben gelten z.B. als Notfall und sind zulässig.

Beispiel:

Popup-Werbefenster, die vor dem Inhalt eine Produktwerbung anzeigen und vom Benutzer geschlossen werden müssen.

WCAG 2.0, 2.2.4, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-postponed

Test-Tools:                                Sichtprüfung

2.2.5.          Erneute Authentifizierung (Stufe AAA)

Wenn eine authentifizierte Sitzung abläuft, kann der Benutzer die Handlung nach der erneuten Authentifizierung ohne Datenverlust fortführen.

Verstehen:

Keine Erklärung notwendig.

WCAG 2.0, 2.2.5, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-server-timeout 

Test-Tools:                                Sichtprüfung

2.3.        Gestalten Sie Inhalte nicht auf Arten, von denen bekannt ist, dass sie zu Anfällen führen.

2.3.1.          Grenzwert von dreimaligem Blitzen oder weniger (Stufe A)

Grenzwert von dreimaligem Blitzen oder weniger: Webseiten enthalten nichts, was öfter als dreimal in einem beliebigen, eine Sekunde dauernden Zeitraum blitzt, oder der Blitz ist unterhalb der allgemeinen Grenzwerte zu Blitzen und roten Blitzen.

Anmerkung: Jeglicher Inhalt, der dieses Erfolgskriterium nicht erfüllt, kann die Möglichkeit eines Benutzers beeinträchtigen, die ganze Seite zu nutzen. Daher muss jeglicher Inhalt auf einer Webseite (egal ob er dazu benutzt wird, andere Erfolgskriterien zu erfüllen oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsbedingung 5: Nicht-Störend.

Verstehen:

Verschiedene Arten von Blitzen können bei Menschen mit lichtempfindlichen Anfallsleiden zu Anfällen führen. Durch die Lichtstärke des Bildschirms ist dies besonders unmittelbar.

WCAG 2.0, 2.3.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-seizure-does-not-violate 

Test-Tools:                                Sichtprüfung

2.3.2.          Drei Blitze (Stufe AAA)

Webseiten enthalten nichts, das öfter als dreimal in einem beliebigen, eine Sekunde dauernden Zeitraum blitzt.

Verstehen:

Verschiedene Arten von Blitzen können bei Menschen mit lichtempfindlichen Anfallsleiden zu Anfällen führen. Durch die Lichtstärke des Bildschirms ist dies besonders unmittelbar.

WCAG 2.0, 2.3.2, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-seizure-three-times

Test-Tools:                                Sichtprüfung

2.4.        Stellen Sie Mittel zur Verfügung, um Benutzer dabei zu unterstützen zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden.

2.4.1.          Blöcke umgehen (Stufe A)

Es gibt einen Mechanismus, um Inhaltsblöcke zu umgehen, die auf verschiedenen Webseiten wiederholt werden.

Verstehen:

Verschiedene Benutzergruppen sind auf Bedienungshilfen zur Navigation auf Webseiten mit umfangreichem Inhalt angewiesen. Ein Blinder z.B. kann mit einem Sprunglink „zum Inhalt“ direkt zum Text gelangen, ohne sich auf jeder Seite wiederholt die ganze Navigation anhören zu müssen.

Anforderungen:

-       mind. 1 Sprunglink „direkt zum Inhalt“

-       Gruppierung von sich wiederholenden Informationsblöcken oder Auszeichnung dieser mit Überschriften

-       Accesskeys sind optional

Empfehlung:

Die Stiftung "Zugang für alle" empfiehlt, Sprunglinks und Accesskeys wie folgt zu definieren:

0 "Startseite"

1 "Navigation" (Sprunglink innerhalb Webpage)

2 "Inhalt" (Sprunglink innerhalb Webpage)

3 "Kontakt"

4 "Sitemap"

5 "Suche" (Sprunglink innerhalb Webpage)

6-9 optional (nur falls nötig und sinnvoll)

Die Sprunglink- und Accesskey-Beschriftung sollte kurz sein, z.B.: „Inhalt“, „Suche“, usw. Denn der Screen-Reader kündigt an: „Link Inhalt“. Diese Information ist eindeutig. Mit der Belegung der Zahlentasten wird gewährleistet, dass keine Konflikte mit Tastaturkürzeln von Betriebssystem und Softwares entstehen.

Sprunglinks und Accesskeys werden idealerweise miteinander kombiniert. Im unten aufgeführten Beispiel werden die Skiplinks ganz am Seitenanfang aufgeführt und mit der CSS-Klasse „skiplinks“ für Sehende aus dem Viewport geschoben.

Code-Beispiel HTML:

<body>

<ul class="skiplinks">

 <li><a href="#mainmenu"  accesskey="1" title="[ALT + 1]">Hauptnavigation</a></li>

 <li><a href="#content" accesskey="2" title="[ALT + 2]">Zum Inhalt</a></li>

 <li><a href="#additional" accesskey="6" title="[ALT + 6]">Zusätzliche Informationen</a></li>

</ul>

Code-Beispiel CSS:

.skiplinks {

display: inline;

left: -1000px;

overflow: hidden;

width: 0px;

position: absolute;

top: -1000px;

height: 0px
}

 

WCAG 2.0, 2.4.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-skip 

Test-Tools:                                Sichtprüfung

2.4.2.          Seite mit Titel versehen (Stufe A)

Webseiten haben einen Titel, der Thema oder Zweck beschreibt.

Verstehen:

Der Seitentitel ist für verschiedene Benutzer das wichtigste Orientierungsmerkmal. Deshalb soll der Titel den aktuellen thematischen Bezug beschreiben.

Beispiel:

Aktuell - Zugang für alle -  Behindertengerechte Technologienutzung

Code-Beispiel HTML:

<head>

  <title>Aktuell - Zugang für alle - Barrierefreie Technologienutzung

  </title>

  <meta ...

</head>

 

WCAG 2.0, 2.4.2, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-title 

Test-Tools:                                Sichtprüfung

2.4.3.          Fokus-Reihenfolge (Stufe A)

Wenn eine Webseite der Reihe nach navigiert werden kann und die Reihenfolge der Navigation die Bedeutung oder Bedienung beeinflusst, erhalten fokussierbare Komponenten den Fokus in einer Reihenfolge, der Bedeutung und Bedienbarkeit aufrechterhält.

Verstehen:

Viele Benutzer nutzen die Tastatur (Tabulator-Taste) zur Bedienung. Sie bewegen sich sequentiell durch die Webseite und sind auf die logische Reihenfolge der Links angewiesen.

Beispiel:

Besonders zur Bearbeitung von Formularen muss die Tabreihenfolge logisch sein.

WCAG 2.0, 2.4.3, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-focus-order

Test-Tools:                                Sichtprüfung

2.4.4.          Linkzweck (im Kontext) (Stufe A)

Der Zweck jedes Links kann durch den Linktext allein oder durch den Linktext zusammen mit seinem durch Software bestimmten Link-Kontext bestimmt werden ausser in Fällen, in denen der Zweck des Links mehrdeutig für Benutzer im Allgemeinen wäre.

Verstehen:

Viele Benutzer sind auf eine möglichst eindeutige Angabe des Linkziels angewiesen, siehe die aufgeführten Beispiele.

Problematisch ist das Öffnen von Neuen Fenstern (target="_blank")  Die Angabe „Neues Fenster“ ist für Screen-Reader nicht mehr erforderlich, da aktuelle Screen-Reader dies erkennen und ansagen. Sehende Benutzer begrüssen den Hinweis im title-Attribut des Link-Tags (title="in neuem Fenster").

Beispiele:

Ein Link gibt im Text Auskunft über die Informationen an diesem Linkziel
Eine Seite beinhaltet den Satz „Es gab in der historischen Periode des Mittelalters viel Blutvergiessen“. Die Textstelle „ historischen Periode des Mittelalters“ ist der Link.

Ein Link hat eine Text Erklärung vorangestellt
Eine Seite enthält den Satz „Erfahren Sie mehr über Irlands Kommission für E-Voting bei Go Vote!“ Die Textstelle „Go Vote!“ ist der Link.

Ein Icon und Text sind in den Link eingebunden
Ein Icon mit einer Abstimmungsmaschine und der Text „Irlands Kommission für E-Voting“ sind in denselben Link eingebunden. Der Alt-Text des Icons ist leer (alt=““) weil der Linkzweck bereits im Text neben dem Icon ausgeführt ist.

Eine Liste mit Buchtiteln
Eine Anzahl Bücher sind in drei Formaten verfügbar: HTML, PDF, mp3 (Hörbuch). Um die dreifache Wiederholung des Titels zu vermeiden (einmal für jedes Format), wird der Titel jedes Buches zum ersten Link (HTML), der zweite Link lautet „PDF“ und der Dritte Link lautet „mp3“. 

News Artikel-Übersicht
Eine Webseite enthält eine Anzahl News-Artikel. Die Startseite listet die ersten paar Sätze von jedem Artikel, gefolgt von einem Link „weiterlesen“. Weil die Links im selben Paragraphen eingebunden sind, können Screen-Reader mit einer Funktion den Zusammenhang herstellen und den Linkzweck interpretieren. Siehe Code-Beispiel 1.

Code-Beispiel 1:

<p><img src="teas003.jpg" alt="Blick auf das Fest mit Zürichsee im Hintergrund"> Das diesjährige Frühlingsfest war sehr gut besucht. <span class"wt03"><a href="123.html">Weiterlesen . . .</a></span></p>

Weitere Beispiele:

-       Zusammenfassung (PDF, 34 KB)

-       Bestellformular (in neuem Fenster)

Wichtiger Hinweis:

Für viele Benutzer sind eindeutige Linktexte die für sich alleine eindeutig sind, ein grosser Vorteil. Das Erfolgskriterium 2.4.9 Linkzweck (reiner Link) (Stufe AAA) wird deshalb empfohlen.

WCAG 2.0, 2.4.4, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs

Test-Tools:                                Web Accessibility Toolbar

2.4.5.          Verschiedene Methoden (Stufe AA)

Es gibt mehr als eine Methode, um eine Webseite innerhalb eines Satzes von Webseiten zu finden, ausser die Webseite ist das Ergebnis oder ein Schritt innerhalb eines Prozesses.

Verstehen:

Es gibt mindestens eine Methode zusätzlich zur Navigation innerhalb des Auftritts, um Zugang zu Inhalten zu bekommen.

Beispiel:

Eine Suchfunktion oder eine Sitemap (Inhaltsverzeichnis) oder beides.

WCAG 2.0, 2.4.3, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-mult-loc

Test-Tools:                                Sichtprüfung

2.4.6.          Überschriften und Beschriftungen (Labels) (Stufe AA)

Überschriften und Labels beschreiben ein Thema oder einen Zweck.

Verstehen:

Wichtig für die Lesbarkeit des Inhaltes sind Überschriften vor Abschnitten in längeren Texten und Überschriften vor oder Beschriftungen von unterschiedlichen Zonen einer Webseite. Diese helfen Benutzern die Zonen zu unterscheiden und anzusteuern. Auch aktive Zonen in Image-Maps und Links die programmierte Funktionen ausführen, müssen beschriftet sein.

Beispiel:

Die Beschriftungen müssen kurz und aussagekräftig sein.

WCAG 2.0, 2.4.6, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-descriptive 

Test-Tools:                                Sichtprüfung

2.4.7.          Fokus sichtbar (Stufe AA)

Jede durch Tastatur bedienbare Benutzerschnittstelle hat einen Bedienmodus, bei dem der Tastaturfokus sichtbar ist.

Verstehen:

Bei der Bedienung mit der Tastatur wird mit der Tabulatortaste von Link zu Link gesprungen. Wird ein Link angesprungen und dieser somit den Fokus hat, muss dies für visuell arbeitende Tastatur-Anwender sichtbar sein. Der fokussierte Link muss sich von den anderen Links visuell deutlich unterscheiden. Auch Sprunglinks sollen sichtbar werden, wenn diese den Fokus erhalten.

Beispiel:

a:focus, a:hover, a:active {
text-decoration:underline;

}

Beispiel 2.4.7 Fokus sichtbar

Abbildung 7: Bei der Bedienung mit der Tastatur (tabben mit Tabulatortaste) werden alle Links deutlich hervorgehoben und auch die Sprunglinks werden im gut sichtbaren Bereich (oben links) eingeblendet.

WCAG 2.0, 2.4.6, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-focus-visible 

Test-Tools:                                Sichtprüfung, Firefox und Internet Explorer

2.4.8.          Position (Stufe AAA)

Es gibt Informationen zu der Position des Benutzers innerhalb eines Satzes von Webseiten.

Verstehen:

Die Position des Benutzers innerhalb einer Anzahl Webseiten ist angegeben.

Beispiel:

Der Hinweis über die aktuelle Position wird über die Navigation gegeben
oder
Der Hinweis über die aktuelle Position wird aus dem Breadcrumb deutlich
oder
Im Text befindet sich ein Hinweis: "Sie sind bei Schritt 3 von 5".

WCAG 2.0, 2.4.8, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-location 

Test-Tools:                                Sichtprüfung

2.4.9.          Linkzweck (reiner Link) (Stufe AAA)

Es gibt einen Mechanismus, um den Zweck jedes Links durch den Linktext allein zu erkennen, ausser der Linkzweck wäre mehrdeutig für Benutzer im Allgemeinen.

Verstehen:

Wenn Links für sich alleine stehend verständlich sind, hilft dies einer grossen Anzahl Menschen. Z.B. nutzt ein blinder Screen-Reader Benutzer gerne die Funktion „Linkliste anzeigen“. Damit werden alle Links auf der jeweiligen Seite angezeigt, welche angewählt werden können.

Beispiel:

News Artikel-Übersicht
Eine Webseite enthält eine Anzahl News-Artikel. Die Startseite listet die ersten paar Sätze von jedem Artikel, gefolgt von einem Link „weiterlesen“. Damit die Links auch für sich alleine eindeutig sind, wird der Link „weiterlesen“ mit dem Titel der Newsmeldung ergänzt. Der Link lautet nun, „weiterlesen Titel XY“. 

Code-Beispiel 1:

<p><img src="teas003.jpg" alt="Blick auf das Fest mit Zürichsee im Hintergrund"> Das diesjährige Frühlingsfest war sehr gut besucht. <span class"wt03"><a href="123.html">Weiterlesen . . .</a></span></p>

WCAG 2.0, 2.4.9, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-link 

Test-Tools:                                Web Accessibiliy Toolbar

2.4.10.      Abschnittsüberschriften (Stufe AAA)

Abschnittsüberschriften werden genutzt, um den Inhalt zu gliedern.

Anmerkung 1: „Überschrift“ wird in seiner allgemeinen Bedeutung benutzt und beinhaltet Titel und andere Methoden, um verschiedenen Arten von Inhalt eine Überschrift hinzuzufügen.

Anmerkung 2: Dieses Erfolgskriterium behandelt Textabschnitte, nicht Bestandteile der Benutzerschnittstelle. Bestandteile der Benutzerschnittstelle werden unter Erfolgskriterium 4.1.2 behandelt.

Verstehen:

Wichtig für die Lesbarkeit des Inhaltes sind Überschriften vor Abschnitten in längeren Texten.

WCAG 2.0, 2.4.10, AAA           

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-headings

Test-Tools:                                Sichtprüfung

3. Verständlich

Informationen und Bedienung der Benutzeroberfläche müssen verständlich sein.

3.1.        Machen Sie Inhalt lesbar und verständlich.

3.1.1.          Sprache der Seite (Stufe A)

Die voreingestellte menschliche Sprache jeder Webseite kann durch Software bestimmt werden.

Verstehen:

Die korrekte Auszeichnung der Hauptsprache der jeweiligen Seite ist sehr wichtig. Andernfalls würde der Screen-Reader eine deutschsprachige Webseite in Englisch vorlesen.

Code-Beispiele:

Barrierefreie HTML-Dokumente können als HTML 4.01 mit der Inhaltsdeklaration text/html ausgeliefert werden, welcher das Sprachattribut angefügt wird:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang=“de“>

oder als XHTML 1.0 Dokument mit der Inhaltsdeklaration xml und text/html. Beide Inhaltsdeklarationen benötigen ein Sprachattribut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-ch" lang="de-ch">

<head>

oder als XHTML 1.1 Dokument mit der Inhaltsdeklaration application/xhtml+xml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>

  <title>document écrit en français</title>

  <meta http-equiv="content-type" content="application/xhtml+xml;

  charset=utf-8" /> </head>

  <body>       ...document écrit en français...  </body>

</html>

oder als HTML 5:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Swapping Songs</title>

</head>

<body>

<h1>Swapping Songs</h1>

<p>Tonight I swapped some of the songs I wrote with some friends, who

gave me some of the songs they wrote. I love sharing my music.</p>

</body>

</html>

WCAG 2.0, 3.1.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-doc-lang-id

Test-Tools:                                Web Accessibiliy Toolbar

3.1.2.          Sprache von Teilen (Stufe AA)

Die menschliche Sprache jedes Abschnitts oder jedes Satzes im Inhalt kann durch Software bestimmt werden ausser bei Eigennamen, technischen Fachbegriffen, Wörtern einer unklaren Sprache und Wörtern oder Wendungen, die Teil des Jargons des direkt umliegenden Textes geworden sind.

Verstehen:

Damit Screen-Reader die Betonung von Text-Abschnitten in einer anderen Sprache richtig wiedergeben können, sind sie mit dem lang-Attribut ausgezeichnet.

Code-Beispiel:

<h1>Swapping Songs</h1>

<p>Tonight I swapped some of the songs I wrote with some friends, who

gave me some of the songs they wrote. I love sharing my music.</p>

 

<blockquote lang="de">

<p>Da dachte der Herr daran, ihn aus dem Futter zu schaffen, aber der Esel merkte, dass kein guter Wind wehte, lief fort und machte sich auf den Weg nach Bremen: dort, meinte er, könnte er ja Stadtmusikant werden. Er kaufte sich beim bekannten Geigenbauer <span lang="fr">Henry Lagrumière</span> eine Violine.</p>

</blockquote>   

 

WCAG 2.0, 3.1.2, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-other-lang-id

Test-Tools:                                Web Accessibility Toolbar

3.1.3.          Ungewöhnliche Wörter (Stufe AAA)

Es gibt einen Mechanismus, um spezielle Definitionen von Wörtern oder Wendungen zu erkennen, die auf ungewöhnliche oder eingeschränkte Weise benutzt werden, Idiome und Jargon eingeschlossen.

Verstehen:

-       Spezielle Wörter, wie z.B. Fachbegriffe werden im Fliesstext erläutert, oder

-       Verfügen über einen Mechanismus, z.B. einen Link zu einem Glossar, wo der Begriff erklärt wird.

WCAG 2.0, 3.1.3, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-idioms

Test-Tools:                                Sichtprüfung

3.1.4.          Abkürzungen (Stufe AAA)

Es gibt einen Mechanismus, um die ausgeschriebene Form oder Bedeutung von Abkürzungen zu erkennen.

Verstehen:

Abkürzungen werden entweder immer im Fliesstext erläutert, oder mit einem Link zu einem Glossar.

Bei der ersten Nennung kann die Abkürzung ausgeschrieben werden, bei weiteren, gleichbedeutenden Abkürzungen kann dann <abbr> oder <acronym> und das title-Attribut eingesetzt werden.

Wenn Abkürzungen immer mit <abbr> oder <acronym> und dem title-Attribut ausgezeichnet werden, muss das title-Attribut zugänglichkeitsunterstützend eingesetzt werden. Mit dieser technischen Unterstützung wird das title-Attribut auch von Screen-Readern gelesen.

Häufige und allgemein bekannte Abkürzungen, wie z.B. PDF müssen nicht erläutert werden.

Beispiel:

<p>Die United Nations Organisation (UNO) wählte heute den neuen Sekretär.</p>

<p>Weil die <abbr title="United Nations Organisation" lang="en">UNO</abbr> heute lange beschäftigt war ...</p>

 

WCAG 2.0, 3.1.4, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-located 

Test-Tools:                                Sichtprüfung

3.1.5.          Leseniveau (Stufe AAA)

Wenn der Text nach der Entfernung von Eigennamen und Titeln Lesefähigkeiten voraussetzt, die über das Niveau der niedrigen, sekundären Schulbildung hinausgehen, dann gibt es ergänzenden Inhalt oder eine Version, die keine über die niedrige, sekundäre Schulbildung hinausgehenden Lesefähigkeiten verlangt.

Verstehen:

Die Bereitstellung von Zusammenfassungen in einfacher Sprache soll Menschen helfen, die Schwierigkeiten haben, die geschriebene Sprache zu verstehen, wenn es darum geht, wichtige Anweisungen oder spezifische Informationen zu vermitteln.

Beispiele:

Medizinische Informationen für die Allgemeinheit
Eine Forschungsgruppe informiert in einer Website mit Beiträgen über neue Erkenntnisse. Jeder Beitrag wird mit einer Zusammenfassung eingeleitet die alle wichtigen Informationen in einfacher Sprache enthält.

Eine E-Learning-Applikation
Ein Online-Kurs über spanische Kulturgeschichte enthält Texte die sich für unterschiedliche Leseniveaus eignen. Zusammenfassungen in einfacher Sprache, Fotos und Infografiken illustrieren und reduzieren die komplexen Zusammenhänge. So kann der Kurs gut am Studienanfang z.B. auch von fremdsprachigen Studenten absolviert werden.

WCAG 2.0, 3.1.5, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-supplements 

Test-Tools:                                Sichtprüfung

3.1.6.          Aussprache (Stufe AAA)

Es gibt einen Mechanismus, um die bestimmte Aussprache von Wörtern zu erkennen, wenn die Bedeutung der Wörter – im Zusammenhang – mehrdeutig ist, wenn man die Aussprache nicht kennt.

Verstehen:

Die Bereitstellung von Informationen zur Betonung kann unmittelbar im Text nach dem Wort erfolgen oder mit einem Link zum Glossar mit Betonungsinformation oder mit dem RUBY-Element.

Beispiel:

<p>When we talk about these guidelines, we often just call them
 <ruby>
   <rb>WCAG</rb>
    <rp>(</rp>
     <rt>Wuh-KAG</rt>
    <rp>)</rp>
 </ruby>.
</p>

WCAG 2.0, 3.1.6, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-pronunciation 

Test-Tools:                                Sichtprüfung, Internet Explorer,  Firefox mit Addon "XHTML Ruby"

3.2.        Sorgen Sie dafür, dass Webseiten vorhersehbar aussehen und funktionieren.

3.2.1.          Bei Fokus (Stufe A)

Wenn irgendein Bestandteil den Fokus erhält, dann löst dies nicht eine Änderung des Kontextes aus.

Verstehen:

Damit Webseiten für alle Benutzer in vorhersehbarer Weise funktionieren, werden keine Fenster geöffnet, Formulare abgeschickt oder Funktionen ausgelöst, nur wenn ein Element den Fokus erhält.

WCAG 2.0, 3.2.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-receive-focus 

Test-Tools:                                Sichtprüfung

3.2.2.          Bei Eingabe (Stufe A)

Die Änderung der Einstellung irgendeines Bestandteils der Benutzerschnittstelle führt nicht automatisch zur Änderung des Kontextes, ausser der Benutzer wurde vor Benutzung des Bestandteils auf das Verhalten hingewiesen.

Verstehen:

Damit Webseiten für alle Benutzer in vorhersehbarer Weise funktionieren, werden keine Fenster geöffnet, Formulare abgeschickt oder Funktionen ausgelöst, nur wenn der Benutzer in einem Element eine Eingabe tätigte. Ausgenommen der Benutzer wird rechtzeitig, also unmittelbar vor dem Element auf den Automatismus hingewiesen.

Beispiele:

Die Auswahl aus einem „Drop-Down“-Menu löst nicht automatisch einen Link aus, sondern muss vom Benutzer mittels Bestätigung (z.B. „auswählen“-Schalter) bestätigt werden.

Durch Anwählen einer Checkbox werden inhaltlich abhängige, weitere Auswahloptionen erst eingeblendet, nachdem der Benutzer einen Schalter betätigt hat.

Beispiel 3.2.2 Automatismen bei Eingabe

Abbildung 8: Werden Drop-Down-Menus für einen Schnellzugriff mit JavaScript so programmiert, dass sie nach der Auswahl automatisch den Link auslösen, werden Benutzer entführt und irritiert. Besser ist in jedem Fall die Auslösung durch das bewusste Betätigen eines Buttons, z.B. "Auswählen".

WCAG 2.0, 3.2.2, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-unpredictable-change

Test-Tools:                                Sichtprüfung

3.2.3.          Konsistente Navigation (Stufe AA)

Navigationsmechanismen, die auf mehreren Webseiten innerhalb eines Satzes von Webseiten wiederholt werden, treten jedes Mal, wenn sie wiederholt werden, in der gleichen relativen Reihenfolge auf, ausser eine Änderung wird durch den Benutzer ausgelöst.

Verstehen:

Damit Webseiten für alle Benutzer in vorhersehbarer Weise funktionieren, sind die Navigationselemente in allen Seiten gleichbleibend angeordnet und aufgebaut.

Beispiel:

Die Such-Funktion ist immer an der gleichen Stelle

Navigationskategorien sind gleichbleibend, ausser der Benutzer löst z.B. mit Betätigung eines Links die Erweiterung um Subkategorien aus.

WCAG 2.0, 3.2.3, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-consistent-locations 

Test-Tools:                                Sichtprüfung

3.2.4.          Konsistente Erkennung (Stufe AA)

Bestandteile mit der gleichen Funktionalität innerhalb eines Satzes von Webseiten werden konsistent erkannt.

Verstehen:

Damit Webseiten für alle Benutzer in vorhersehbarer Weise funktionieren, sind die gleichen Elemente, die in mehreren Seiten vorkommen, gleichbleibend aufgebaut.

Beispiel:

Die Such-Funktion ist in allen Seiten immer gleich aufgebaut und betitelt.

WCAG 2.0, 3.2.4, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-consistent-functionality

Test-Tools:                                Sichtprüfung

3.2.5.          Änderung auf Anfrage (Stufe AAA)

Änderungen des Kontextes werden nur durch Benutzeranfrage ausgelöst oder es gibt einen Mechanismus, um solche Änderungen abzuschalten.

Verstehen:

Einige Benutzer bekommen automatische Änderungen nicht mit. Damit Webseiten für alle Benutzer in vorhersehbarer Weise funktionieren, werden Inhalte nur dann geändert, wenn der Benutzer dies ausdrücklich ausgelöst hat.

Beispiele:

Ein "Update"-Schalter
Anstelle einer automatischen Aktualisierung, wird ein "jetzt aktualisieren" Schalter bereitgestellt.

Eine Umleitung
Manchmal wird eine Umleitung von einer alten auf eine neue Webseite in einer solchen Weise realisiert, dass der Benutzer nicht merkt, dass eine Umleitung stattfand.

Einen Link betätigen ist ein Beispiel einer durch Benutzer ausgelösten Anfrage.

 

WCAG 2.0, 3.2.5, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-no-extreme-changes-context 

Test-Tools:                                Sichtprüfung

3.3.        Hilfestellung bei der Eingabe: Helfen Sie den Benutzern dabei, Fehler zu vermeiden und zu korrigieren.

3.3.1.          Fehlererkennung (Stufe A)

Wenn ein Eingabefehler automatisch erkannt wird, dann wird das fehlerhafte Element identifiziert und der Fehler wird dem Benutzer in Textform beschrieben.

Verstehen:

Wenn Eingabefehler z.B. beim Ausfüllen eines Kontaktformulars automatisch erkannt werden, so erfolgen die Hinweise für alle Benutzer lesbar in Textform, entweder als Fehlermeldung („system-alert“) oder im sichtbaren Bereich zu Beginn des Inhaltes. Die Meldung erfolgt vor dem Formular und das fehlerhafte Feld wird identifiziert. Die Identifikation erfolgt in Textform, kann aber auch zusätzlich visuell erfolgen. Am besten werden die Fehlermeldungen als Links angezeigt, so dass direkt zum fehlerhaften Eingabefeld gesprungen werden kann.

Beispiel 3.3.1 Fehlererkennung

Abbildung 9: Diese gelungene Fehlermeldung zu Beginn des Inhaltbereichs nennt die fehlerhaften Eingabefelder und führt mit einem Link zum ersten Fehler. Die Hinweise erfolgen in Textform und visuell, mit roten Hinweisen.

WCAG 2.0, 3.3.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-identified 

Test-Tools:                                Sichtprüfung

3.3.2.          Beschriftungen (Labels) oder Anweisungen (Stufe A)

Beschriftungen (Labels) oder Anweisungen: Wenn der Inhalt eine Eingabe durch den Benutzer verlangt werden Beschriftungen (Labels) oder Anweisungen bereitgestellt.

Verstehen:

Wenn Eingaben zwingend erforderlich sind oder ein bestimmtes Format bei der Eingabe verlangt wird, so sind die Anweisungen deutlich und für alle Benutzer lesbar.

Beispiel Pflichtfelder:

Für die Angabe „Erforderliches Eingabefeld“ muss bedacht werden, dass das * (Sternchen oder Asterisk)-Zeichen Screen-Reader Benutzern wie alle Interpunktionszeichen verschwiegen wird. Damit Blinde auch erfahren, welche Felder eine Eingabe erfordern, sind entsprechende Hinweise auch im LABEL-Text zu vermerken. Alternativ können Grafiken mit einem Asterisk (Sternchen), in denen der alt-Text "Pflichtfeld" hinterlegt ist, verwendet werden. Als weitere Alternative kommt zur Kennzeichnung von Pflichtfeldern auch das WAI-ARIA Script mit "aria-required="true" in Frage.

Es sollte nur eine der vorgeschlagenen Massnahmen verwendet werden, da es sonst zu Redundanzen kommt.

Beispiel 3.3.2 Erforderliches Eingabefeld Code-Beispiel 1:

<form action="post">
<p><label for=" firstName "><span class="hidden">Erforderlich </span>Vorname:*</label>
<input id="firstName" type="text" /></p>

Das Beispiel zeigt, wie mit der CSS-Klasse "hidden" (Beschreibung siehe Code-Beispiel in EK 1.3.1. A) der Hinweis "Erforderlich" als Ergänzung zum * für Screen-Reader mitgeteilt werden kann.

Beispiel 3.3.2 Erforderliches Eingabefeld Code-Beispiel 2:

<form action="post">
<p><label for="firstName">Vorname:*</label>
<input id="firstName" type="text" aria-required="true" /></p>

 </form>

Das Beispiel zeigt wie einfach das ARIA-Attribut "aria-required" angewendet werden kann. Es funktioniert jedoch erst mit neueren Browsern und Screen-Readern. Um kompatibel mit älteren Umgebungen zu bleiben, siehe Technik ARIA4.

WCAG 2.0, 3.3.2, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-cues

Test-Tools:                                Sichtprüfung

3.3.3.          Fehlerempfehlung (Stufe AA)

Wenn ein Eingabefehler automatisch erkannt wird und Korrekturempfehlungen bekannt sind, dann werden diese Empfehlungen dem Benutzer bereitgestellt, ausser dies würde die Sicherheit oder den Zweck des Inhalts gefährden.

Verstehen:

Wenn Eingaben erforderlich sind oder ein bestimmtes Format bei der Eingabe verlangt wird, so sind die Anweisungen deutlich und für alle Benutzer lesbar. Bei komplizierten Formaten wird ein Beispiel aufgeführt oder eine Fehlerkorrektur hilft bei der Eingabe.

Beispiel:

Eingabe von Datumsformat (tt.mm.jjjj)

WCAG 2.0, 3.3.3, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-suggestions 

Test-Tools:                                Sichtprüfung

3.3.4.          Fehlervermeidung (rechtliche, finanzielle Daten) (Stufe AA)

Für Webseiten, die eine für den Benutzer auftretende rechtliche Verpflichtung oder finanzielle Transaktion zur Folge haben, die Benutzer-gesteuerte Daten in Datenspeicherungssystemen ändern oder löschen oder die Testantworten des Benutzers abschicken, gilt mindestens eines der Folgenden:

Reversibel: Versendete Daten sind reversibel.

Geprüft: Vom Benutzer eingegebene Daten werden auf Eingabefehler überprüft und der Benutzer erhält die Gelegenheit, diese zu korrigieren.

Bestätigt: Es gibt einen Mechanismus, um Informationen zu überprüfen, zu bestätigen und zu korrigieren, bevor sie endgültig abgesendet werden.

Verstehen:

Bei allen Eingaben, bei denen Fehler grosse Auswirkungen haben, ist es für alle Benutzer wichtig, die  Daten vor der Übertragung prüfen, bestätigen und ändern oder löschen zu können.

Beispiel:

Bevor eine Bestellung im Online-Shop abgeschickt wird, wird eine Bestätigungsseite mit der gesamten Bestellung, sowie den Kundendaten angezeigt. Erst nach Bestätigung dieser Seite wird die Bestellung ausgelöst.

Beispiel 3.3.4 Fehlervermeidung

Abbildung 10: Zur Fehlervermeidung sind Bestätigungsseiten eine grosse Hilfe. Die Zusammenfassung bietet die Möglichkeit der Kontrolle, via "Bearbeiten"-Button kann im Bestellprozess zurück gegangen und nochmals editiert werden, via "Bestellung absenden" wird der Bestellvorgang mit allen Konsequenzen ausgelöst.

WCAG 2.0, 3.3.4, AA               

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-reversible

Test-Tools:                                Sichtprüfung

Nicht bewertete AAA-Kriterien:

3.3.5.          Hilfe (Stufe AAA)

Es gibt eine kontextsensitive Hilfe.

Verstehen:

Eine kontextsensitive Hilfe muss nur dann angeboten werden, wenn der Text im Label nicht ausreicht um die ganze Funktionalität zu beschreiben. Die Hilfe soll für alle Benutzer erkennbar und verfügbar sein.

Beispiel:

Online Job Bewerbung
Im Bewerbungsformular sind einige Fragen schwierig verständlich. Ein Hilfe-Link neben jeder Frage führt zu Instruktionen und Erklärungen für jede Frage.

WCAG 2.0, 3.3.5, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-context-help 

Test-Tools:                                Sichtprüfung

3.3.6.          Fehlervermeidung (alle) (Stufe AAA)

Für Webseiten, die verlangen, dass der Benutzer Informationen absendet, gilt mindestens eines der Folgenden:

Reversibel: Versendete Daten sind reversibel.

Geprüft: Vom Benutzer eingegebene Daten werden auf Eingabefehler überprüft und der Benutzer erhält die Gelegenheit, diese zu korrigieren.

Bestätigt: Es gibt einen Mechanismus, um Informationen zu überprüfen, zu bestätigen und zu korrigieren, bevor sie endgültig abgesendet werden.

Verstehen:

Dieses Erfolgskriterium basiert auf EK 3.3.4 Fehlervermeidung, wobei es für alle Benutzereingaben wirksam ist.

Beispiel:

In einem Kontaktformular werden die Eingaben dem Benutzer vor dem Absenden nochmals präsentiert. Eine Bestätigung oder Korrektur ist möglich.

WCAG 2.0, 3.3.6, AAA             

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-reversible-all 

Test-Tools:                                Sichtprüfung

4. Robust

Inhalte müssen robust genug sein, damit sie zuverlässig von einer grossen Auswahl an Benutzeragenten einschliesslich assistierender Techniken interpretiert werden können.

4.1.        Kompatibel: Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschliesslich assistierender Techniken.

4.1.1.          Syntaxanalyse (Stufe A)

Bei Inhalt, der durch die Benutzung von Auszeichnungssprache implementiert wurde, haben Elemente komplette Start- und End-Tags, werden Elemente entsprechend ihrer Spezifikationen verschachtelt, enthalten Elemente keine doppelten Attribute und alle IDs  sind einzigartig, ausser wenn die Spezifikationen diese Eigenschaften erlauben.

Anmerkung: Start- und End-Tags, bei denen entscheidende Zeichen in ihrer Formation fehlen, wie eine schliessende spitze Klammer oder nicht zueinander passende Anführungszeichen von Attribut-Werten, sind nicht vollständig.

Verstehen:

Der Seitencode wird kontrolliert (validiert) und korrigiert.

Elemente, die mit Markup-Sprache implementiert sind, besitzen vollständige Start- und Endtags, sind gemäss Spezifikation korrekt verschachtelt, besitzen keine mehrfachen Attribute und jede ID ist eindeutig, ausser dort wo die Spezifikationen etwas anderes erlauben.

Anmerkung:

Browser und andere Benutzeragenten wie z.B. Screen-Reader parsen Dokumente entsprechend dem angegebenen Doctype und verwenden dazu die Doctype Definition (DTD). Der Doctype muss gültig und richtig geschrieben sein.

Liste mit den empfohlenen Doctypes: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Die Code-Wohlgeformtheit und die Code-Validität sind Voraussetzungen für qualitativ steuerbare und  überprüfbare Webinhalte. XHTML-Dokumente verlangen wohlgeformten und syntaktisch richtigen Code, Screen-Reader und Bildschirmlupen sind viel stärker darauf angewiesen als die visuellen Browser und verzeihen weniger Fehler.

WCAG 2.0, 4.1.1, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-ensure-compat-parses 

Test-Tools:                                W3C-Validator

4.1.2.          Name, Rolle, Wert (Stufe A)

Für alle Bestandteile der Benutzerschnittstelle (einschliesslich, aber nicht beschränkt auf: Formularelemente, Links und durch Skripte generierte Komponenten) können Name und Rolle  durch Software bestimmt werden; Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, können durch Software festgelegt sein; und die Benachrichtigung über Änderungen an diesen Elementen steht den Benutzeragenten zur Verfügung, einschliesslich assistierender Techniken.

Anmerkung: Dieses Erfolgskriterium ist hauptsächlich für Webautoren gedacht, die ihre eigenen Bestandteile der Benutzerschnittstelle entwickeln oder skripten. Standard-HTML-Steuerelemente erfüllen zum Beispiel bereits dieses Erfolgskriterium, wenn sie entsprechend der Spezifikation benutzt werden.

Verstehen:

Eigene Programmierungen können mittels "Accessibility for Rich Internet Applications" (WAI-ARIA) für die Tastaturbedienung optimiert werden.

Webautoren, die eigene Bestandteile programmieren, sollen bei den erzeugten Elementen die Spezifikationen der Web-Standards beachten. Verschiedene Techniken verfügen über eigene Accessibility-APIs, z.B. Java, Flash, Mozilla-DHTML,  die ebenfalls beachtet werden sollen.

Webseiten und die geschaffenen UI-Komponenten sollen mit allen gängigen Benutzeragenten bedienbar sein, sowohl mit Browsern als auch mit Screen-Readern und Bildschirmlupen, usw.

Beispiel:

Einführung in WAI-ARIA
Autor: Gez Lemon, 01.08.2008 übersetzt von Stefan Walter
http://www.hessendscher.de/wai-aria/

WCAG 2.0, 4.1.2, A                  

Wie erfüllen:                            http://www.w3.org/WAI/WCAG20/quickref/#qr-ensure-compat-rsv 

Test-Tools:                                Sichtprüfung



II.        Anhang

Wichtige Begriffe in den WCAG 2

Die WCAG 2 beinhalten wichtige Begriffe, die im Glossar beschrieben werden. Das Glossar wird zusammen mit diesem Dokument ausgehändigt.
Glossar zur Accessibility Checkliste 2: http://www.access-for-all.ch/checklist/
Glossar der WAI (deutsch):
http://www.w3.org/Translations/WCAG20-de/#glossary 

Konformitätsbedingungen der WCAG 2

Für die Konformität einer der Stufen A (niedrigste), AA (empfohlene) oder AAA (höchste) muss die ganze Webseite alle Erfolgskriterien der entsprechenden Stufe/n erfüllen oder es wird eine stufenkonforme Alternativversion zur Verfügung gestellt. Das Konformitätslogo muss auf der Website von einer kurzen Erklärung mit erforderlichen Komponenten begleitet werden: http://www.w3.org/Translations/WCAG20-de/ - conformance-claims

Partielle Konformität gemäss WCAG 2

Wenn die Website alle Kriterien erfüllt und unkontrollierte Inhalte davon nicht barrierefrei sind (z.B. die eingebundenen Börsenindexe von einem externen Lieferanten), kann anhand einer «Erklärung partielle Konformität» darauf hingewiesen werden. Die Voraussetzungen dafür sind:

a.        Es handelt sich um Inhalte, die nicht der Kontrolle des Autors unterliegen.

b.       Es werden alle Teile (Seiten und Bereiche) gut verständlich aufgeführt und gekennzeichnet.

Konformitätsanforderungen der Schweizerischen Gesetzgebung

Es wird die Berücksichtigung der WCAG 2 Kriterien der Konformitätsstufe A und AA verlangt, siehe die Bundesrichtlinie P028: http://www.isb.admin.ch/themen/standards/alle/03237/

Hintergrund der Checkliste

Die Ausarbeitung dieser Checkliste wurde ermöglicht durch das Bundesamt für Kommunikation BAKOM, die Bundeskanzlei BK, die Schweizerische Post und die Swisscom. Eine Arbeitsgruppe mit je einem Mitarbeiter aus den erwähnten Organisationen unter der Leitung der Stiftung «Zugang für alle» hat die Checkliste erarbeitet. Eine Expertengruppe hat sich unentgeltlich am Review der Checklisten beteiligt.

Die Autorengruppe

Vorname

Name

Firma

Isabelle

Haas

Post

Beatrice

Stampbach

Swisscom

Markus

Riesch

Zugang für alle

Sven

Jenzer

Zugang für alle

Die Expert-Review-Gruppe

Vorname

Name

Firma

Alain

Vérgeres

Swisscom

Oliver

Füri

Post

Julia

Dressler

Unic

Christian

Hahnloser

Unic

Kerstin

Probiesch

selbständige Accessibility Expertin

 

Tina

Kohler

BIT

Verwendungsrecht

Die Weitergabe und Weiterverwendung dieser Checkliste mit Erklärungen und Glossar ist ausdrücklich genehmigt, vorausgesetzt wird die Namensnennung «AG Accessibility Checkliste 2» und die Angabe der Bezugsadresse (URL) und die Weitergabe unter gleichen Bedingungen. Bei Bearbeitung wird um ein Belegsexemplar gebeten. Mailto: checklist@access-for-all.ch

Aktualisierung

Die aktuellste Version finden Sie immer unter: www.access-for-all.ch/checklist/
Haben Sie Anregungen oder einen Fehler gefunden, bitten die Autoren um Mitteilung.
Mailto: checklist@access-for-all.ch