Webkrauts » Die etwas besseren Listen

Hauptmenü

Suche

Newsfeeds

Artikel

Die etwas besseren Listen – Teil 2

11. Türchen des Webkrauts-Adventskalenders

Es ist ein Gerücht, dass Screenreader kein JavaScript unterstützen, aber das heißt nicht, dass JavaScript für die Barrierefreiheit unproblematisch sein kann. Wichtig ist der Einsatz von unaufdringlichem JavaScript und Beachtung des sogenannten "latency issue".

In Sachen Barrierefreiheit stehen einige grundlegende Änderungen bevor. In den Web Content Accessibility Guidelines (WCAG) 2.0 findet ein Paradigmenwechsel statt. Während in der Vorgängerversion JavaScript als problematische Technik angesehen wurde, wird mittlerweile davon ausgegangen, dass JavaScript die Barrierefreiheit fördern kann.

Ausgangssituation

In Teil 1 dieses Beitrags wurde folgende Linkliste vorgestellt:

Linkliste mit vier Einträgen Während die ersten drei Links offensichtlich zu deutschsprachigen Seiten führen, führt der vierte Link zu einer englischsprachigen Seite.

Weil Screenreader keine CSS-Grafiken interpretieren können (es existiert kein Alternativtext!), ist die per Symbol vermittelte Information nicht zugänglich. Wenn keine zusätzlichen Texte im Linktext auf die Sprache des Links hinweisen, so kann mit folgender JavaScript-Funktion ein zusätzlicher (unsichtbarer) Text generiert werden:

function hiddenText(element, text) {
  var myClass = "unsichtbar";
  var myNode = document.createElement(element);
  myNode.setAttribute("class", myClass);
  myNode.appendChild(document.createTextNode(text));
  return myNode;
}

Diese Funktion erwartet zwei Variablen: einmal einen Elementnamen, z.B. "span", und den einzufügenden Text. Außerdem wird mit der Variablen myClass die Klasse angegeben, mit der im aktuellen Projekt Inhalte unsichtbar, aber für Screenreader zugänglich gekennzeichnet werden. Es wird ein Elementknoten erzeugt, der die angegebene Klasse erhält und als Kindknoten den Text. Der neue Knoten wird dann an die aufrufende Instanz zurückgegeben.

Für die Linkliste mit den Links zu verschiedensprachigen Seiten könnte eine Funktion zum dynamischen Hinzufügen der Zusatztexte wie folgt aussehen:

function linkLists() {
  if (document.getElementsByTagName && document.createTextNode) {
    var myListClass = "linkliste";
    var myListItemClasses = new Array(
      new Array("de", "Deutsch"),
      new Array("en", "Englisch")
    );
    var ul_array = document.getElementsByTagName("ul");
    for ( i = 0; i < ul_array.length; ++i) {
      if (ul_array[i].className.indexOf(myListClass) > -1) {
        var li_array = ul_array[i].getElementsByTagName("li");
        for (var j = 0; j < li_array.length; ++j) {
          var listItemClass = li_array[j].className;
          for (var k = 0; k < myListItemClasses.length; ++k) {
            if (listItemClass.indexOf(myListItemClasses[k][0]) > -1) {
              newNode = hiddenText("span", myListItemClasses[k][1]);
              newNode.appendChild(document.createTextNode(": "));
              li_array[j].getElementsByTagName("a")[0].insertBefore(newNode, li_array[j].getElementsByTagName("a")[0].firstChild);
            }
          }
        }
      }
    }
  }
}
window.onload = function() {
  linkLists();
}

Im Einzelnen ist die Funktion wie folgt aufgebaut:

Zunächst werden die verwendeten HTML-Klassen für Linklisten und einzelne Listeneinträge angegeben, wobei die Klassen für die Listeneinträge gleich zusammen mit dem einzufügendem Text in einem Array gespeichert werden.
Danach werden alle UL-Elemente aus dem Dokument geholt und der Reihe nach auf die Klasse für Linklisten geprüft.
Wenn eine Linkliste identifiziert wurde, werden die einzelnen Listenelemente des UL-Elements geholt und der Reihe nach die Klasse der Listenelement gesichert.
In der Schleife wird eine Übereinstimmung der aktuellen Listenklasse mit den im Array gespeicherten Klassen geprüft und bei Übereinstimmung wird die Funktion zur Erzeugung von verstecktem Text mit "span" und dem zugehörigem Text aufgerufen.
Schließlich wird der zurückgegebene Knoten als erster Kindknoten des im Listeneintrag enthaltenen Links eingefügt.
Die Funktion wird durch den Event-Handler onload ausgelöst, d.h. erst wenn das HTML-Dokument geladen wurde, wird die Funktion aufgerufen.

Schlussbemerkungen

Barrierefreiheit sollte stets im Kontext des Inhalts und der Gestaltung gesehen werden, was das Anbieten von Patentlösungen durchaus erschwert. In bestimmten Situationen muss mal die eine und mal die andere Technik angewandt werden. Der Einsatz von JavaScript ist beispielsweise zur Förderung der Barrierefreiheit nicht sinnvoll, wenn mit gleichem Aufwand HTML-Templates angepasst werden können.

In diesem konkreten Beispiel wäre die Angabe des Sprachwechsels auch durch das hreflang-Attribut für den Link denkbar und die zweite Funktion könnte ebenso auf dieses Attribut zugreifen. Weil aber die Information ("Sprachangabe") über den Listeneintrag angezeigt wird, wurde mit JavaScript auf das Listenelement zugegriffen.

Die Angabe von Zusatzinformationen für Links ist nicht nur bei der Angabe der Sprache sinnvoll. Auch die Angabe von Formaten, die nicht nativ im Browser angezeigt werden, etwa PDF oder Office-Dokumente, und die Ankündigung neuer Fenster können mit dieser Technik erledigt werden.

Über den Autor

Jan Eric Hellbusch ist Autor der beiden gleichnamigen Titel Barrierefreies Webdesign sowie weiterer Fachveröffentlichungen zum Thema. Mit »2bweb.de« bietet er bundesweit Beratung und Schulungen für barrierefreies Webdesign an. Seit vielen Jahren setzt er sich ehrenamtlich für die Belange Blinder und Sehbehinderter ein.

Info:: Die etwas besseren Listen – Teil 2 ist Beitrag Nr. 481
Autor:: Jan Eric Hellbusch am 11. Dezember 2008 um 07:00
Kategorie:: Adventskalender 2008

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1.

Die deutsche und die englische Flagge stehen für Länder, nicht für Sprachen. Es gibt auch einige Millionen deutschsprachige Leute ausserhalb von Deutschland.

Sonst: Toller Artikel!

Kommentar von Christoph - 11. Dezember 2008 um 22:07
2.

Warum jetzt hreflang mit durch CSS generiertem Inhalt nicht ausreichen soll ist mir absolut unklar.

Kommentar von erlehmann - 13. Dezember 2008 um 09:08
3.

@erlehmann

Welche Software unterstützt denn hreflang? Screenreader sind mir keine bekannt.

Kommentar von Jan Eric Hellbusch - 9. Januar 2009 um 14:59
4.

Nachtrag: Mit Unterstützung ist nicht der maschinenlesbare DOM, sondern das UI gemeint. hreflang mag für Scripting nutzbar sein, aber die Browser geben dem Nutzer keinen Hinweis darauf. Webseiten sind aber für Menschen, nicht nur für Programmierer.

Kommentar von Jan Eric Hellbusch - 9. Januar 2009 um 15:02