AccessKey

Aus ReiseWiki

Wechseln zu: Navigation, Suche


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

Zugangstasten [*] Empfohlene Funktion So sieht es aus
Alt+0 Startseite
Alt+1 Hilfe / Informationen zum Webauftritt
Alt+2 Nächste Seite (falls vorhanden, z.B. in einer mehrseitigen Ergebnisliste)
Alt+3 Vorherige Seite (falls vorhanden, z.B. in einer mehrseitigen Ergebnisliste)
Alt+4 Glossar / Lexikon / Wiki
Alt+5 keine Empfehlung und vom jeweiligen Anbieter zu vergeben
Alt+6 Gesamtübersicht / Inhaltsverzeichnis / Sitemap
Alt+7 Suchfunktion oder erweiterte Suche mit Suchoptionen
Alt+8 Schnellnavigation (falls vorhanden) oder Übersichtsseite zu einem einzelnen Artikel oder Dokument
Alt+9 Kontaktseite


[*] 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:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Accesskey Beispielseite</title>
  5.  
  6. <!--Hier werden StyleSheet und JavaDatei geladen-->
  7. <link rel="stylesheet" href="http://www.example.com/accesskey.css" type="text/css">
  8. <style type="text/css" media="all">
  9. <![CDATA[
  10.  @import 'http://www.example.com/accesskey.css';
  11. ]]>
  12. </style>
  13. <!--[if lte IE 6]>
  14.   <script src="http://www.example.com/keypress.js" type="text/javascript"></script>
  15. <![endif]-->
  16. <link rel="copyright" title="2009 Detlev Molitor" href="http://geiertours.de/" />
  17. <!--/Hier werden StyleSheet und JavaDatei geladen-->
  18.  
  19. </head>
  20. <body>
  21.  
  22. <!--Die Tabelle ist nur für den Hintergrund und kann auch weggelassen werden-->
  23. <table bgcolor="#FFFF00">
  24.  <tr>
  25.  <td align="center" valign="middle">
  26.     <ul id="acc">
  27.     <li><span>[Alt + </span><a accesskey="7" title="[Alt+7] Suche"
  28.  href="search.php" target="_top">7<span>: Suche</span></a><span> ] </span></li>
  29.     <li><span>[Alt + </span><a accesskey="8" title="[Alt+8] &Uuml;bersicht dieser Seite"
  30.  href="inhaltsverzeichnis.php" target="_top">8<span>: &Uuml;bersicht dieser Seite</span></a><span> ] </span></li>
  31.     <li><span>[Alt + </span><a accesskey="9" title="[Alt+9] Kontakt"
  32.  href="impressum.php" target="_top">9<span>: Kontakt</span></a><span> ] </span></li>
  33.     <li><span>[Alt + </span><a accesskey="4" title="[Alt+4] Glossar" href="glossar.php"
  34.  target="_top">4<span>: Glossar</span></a><span> ] </span></li>
  35.     <li><span>[Alt + </span><a accesskey="2" title="[Alt+5] News" href="news.php"
  36.  target="_top">5<span>: News</span></a><span> ] </span></li>
  37.     <li><span>[Alt + </span><a accesskey="6" title="[Alt+6] Gesamt&uuml;bersicht / Sitemap"
  38.  href="sitemap.php" target="_top">6<span>: Gesamt&uuml;bersicht / <span lang="en">Sitemap</span></span></a><span> ] </span></li>
  39.     <li><span>[Alt + </span><a accesskey="1" title="[Alt+1] Hilfe" href="hilfe.php"
  40.  target="_top">1<span>: Hilfe</span></a><span> ] </span></li>
  41.     <li><span>[Alt + </span><a accesskey="2" title="[Alt+2] Xandra - unsere virtuelle Beraterin" href="xandra.php"
  42.  target="_top">2<span>: Xandra - unsere virtuelle Beraterin</span></a><span> ] </span></li>
  43.     <li><span>[Alt + </span><a accesskey="3" title="[Alt+3] Vorherige Seite" href="javascript:window.back()"
  44.  target="_self">3<span>: Vorherige Seite</span></a><span> ] </span></li>
  45.     <li><span>[Alt + </span><a accesskey="0" title="[Alt+0] Startseite" href="http://www.example.com/"
  46.  target="_top">0<span>: Startseite</span></a><span> ] </span></li>
  47.     <li class="acc-logo"><a href="http://www.xotti.de/_reisewiki/index.php5?title=AccessKey"
  48.  title="Informationen &uuml;ber Tastaturk&uuml;rzel">
  49. <strong lang="en" class="ac"><em>Access</em>Key</strong>
  50. <span> - Informationen &uuml;ber Tastaturk&uuml;rzel</span></a></li>
  51.   </ul></td>
  52.  </tr>
  53. </table>
  54. </body>
  55. </html>

Das Style-Sheet (CSS-Datei)

  1. body {
  2.     font-size : 100.01%;
  3. }
  4. #acc {
  5.     margin : 0;
  6.     padding : 0;
  7.     width : 10.3em;
  8.     font-family : verdana, arial, helvetica, sans-serif;
  9.     font-size : 0.9em;
  10.     text-align : center;
  11.     line-height : 1.1em;
  12. }
  13. #acc li {
  14.     margin : 0 0.25em 0.25em 0;
  15.     padding : 0;
  16.     border : 1px solid #6f6f6f;
  17.     float : left;
  18.     list-style : none;
  19.     display : block;
  20. }
  21. #acc li a:link, #acc li a:visited {
  22.     color : #000000;
  23.     background : #d3d3d3;
  24.     padding : 0.25em 1em;
  25.     width : 0.9em;
  26.     display : block;
  27.     text-decoration : none;
  28. }
  29. #acc li a:hover {
  30.     color : #fffff2;
  31.     background : #bf0000;
  32.     font-weight : bold;
  33. }
  34. #acc li a:focus, #acc li a:active {
  35.     color : #fffff2;
  36.     background : #000080;
  37.     font-weight : bold;
  38. }
  39. #acc .acc-n {
  40.     border : 1px dotted #d7e9ff;
  41.     padding : 0.25em 1em;
  42.     width : 0.9em;
  43.     color : #000000;
  44.     background : #fff;
  45. }
  46. #acc li.acc-logo {
  47.     border : 0;
  48.     width : 6.3em;
  49. }
  50. #acc .acc-logo a:link, #acc .acc-logo a:visited {
  51.     padding : 0.25em 0 0.25em 0.1em;
  52.     width : 6.1em;
  53.     display : block;
  54.     color : #ff0000;
  55.     background : transparent;
  56.     letter-spacing : 0;
  57.     text-decoration : none;
  58.     border : 1px solid #ffffff;
  59. }
  60. #acc .acc-logo a:hover, #acc .acc-logo a:focus, #acc .acc-logo a:active {
  61.     background : #d3d3d3;
  62.     text-decoration : underline;
  63.     border : 1px solid #6f6f6f;
  64. }
  65. #acc strong {
  66.     color : #000080;
  67.     font-variant : small-caps;
  68.     font-weight : bold;
  69. }
  70. #acc strong em {
  71.     color : #ff0000;
  72.     font-style : italic;
  73.     letter-spacing : 0;
  74. }
  75. #acc span {
  76.     width : 0;
  77.     position : absolute;
  78.     left : -1000px;
  79.     top : -1000px;
  80.     height : 0;
  81.     overflow : hidden;
  82. }


Javascript Dateien

Die Dateien müssen, wie in o.g. HTML Datei im <head></head> Bereich geladen werden.

ff2_accesskey.js

  1. /*
  2.   Disclaimer - Kostenloses JavaScript nur mit diesem Disclaimer
  3.  
  4.   (c) 2bweb.de 2006-2008
  5.   Jan Eric Hellbusch <hellbusch@2bweb.de>
  6.   Stephan Heller <heller@2bweb.de>
  7.  
  8.   FIREFOX 2 ERWEITERUNG
  9.  
  10.   FF2 hat die Tastenkombination für Accesskey von
  11.  
  12.           ALT - acckey  auf  ALT + SHIFT - acckey
  13.  
  14.   verändert.
  15.  
  16.   Das Umschalten führt allerdings dazu,
  17.   dass nicht mehr die Zahlen, sondern die Sonderzeichen
  18.   verarbeitet werden, was das verwendete Accesskey-Pad hinfällig macht.
  19.  
  20.   Diese JS sorgt dafür, dass das Pad trotzdem wie gewünscht arbeitet */
  21.  
  22. function ffTastenKombi (evt) {
  23.   if (evt != null && evt.type == 'keydown') {
  24.     if (evt.altKey && evt.keyCode >= 48 && evt.keyCode <= 58) {
  25.       links = document.getElementsByTagName('a');
  26.       for(i = 0; i < links.length; i++) {
  27.         var accesskey = links[i].getAttribute('accesskey');
  28.         var href = links[i].getAttribute('href');
  29.         if (accesskey && evt.keyCode == parseInt(accesskey)+48 && href) {
  30.           document.location.href = href;
  31.           break;
  32.         }
  33.       }
  34.     }
  35.   }
  36. }
  37.  
  38. if(navigator.userAgent.indexOf('Firefox/2')!=-1) {
  39.    window.document.onkeydown = ffTastenKombi;
  40. }

keypress.js

  1. //  Disclaimer - Free Script only with this Disclaimer
  2. //  getting accesskeys (0-9) without return
  3. //  coded by Joern Hofer: jhATgrassi.de (2004-04-04)
  4. //  as it seems, this doesn't work on IE5 on mac
  5. //  Disclaimer ends here
  6.  
  7. var ie = document.all;
  8. var altTaste = false;
  9. var linksFertig = false;
  10. var akLinks = new Array();
  11.  
  12. function tasteGedrueckt() {
  13. //  erst was machen, wenn alle Links geparst wurden
  14.     if(linksFertig) {
  15. //  welches war die aktuelle Taste denn?
  16.         aktuelleTaste = parseInt(window.event.keyCode);
  17. //  18 = ALT-Taste
  18. //  muss man sich zwischen speichern, sonst ist der Event weg
  19.         if(aktuelleTaste == 18) {
  20.             altTaste = true;
  21.         } else {
  22. //  war eine andere Taste als ALT
  23. //  mal gucken, ob diese zu den Accesskeys gehoert
  24.             for(i = 0; i < akLinks.length; i++) {
  25. //  und direkt vorher muss ja die ALT-Taste gedrueckt gewesen sein
  26.                 if(akLinks[i][0] == aktuelleTaste && altTaste) {
  27. //  wenn beides zutrifft nehmen wir den Link und fuehren ihn aus
  28.                     document.location.href = akLinks[i][1];
  29. //  gibt ja nur einen Accesskey, also koennen wir mit der Schleife aufhoeren, 
  30. //  voher aber ALT zurück setzen (man weiss ja nie...)
  31.                     altTaste = false;
  32.                     break;
  33.                 }
  34.             }
  35. //  wenn es nicht ALT war aber auch keine Taste mit unseres Keys, dann die ALT-Taste wieder zurueck setzen
  36.             altTaste = false;
  37.         }
  38.     }
  39. }
  40.  
  41. //  Diese Variante funktioniert so nur fuer Accesskeys mit Zahlen
  42. function alleAccesskeyLinks() {
  43. //  erstmal alle Links holen
  44.     links = document.getElementsByTagName("a");
  45. //  nen Zaehler initialisieren
  46.     zaehler = 0;
  47. //  wenn es Links gibt, und der Browser das neue DOM kann
  48.     if(links) {
  49. //  alle Links durchgehen
  50.         for(i = 0; i < links.length; i++) {
  51. //  Accesskey-Attribut holen
  52.             accesskey = links[i].getAttribute("accesskey");
  53. //  und wenn wir schon dabei sind, auch gleich den Link dazu
  54.             accessLink = links[i].getAttribute("href");
  55. //  wenn der Accesskey vorhanden ist
  56.             if(accesskey) {
  57. //  machen wir in unserem akLinks (accesskeyLinks) ein 2 diemensionales Array
  58.                 akLinks[zaehler] = new Array(2);
  59. //  in den ersten den Key reinpacken
  60.                 akLinks[zaehler][0] = accesskey*1 + 48;
  61. //  in den zweiten den Link reinpacken
  62.                 akLinks[zaehler][1] = accessLink;
  63. //  zaehler ein weiter, damit im akLinks-Array ein weiter gezaehlt wird
  64.                 zaehler++;
  65.             }
  66.         }
  67. //  und sagen, dass wir fertig sind, mit den Links der Seite 
  68. // (besser, falls mal jemand zu frueh eine Taste drueckt, wir aber noch nicht zu ende geparst haben)
  69.         linksFertig = true;
  70.     }
  71. }
  72.  
  73. //  alle Links holen, wenn Seite fertig ist mit laden
  74. var counter = 0;
  75.     tempAccesskey = window.onload;
  76.     window.onload = function() {
  77.                         if(counter == 0) {
  78.                             if(typeof tempAccesskey == "function") tempAccesskey();
  79.                             alleAccesskeyLinks();
  80.                             counter++;
  81.                         }
  82.                     }
  83. //  wenn auf dem Dokument eine Taste gedrueckt wird (das .document ist wichtig, ohne das geht es nicht)
  84. window.document.onkeydown = tasteGedrueckt;

Weblinks und weiterführende Information

Persönliche Werkzeuge