Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Die etwas besseren Listen - Teil 2

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Die etwas besseren Listen - Teil 2

Gestern wurde auf einige grundlegende Aspekte bei der barrierefreien Gestaltung von Aufzählungen mit HTML und CSS eingegangen. Heute zeigt Jan Eric Hellbusch ein Beispiel, wie JavaScript zur Förderung der Barrierefreiheit in Listen eingesetzt werden kann.

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:

  1. 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.
  2. Danach werden alle UL-Elemente aus dem Dokument geholt und der Reihe nach auf die Klasse für Linklisten geprüft.
  3. Wenn eine Linkliste identifiziert wurde, werden die einzelnen Listenelemente des UL-Elements geholt und der Reihe nach die Klasse der Listenelement gesichert.
  4. 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.
  5. Schließlich wird der zurückgegebene Knoten als erster Kindknoten des im Listeneintrag enthaltenen Links eingefügt.
  6. 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.

Kommentare

Christoph
am 11.12.2008 - 22:07

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!

Permanenter Link

erlehmann
am 13.12.2008 - 09:08

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

Permanenter Link

Jan Eric Hellbusch
am 09.01.2009 - 14:59

@erlehmann

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

Permanenter Link

Jan Eric Hellbusch
am 09.01.2009 - 15:02

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.

Permanenter Link

Die Kommentare sind geschlossen.