Einstieg in Barrierefreies Webdesign

JavaScript kann ein Mittel sein, um Navigationen noch zugänglicher und direkter zu machen. So lassen sich damit Einblendungen von Navigationsteilen umsetzen, wodurch man schneller auf verschachtelte Inhalte zugreifen kann. Damit die Seite auch mit JavaScript-basierten Navigationen barrierefrei bleibt, müssen bestimmte Maßnahmen, neben Navigationslisten, durchgenommen werden.

Rückfallebenen

Damit die Navigation auch beim deaktivertem oder nicht vorhandenem JavaScript funktionsfähig bleibt müssen sogenannte Rückfallebenen eingeführt werden, auf die diese Browser zurückgreifen können und die Navigation barrierefrei bleibt.

Wichtig ist vor allem, dass die jeweiligen JavaScript - Funktionen nicht im href - Element aufgerufen werden, sondern nur durch die Eventhandler aufgerufen werden da der Link im href - Element als Rückfallebene dient, wie man im folgenden Beispiel sieht.

<ul>
  [...]
  <li><a onmouseover="blendeUl(this);" href="zwei.html">Zwei</a>
    <ul>
      <li><a href="zwei-eins.html">Zwei - Eins</a></li>
      <li><a href="zwei-zwei.html">Zwei - Zwei</a></li>
      <li><a href="zwei-drei.html">Zwei - Drei</a></li>
    </ul>
  </li>
  [...]
</ul>

Die Datei "zwei.html" wird dann die verschachtelte Navigationsliste, die ja in diesem Fall mit CSS ausgeblendet ist, beinhalten und dient somit als Weiche für graphische Browser, deren JavaScript-Funktionalität ausgeschaltet ist. Durch diesen Link können sie dann auf die Seiten zugreifen, die sonst verdeckt bleiben würden.

Das obere Beispiel würde die Liste einblenden, wenn man mit der Maus über den Link fahren würde. Wenn nun die Liste nur mit einem Klick eingeblendet werden sollte muss an Stelle des onMouseOver- der onClick-Eventhandler angegeben werden. Damit aber beim Klick nicht die Ausweichseite aufgerufen wird, muss noch nach dem Funktionsaufruf das Statement return false; mit angegeben werden. Dieser Rückgabewert bricht den Seitenaufruf ab, nicht aber das Einblenden der Liste

[...]
<a onclick="blendeUl(this); return false;" href="zwei.html">Zwei</a>[...]

Soll beim "Rausfahren" des Mauszeigers die Liste wieder zugeklappt werden, so fügt man den Aufruf durch den onMouseOut-Eventhandler im li-Element ein. Die Liste klappt dann nur zu, wenn der Zeiger aus dem li-Element rausgegeht, was den Link und die Liste umschließt.

[...]<li onmouseout=schliesseUl(this);" ><a [...}

Geräteunabhängige Eventhandler

Die obengenannten Eventhandler sind nicht geräteunabhängig und sind nur in den gängigen Browsern verfügbar. Deswegen sollten auch die geräteunabhängigen Eventhandler onSelect, onFocus und onBlur benutzt werden, damit auch garantiert werden kann, dass sämtliche Browser die Funktionen aufrufen können. Da aber die gewöhnlichen Browser die geräteunabhängigen Handler nur aufrufen, wenn eine entsprechende Taste gedrückt und nicht bei Mausereignissen, müssen geräteab- und geräteunabhängige Eventhandler zusammen angegeben werden mit gemeinsamen Aufrufen in den jeweilegen Elementen.

• onSelect mit onClick (beim Auswählen eines Elements)
• onFocus mit onMouseOver (beim Fokussieren eines Elements)
• onBlur mit onMouseOut (beim Verlassen eines Elementes)

In den Beispielen sähe das dann so aus.

 <li onblur="schliesseUl(this);" onmouseout="schliesseUl(this);" >
   <a onmouseover="blendeUl(this);" onfocus="blendeUl(this);" href="zwei.html">Zwei</a>

Oder in der Klickvariante.

<li onblur="schliesseUl(this);" onmouseout="schliesseUl(this);" >
   <a onclick="blendeUl(this); return false;" onselect="blendeUl(this); return false;" href="zwei.html">Zwei</a>

Diese Angaben sorgen nicht nur für Funktionalität in sämtlichen JavaScript-fähigen Browsern, sondern ermöglichen auch das Einblenden mittels "tabben", was die Benutzerfreundlich enorm erhöht. Seltsamerweise sind diese geräteunabhängigen Eventhandler nicht valide, egal ob XHTML oder HTML, obwohl BITV und WCAG gleichermaßen diese empfehlen. Da aber die Benutzerfreundlichkeit, gerade für Benutzer, die nur eine Tastatur verwenden können, enorm verbessert wird, sollte man es abwägen, ob man dafür einen invaliden Quelltext in Kauf nehmen will.

Folgende geräteabhängige Handler müssen immer zusammen angegeben werden, wenn ein Mausevent einen entsprechenden Tastaturevent hat.

• onMouseDown mit onKeyDown
• onMouseUp mit onKeyUp

Geräteabhängige Eventhandler, die nicht in einer barrierefreien Website verwendet werden sollten sind diese.

• onKeyPress (gedrückt gehaltene Taste)
• onDblClick (Doppelklick)
• onMouseMove (bei weiterbewegter Maus)

Anwendungsbeispiele

Vertikale Navigation

Eine vertikale Navigation läßt sich am einfachsten mit JavaScript - Funktionen erweitern. Deswegen wird nun das Beispiel aus dem Abschnitt "Stilmittel mit CSS - Vertikale Navigation" übernommen und um einige verschachtelte Listen erweitert. Außerdem werden als Rückfallebene die Links der ersten Navigationsebene mit den Seiten verknüpft, die die Liste der jeweiligen zweiten Navigationsebene beinhalten.

Um Einblendungen durch Drüberfahren der Maus umzusetzen, werden zunächst einmal die verschatelten Listen mit display:none; ausgeblendet.

ul ul {
display:none; [...]

Dann werden in den li - Elementen der ersten Ebene, die eine Zweite unter sich haben, folgende Eventhandler und Funktionsaufrufe festgelegt.

<li onmouseover="blendeEinUl(this);" onfocus="blendeEinUl(this);" onmouseout="blendeAusUl(this);" onblur="blendeAusUl(this);">

Die Funktionen werden in einem script-Element beschrieben und sind ganz simpel gehalten.

<script type="text/javascript">
function blendeEinUl(li) {
  li.childNodes[2].style.display = "block";
}

function blendeAusUl(li) {
   li.childNodes[2].style.display = "none";
}
</script>

Hier sieht man das Endergebnis der vertikalen Navigation mit JavaScript.

In der Praxis wären diese Funktionen ausgereifter, aber zum Veranschaulichen der Rückfallebenen reichen diese, und die JavaScript-Statements würden mittels <script src="meinJsSkript.js" type="text/javascript" /> eingebunden werden zwecks besserer Trennung von Code und HTML - Quelltext.

Auch beim "durchtabben" werden, dank den onBlur- und onFocus-Eventhandlern, die untergeordneteten Listen aufgeklappt, was die Benutzerfreundlichkeit erhöht.

Horizontale Navigation

Dies wird ein wenig komplexer, da eine verschachtelte Liste aus dem Textfluss "gerissen" werden muss, damit dieser nicht um diese herumfließt, wenn die Liste eingeblendet wird. Deswegen bekommen diese Liste die Deklaration position:absolute;. In diesem Beispiel soll die Navigation die ganze Bildschirmweite einnehmen, und jeder Abschnitt soll eine gleiche Breite haben. Da es fünf Abschnitte sind, bekommt jede Liste eine Breite von 20%. Außerdem wird sie natürlich ausgeblendet. Das alles ergibt die Regel:

ul ul {
  position:absolute;
  width:20%;
  display:none;
}

Nun zu den li - Elementen. Hier werden nun nicht mit der Deklaration display:inline; diese Elemente in der ersten Ebene in eine Reihe gesetzt, da man in diesem Beispiel die Eigenschaften von Blockelementen benötigen, wie in dem Fall width. Stattdessen setzt man die li - Elemente mit float:left; in eine Reihe. Damit die Listenelemente in der verschachtelten Liste nicht in eine Reihe gesetzt werden, wird die vorherige Deklaration mit float:none; ausgeschaltet.

li {
  float:left;
  width:20%;
}

li li {
  float:none;
  width:auto;
  border-top:1px solid white;
  border-bottom:1px solid white;
}

Zuletzt werden noch die Link-Elemente in Blockelemente umgewandelt und angepasst. Außerdem wird noch in einem div - Element nach der Navigation ein Blindtext angelegt, um das "Ausreissen" der Liste aus dem Lesefluss zu verdeutlichen.

li a {
  display:block;
  background-color:#0066FF;
  color:white;
  width:95%;
  padding:5px 2.5%;
}

li a:hover, li a:focus, li li a:hover, li li a:focus {
  background-color:#000099;
  color:white;
}

li li a {
  background-color:#0066FF;
  color:white;
}

div {
  background-color:yellow;
  color:black;
}

Die Liste und die Funktionen sind mit der vorherigen Navigation identisch. Hier das Endergebnis der horizontalen Navigation mit JavaScript. Auch in diesem Beispiel, kann man durch die Navigation mühelos "tabben".