Sinn für Barrierefreiheit
Sinn für Barrierefreiheit
Die Verwendung des AccessKey-Pad ist nicht zwingend erforderlich, um die Empfehlungen für Tastaturkürzel umzusetzen. Vielmehr handelt es sich um eine Visualisierung der verfügbaren Tastaturkürzel, die zumindest nach der Spezifikation vom Browser angezeigt werden sollten.
Das Design des AccessKey-Pad kann unterschiedlich aussehen.
Dieses Layout ist das "Original" und wurde von Ralf Hertsch Ende 2001 gestaltet. Eine Überarbeitung des Codes erfolgte 2006 durch ![[Externer Link]](../lib/img/icon_extern.gif){kind=icon}
Kai Laborenz.
Auch Sie können das AccessKey-Pad in Ihrem Webauftritt berücksichtigen.
Das AccessKey-Pad besteht aus einem Teil XHTML und einem Teil CSS. Darüber hinaus sind in dem Download die beiden JavaScripte berücksichtigt. Das Design des AccessKey-Pad kann durch Austausch der CSS-Deklarationen geändert werden, ohne dass das XHTML angepasst werden muss.
Das Original-Design als ZIP-Datei herunterladen.
Das AccessKey-Pad ist auf der XHTML-Ebene eine Linkliste, die per CSS gestaltet wird.
| XHTML | Erläuterung |
|---|---|
<ul id="acc"> ...</ul> | Die XHTML-Liste wird als unsortierte Liste strukturiert. Das Design wird über den Selektor #acc im CSS bestimmt. |
<li> ... </li> | Für verlinkte Schaltflächen des AccessKey-Pad werden die einzelnen Links in einem einfachen Listenelement gelegt. Das Aussehen der Listenpunkte wird im CSS bestimmt. |
<span> ... </span> | Innerhalb der Listenpunkte befindet sich Text, der normalerweise nicht angezeigt wird, aber beispielsweise von Sprachausgaben ausgegeben wird. Dies betrifft alle Texte innerhalb von SPAN-Elementen, die mit CSS unsichtbar gestaltet werden. |
<a accesskey="[Zahl]" title="[Hinweis als Tooltipp]" href="[uri]"> [Zahl] [Hinweis für Sprachausgaben]</a> | Der Link hat selbstverständlich ein accesskey-Attribut mit der entsprechenden Zahl und ein href-Attribut mit einer URI. Darüber hinaus ist es sinnvoll, Hinweise für Mausnutzer (title-Attribut) und Nutzer von Sprachausgaben (versteckter Text) beizufügen. |
<li class="acc-n"> ...</li> | Es kann passieren, dass eine Schaltfläche des AccessKey-Pad nicht verlinkt werden kann. In diesem Fall weisen Sie zunächst dem LI-Element die Klasse acc-n zu. Innerhalb des LI-Elements sollte die entsprechende Zahl des AccessKey-Pad eingefügt werden. Sie können auch unsichtbaren Text mit dem SPAN-Element einfügen. |
Die CSS können unterschiedlich sein. Die folgende Dokumentation beschreibt die Deklarationen für das Original-Design.
Sie sollten bei der Verwendung des AccessKey-Pad eine Methode zur Einbindung der CSS-Dateien wählen, die alte Browser ausschließt. Beispielsweise könnten Sie die XHTML-konforme Schreibweise einsetzen:
<style type="text/css" media="all">
/*<![CDATA[*/
@import 'accesskey.css';
/*]]>*/
</style>
| CSS-Deklaration | Erläuterung |
|---|---|
body{ | Eine Kleinigkeit für den Internet Explorer, damit er die Schrift ordentlich skaliert. |
#acc{ | Das allgemeine Aussehen des AccessKey-Pad. Beachten Sie bitte, dass der Text zentriert wird. |
#acc li{ | Diese CSS-Eigenschaften bestimmen das Aussehen der einzelnen Schaltflächen. Weil es sich um Listenpunkte handelt, sollten die vorangestellten Punkte ausgeblendet werden. Listenpunkte sind auch keine Blockelemente im eigentlichen Sinne und müssen als solche bestimmt werden, damit sie mit einer vordefinierten Breite linksfließend positioniert werden können. |
#acc li a:link,#acc li a:visited{ | Die Links im AccessKey-Pad werden mit diesen Eigenschaften bestimmt. Bitte beachten Sie im Code auch die anderen Pseudo-Attribute: Die Reihenfolge muss allgemein link, visited,, focus, hover und active sein. Beachten Sie bitte auch, dass der Internet Explorer active statt focus heranzieht beim Fokussieren von Links. |
#acc .acc-n{ | Sollte eine Schaltfläche nicht verlinkt sein, so benötigt der Listenpunkt die Klasse acc-n. Die Eigenschaften der deaktivierten Schaltflächen werden mit dieser Deklaration definiert. |
#acc li.acc-logo{ | Auch das Logo wird als Listenpunkt strukturiert. Dieser Listenpunkt ist doppelt so breit wie die anderen Listenpunkte. |
#acc .acc-logo a:link, #acc .acc-logo a:visited{ | Der Link um das Logo trägt ebenfalls einige Eigenschaften. Bitte beachten Sie die Hinweise zu Pseudo-Attributen weiter oben. |
#acc strong{ | Das Logo besteht aus zwei zusammengesetzten Wörtern, die beide innerhalb eines STRONG-Elements gesetzt sind. Die Eigenschaften für das Logo werden mit dieser Deklaration vorgenommen. |
#acc strong em{ | Der erste Teil des Logos sieht anders aus als der zweite Teil und wird innerhalb des STRONG-Elements mit einem EM-Element verschachtelt. Die entsprechende Deklaration steht links. |
#acc span{ | Die Deklaration ist für die Gestaltung unsichtbaren Text, der aber trotzdem in Sprachausgaben vorgelesen wird. Der Text wird im Prinzip aus dem Viewport geschoben. Diese Eigenschaften wurden erprobt und gelten zum heutigen Stand als zuverlässig. Ein einfaches display:none; wird von Sprachausgaben nicht ausgelesen. |
Mehr über Barrierefreies Webdesign
