AccessKey
Aus ReiseWiki
Die Computerbedienung mit Hilfe von Tastaturkürzeln ist insbesondere für Menschen mit visuellen oder motorischen Einschränkungen wichtig, da sie eine Maus nicht oder nur bedingt einsetzen können. Sie sind auf die Tastatur oder alternative Eingabegeräte angewiesen. Aber auch alle anderen Nutzer, die lieber mit der Tastatur als der Maus arbeiten, können von einer guten Bedienbarkeit mit der Tastatur profitieren.
Für diese Empfehlung ist es wichtig, dass es einheitlich auf verschiedenen Webseiten angewandt wird. Sollte die Seite, von der Sie hierher geführt wurden, ein anderes Schema anwenden, so können Sie die Anbieter der Seite auf diese Empfehlung hinweisen.
Inhaltsverzeichnis |
AccessKey-Pad-Empfehlung
[*] Die Zugangstaste ist in den meisten Browsern die Alt-Taste.
So sieht das Fertige Access-Pad aus.
AccessKey bei Wiki
| Zugangstasten [*] | Empfohlene Funktion |
|---|---|
| Seitennavigation | |
| Alt+c | Seiteninhalt anzeigen |
| Alt+t | Diskussion zum Seiteninhalt |
| Alt+e | Seite bearbeiten. Bitte vor dem Speichern die Vorschaufunktion benutzen. |
| Alt+h | Frühere Versionen dieser Seite |
| Alt+d | Diese Seite löschen |
| Alt+m | Diese Seite verschieben |
| Alt+= | Diese Seite schützen |
| Alt+w | Diese Seite zur persönlichen Beobachtungsliste hinzufügen |
| Benutzerseiten, nach Anmeldung | |
| Alt+. | Ihre Benutzerseite |
| Alt+n | Ihre Diskussionsseite |
| Alt+l | Liste der beobachteten Seiten |
| Alt+y | Liste Ihrer Beiträge |
| Haupt Navigation | |
| Alt+z | Hauptseite / Startseite |
Tasturbedienung in versch. Browsern
Die verschiedenen Browser bieten unterschiedliche Funktionalitäten zum Aufrufen von Links, die mit Tastaturkürzeln belegt sind. Beispielsweise
- Mozilla- und Netscape-Browser rufen einen Link mit einer Tastaturkürzel sofort auf, sobald die Tastenkombination Alt mit dem entsprechenden Kürzel betätigt wird.
- Firefox bis Version 1.5. rufen einen Link mit einer Tastaturkürzel sofort auf, sobald die Tastenkombination Alt mit dem entsprechenden Kürzel betätigt wird.
- Firefox ab Version 2 muss die Kombination aus Alt-Taste, Umschalt-Taste sowie der entsprechenden Ziffer gedrückt werden.
- Der Internet Explorer fokussiert einen Link bei Betätigung der Tastenkombination Alt mit der entsprechenden Taste. Das hat zur Folge, dass zum Aufruf des Links die Eingabetaste betätigt werden muss.
- Auf dem Mac ist die Zugriffstaste die Ctrl-Taste.
- In Opera werden Links mit Tastaturkürzel aufgerufen, indem zuerst Umschalt+Esc gedrückt und wieder losgelassen wird und dann die belegte Taste gedrückt wird.
- Mit dem Microsoft Internet Explorer muss nach Betätigen des Shortcuts (zum Beispiel Alt + 0 für die Startseite) noch zusätzlich die Enter-Taste gedrückt werden, damit der Link aufgerufen wird. Möglicherweise wird aber auch ein JavaScript eingesetzt, der das zusätzliche Betätigen der Eingabetaste überflüssig macht.
- In Firefox 2 kann der Pad möglicherweise nicht funktionieren, weil die erforderliche Tastenkombination (Alt+Umschalt+[Taste]) die Zweitbelegung der Zahlentasten hervorruft. Auch hierfür steht Webanbietern ein JavaScript zur Verfügung.
Download Dateien
Quellcode
Der HTML-Quellcode der Einbindung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Accesskey Beispielseite</title>
<!--Hier werden StyleSheet und JavaDatei geladen--><link rel="stylesheet" href="http://www.example.com/accesskey.css" type="text/css"><style type="text/css" media="all"><![CDATA[@import 'http://www.example.com/accesskey.css';]]></style><!--[if lte IE 6]><script src="http://www.example.com/keypress.js" type="text/javascript"></script><![endif]--><link rel="copyright" title="2009 Detlev Molitor" href="http://geiertours.de/" /><!--/Hier werden StyleSheet und JavaDatei geladen--></head><body><!--Die Tabelle ist nur für den Hintergrund und kann auch weggelassen werden--><table bgcolor="#FFFF00"><tr><td align="center" valign="middle"><ul id="acc"><li><span>[Alt + </span><a accesskey="7" title="[Alt+7] Suche"
href="search.php" target="_top">7<span>: Suche</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="8" title="[Alt+8] Übersicht dieser Seite"
href="inhaltsverzeichnis.php" target="_top">8<span>: Übersicht dieser Seite</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="9" title="[Alt+9] Kontakt"
href="impressum.php" target="_top">9<span>: Kontakt</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="4" title="[Alt+4] Glossar" href="glossar.php"
target="_top">4<span>: Glossar</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="2" title="[Alt+5] News" href="news.php"
target="_top">5<span>: News</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="6" title="[Alt+6] Gesamtübersicht / Sitemap"
href="sitemap.php" target="_top">6<span>: Gesamtübersicht / <span lang="en">Sitemap</span></span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="1" title="[Alt+1] Hilfe" href="hilfe.php"
target="_top">1<span>: Hilfe</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="2" title="[Alt+2] Xandra - unsere virtuelle Beraterin" href="xandra.php"
target="_top">2<span>: Xandra - unsere virtuelle Beraterin</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="3" title="[Alt+3] Vorherige Seite" href="javascript:window.back()"
target="_self">3<span>: Vorherige Seite</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="0" title="[Alt+0] Startseite" href="http://www.example.com/"
target="_top">0<span>: Startseite</span></a><span> ] </span></li>
<li class="acc-logo"><a href="http://www.xotti.de/_reisewiki/index.php5?title=AccessKey"title="Informationen über Tastaturkürzel"><strong lang="en" class="ac"><em>Access</em>Key</strong>
<span> - Informationen über Tastaturkürzel</span></a></li>
</ul></td></tr></table></body></html>
Das Style-Sheet (CSS-Datei)
body {font-size : 100.01%;
}#acc {
margin : 0;
padding : 0;
width : 10.3em;
font-family : verdana, arial, helvetica, sans-serif;
font-size : 0.9em;
text-align : center;
line-height : 1.1em;
}#acc li {
margin : 0 0.25em 0.25em 0;
padding : 0;
border : 1px solid #6f6f6f;
float : left;
list-style : none;
display : block;
}#acc li a:link, #acc li a:visited {
color : #000000;
background : #d3d3d3;
padding : 0.25em 1em;
width : 0.9em;
display : block;
text-decoration : none;
}#acc li a:hover {
color : #fffff2;
background : #bf0000;
font-weight : bold;
}#acc li a:focus, #acc li a:active {
color : #fffff2;
background : #000080;
font-weight : bold;
}#acc .acc-n {
border : 1px dotted #d7e9ff;
padding : 0.25em 1em;
width : 0.9em;
color : #000000;
background : #fff;
}#acc li.acc-logo {
border : 0;
width : 6.3em;
}#acc .acc-logo a:link, #acc .acc-logo a:visited {
padding : 0.25em 0 0.25em 0.1em;
width : 6.1em;
display : block;
color : #ff0000;
background : transparent;
letter-spacing : 0;
text-decoration : none;
border : 1px solid #ffffff;
}#acc .acc-logo a:hover, #acc .acc-logo a:focus, #acc .acc-logo a:active {
background : #d3d3d3;
text-decoration : underline;
border : 1px solid #6f6f6f;
}#acc strong {
color : #000080;
font-variant : small-caps;
font-weight : bold;
}#acc strong em {
color : #ff0000;
font-style : italic;
letter-spacing : 0;
}#acc span {
width : 0;
position : absolute;
left : -1000px;
top : -1000px;
height : 0;
overflow : hidden;
}
Javascript Dateien
Die Dateien müssen, wie in o.g. HTML Datei im <head></head> Bereich geladen werden.
ff2_accesskey.js
/*Disclaimer - Kostenloses JavaScript nur mit diesem Disclaimer(c) 2bweb.de 2006-2008Jan Eric Hellbusch <hellbusch@2bweb.de>Stephan Heller <heller@2bweb.de>FIREFOX 2 ERWEITERUNGFF2 hat die Tastenkombination für Accesskey vonALT - acckey auf ALT + SHIFT - acckeyverändert.Das Umschalten führt allerdings dazu,dass nicht mehr die Zahlen, sondern die Sonderzeichenverarbeitet werden, was das verwendete Accesskey-Pad hinfällig macht.Diese JS sorgt dafür, dass das Pad trotzdem wie gewünscht arbeitet */function ffTastenKombi (evt) {
if (evt != null && evt.type == 'keydown') {
if (evt.altKey && evt.keyCode >= 48 && evt.keyCode <= 58) {
links = document.getElementsByTagName('a');
for(i = 0; i < links.length; i++) {
var accesskey = links[i].getAttribute('accesskey');
var href = links[i].getAttribute('href');
if (accesskey && evt.keyCode == parseInt(accesskey)+48 && href) {
document.location.href = href;
break;
}}}}}if(navigator.userAgent.indexOf('Firefox/2')!=-1) {
window.document.onkeydown = ffTastenKombi;
}
keypress.js
// Disclaimer - Free Script only with this Disclaimer// getting accesskeys (0-9) without return// coded by Joern Hofer: jhATgrassi.de (2004-04-04)// as it seems, this doesn't work on IE5 on mac// Disclaimer ends herevar ie = document.all;
var altTaste = false;
var linksFertig = false;
var akLinks = new Array();
function tasteGedrueckt() {
// erst was machen, wenn alle Links geparst wurdenif(linksFertig) {
// welches war die aktuelle Taste denn?aktuelleTaste = parseInt(window.event.keyCode);
// 18 = ALT-Taste// muss man sich zwischen speichern, sonst ist der Event wegif(aktuelleTaste == 18) {
altTaste = true;
} else {
// war eine andere Taste als ALT// mal gucken, ob diese zu den Accesskeys gehoertfor(i = 0; i < akLinks.length; i++) {
// und direkt vorher muss ja die ALT-Taste gedrueckt gewesen seinif(akLinks[i][0] == aktuelleTaste && altTaste) {
// wenn beides zutrifft nehmen wir den Link und fuehren ihn ausdocument.location.href = akLinks[i][1];
// gibt ja nur einen Accesskey, also koennen wir mit der Schleife aufhoeren,// voher aber ALT zurück setzen (man weiss ja nie...)altTaste = false;
break;
}}// wenn es nicht ALT war aber auch keine Taste mit unseres Keys, dann die ALT-Taste wieder zurueck setzenaltTaste = false;
}}}// Diese Variante funktioniert so nur fuer Accesskeys mit Zahlenfunction alleAccesskeyLinks() {
// erstmal alle Links holenlinks = document.getElementsByTagName("a");
// nen Zaehler initialisierenzaehler = 0;
// wenn es Links gibt, und der Browser das neue DOM kannif(links) {
// alle Links durchgehenfor(i = 0; i < links.length; i++) {
// Accesskey-Attribut holenaccesskey = links[i].getAttribute("accesskey");
// und wenn wir schon dabei sind, auch gleich den Link dazuaccessLink = links[i].getAttribute("href");
// wenn der Accesskey vorhanden istif(accesskey) {
// machen wir in unserem akLinks (accesskeyLinks) ein 2 diemensionales ArrayakLinks[zaehler] = new Array(2);
// in den ersten den Key reinpackenakLinks[zaehler][0] = accesskey*1 + 48;
// in den zweiten den Link reinpackenakLinks[zaehler][1] = accessLink;
// zaehler ein weiter, damit im akLinks-Array ein weiter gezaehlt wirdzaehler++;}}// und sagen, dass wir fertig sind, mit den Links der Seite// (besser, falls mal jemand zu frueh eine Taste drueckt, wir aber noch nicht zu ende geparst haben)linksFertig = true;
}}// alle Links holen, wenn Seite fertig ist mit ladenvar counter = 0;
tempAccesskey = window.onload;
window.onload = function() {
if(counter == 0) {
if(typeof tempAccesskey == "function") tempAccesskey();
alleAccesskeyLinks();
counter++;}}// wenn auf dem Dokument eine Taste gedrueckt wird (das .document ist wichtig, ohne das geht es nicht)window.document.onkeydown = tasteGedrueckt;


