WAI Test

Web Accessibility Initiative (WAI) Test

Dies ist eine Testserie zu dem Thema Barrierefreiheit auf Grundlagen der Barrierefreie Informationstechnik Verordnung (BITV) und der Web Content Accessibility Guidelines 1.0 (WCAG) des W3C. Es werden die (X)HTML-Tags acronym und abbr getestet. Zusätzlich steht noch ein Test mit einer mehrspaltigen Tabelle für Screenreader zur Verfügung.

Der acronym-Tag von (X)HTML

Akronyme sind besondere Abkürzungen, die aus den Anfangsbuchstaben mehrerer Wörter gebildet werden und sich meist als Wort aussprechen lassen. Internet Browser sollten ein Acronym mittels einer gepunkteten Linie unterhalb des Acronyms optisch kennzeichnen. Bei manchen Internet Browsern fehlt diese optische Kennzeichnung. Andere Internet Browser zeigen die gepunktete Linie unterhalb des Acronyms sauber an.

Testtext:

Die WAI sollte auf jeden Fall beachtet werden.


  <p>Die 
    <acronym lang="en" xml:lang="en" title="Web Accessibility Initiative">
      <span lang="de" xml:lang="de">WAI</span>
    </acronym> sollte auf jeden Fall beachtet werden.</p>

Wird die Abkürzung "WAI" im Testtext mit der Maus überfahren, erscheint der Titel "Web Accessibility Initiative" als Tooltip. Für reine Tastaturnutzer bleibt der Tooltip unsichtbar und bei Nutzung eines Screenreaders kommt es auf die Einstellungen an, ob der Titel oder die Abkürzung vorgelesen wird.

Nach oben

Der abbr-Tag von (X)HTML

Getestet wird eine Abkürzung in (X)HTML-Dokumenten. Einige Internet Browser ignorieren den abbr-Tag, bei anderen Internet Browsern fehlt ebenfalls die visuelle Kennzeichnung wie beim acronym-Tag.

Testtext:

Hier wird der Test mit z. B. gemacht.


  <p>Hier wird der Test mit 
    <abbr title="zum Beispiel>z. B.</abbr>
    gemacht.</p>

Wird die Abkürzung "z. B." im Testtext mit der Maus überfahren, erscheint der Titel "zum Beispiel" als Tooltip. Für reine Tastaturnutzer bleibt auch hier der Tooltip unsichtbar und bei Nutzung eines Screenreaders kommt es ebenfalls auf die Einstellungen an, ob der Titel oder die Abkürzung vorgelesen wird.

Nach oben

Mehrspaltige Tabellen und Screenreader

Mehrspaltige Tabellen sollten für Screenreader so aufbereitet sein, dass Screenreader beim Lesen des Zelleninhaltes vorher den Header der Tabellenspalte lesen. Hierzu eine kleine Tabelle zum Testen von Screenreadern.

Browser Linux MacOS Windows
Amaya ja ja ja
Lynx ja nein nein
Netscape ja ja ja 

  <table border="0" summary="Screenreader Test für Tabellen">
  <tr>
    <th id="header1">Browser</th>
    <th id="header2">Linux</th>
    <th id="header3">MacOS</th>
    <th id="header4">Windows</th>
  </tr>
  <tr>
    <td headers="header1">Amaya</td>
    <td headers="header2">ja</td>
    <td headers="header3">ja</td>
    <td headers="header4">ja</td>
  </tr>
  <tr>
    <td headers="header1">Lynx</td>
    <td headers="header2">ja</td>
    <td headers="header3">nein</td>
    <td headers="header4">nein</td>
  </tr>
  <tr>
    <td headers="header1">Netscape</td>
    <td headers="header2">ja</td>
    <td headers="header3">ja</td>
    <td headers="header4">ja</td>
  </tr>
  </table>

Ein Screenreader sollte jetzt folgendes vorlesen:

Browser Amaya, Linux ja, MacOS ja, Windows ja
Browser Lynx, Linux ja, MacOS nein, Windows nein
Browser Netscape, Linux ja, MacOS ja, Windows ja

Nach oben

Ergänzungen zu dieser Testseite

Möchte man eine visuelle Kennzeichnung mit einer gepunkteten Linie für alle CSS-fähigen Internet Browser umsetzen, so empfiehlt sich folgende Vorgehensweise:


  .acronym {
    font-style: normal;
    border-bottom: 1px dotted #666666;
    cursor:help;
  }
  .abbr {
    font-style: normal;
    border-bottom: 1px dotted #666666;
    cursor:help;
  }

Wird die visuelle Kennzeichnung mittels CSS in die Webseite integriert, so sollte diese Kennzeichnung beim Drucken wieder aufgehoben werden, da sonst im Ausdruck die Abkürzungen als Link missverstanden werden könnten. Idealerweise existiert für das Drucken ein eigenes CSS.

Der acronym-Tag ist nicht mehr Bestandteil von HTML 5 und XHTML 2, der abbr-Tag ist in HTML 5 und XHTML 2 aber weiterhin enthalten. Da beide (X)HTML-Tags nur durch das Überfahren mit der Maus sichtbar werden oder beim Vorlesen mit einem Screenreader vorhanden sind, sollte man für Tastaturnutzer ein Glossar zur Verfügung stellen.

Dieser Web Accessibility Initiative Test arbeitet ohne den oben aufgeführtem CSS-Code um eventuelles Fehlverhalten bei der visuellen Kennzeichnung von Internet Browser aufzuzeigen.

Nach oben

 

Nach oben