HTML accesskey-Attribut

Das HTML-Attribut accesskey ist ein globales Attribut, das eine Tastenkombination zum Aktivieren oder Fokussieren eines bestimmten Elements definiert. Drückt der Benutzer die Modifikatortaste(n) des Browsers zusammen mit dem zugewiesenen Zeichen, wird das Element fokussiert (und bei Links und Schaltflächen auch aktiviert). Der Attributwert sollte aus einem oder mehreren druckbaren Zeichen bestehen, die durch Leerzeichen getrennt sind — der Browser verwendet das erste unterstützte Zeichen.

In HTML 4.01 konnte accesskey nur mit einer kleinen Gruppe von Elementen verwendet werden: <a>, <area>, <button>, <input>, <label>, <legend> und <textarea>.

In HTML5 ist accesskey ein globales Attribut und kann auf jedem Element gesetzt werden. Beachten Sie, dass das Setzen auf einem nicht-interaktiven Element (z. B. einem <div> oder <p>) den Tastaturfokus lediglich auf dieses Element verschiebt — es löst keinen Klick aus — weshalb es am sinnvollsten bei interaktiven Steuerelementen eingesetzt wird.

Syntax

<tag accesskey="single_character">...</tag>

Beispielsweise weist <button accesskey="s">Save</button> die Taste s zu.

So wird die Tastenkombination ausgelöst

Es gibt keine einheitliche, standardisierte Tastenkombination für Accesskeys — sie hängt vom Browser und dem Betriebssystem ab. Der Benutzer hält die unten aufgeführten Modifikatortasten gedrückt und drückt das zugewiesene Zeichen:

Wenn mehrere Elemente denselben accesskey teilen, wechseln moderne Browser bei wiederholtem Drücken typischerweise den Fokus zwischen diesen Elementen durch, anstatt nur eines davon zu aktivieren.

Wann accesskey (nicht) geeignet ist

accesskey eignet sich am besten für kontrollierte, auf einen Zweck ausgerichtete Umgebungen, in denen Browser und Zielgruppe bekannt sind und ein dokumentiertes Tastaturkürzel echten Mehrwert bietet:

• Interne Tools / Intranet-Anwendungen, in denen Poweruser täglich dieselben Aktionen wiederholen (z. B. „Alt+S zum Speichern eines Datensatzes").
• Kioske und eingebettete Apps, die in einem bekannten Browser laufen und bei denen Sie die vollständige Tastaturumgebung kontrollieren.
• Einzelseiten-Hilfsprogramme mit einer Handvoll gut kommunizierter Tastaturkürzel.

Vermeiden Sie accesskey auf öffentlichen, vielseitig genutzten Websites und Web-Apps, aus folgenden Gründen:

• Konflikte. Ein gewähltes Zeichen kann mit einer integrierten Browser- oder Betriebssystem-Tastenkombination oder mit einem Befehl einer Hilfstechnologie kollidieren.
• Auffindbarkeit. Es gibt keinen visuellen Hinweis darauf, dass ein Tastaturkürzel existiert, sodass Benutzer es kaum entdecken.
• Tastaturvarianten. Ein Zeichen kann auf bestimmten Tastaturlayouts nicht verfügbar sein, was ein echtes Internationalisierungsproblem darstellt.
• Kognitive Belastung. Numerische Accesskeys (1, 2, 3) tragen keine Bedeutung und können Benutzer mit kognitiven Einschränkungen verwirren.
• Fokusverwaltung. Überlappende Tastaturkürzel können das natürliche tabindex-Verhalten und die Tab-Reihenfolge der Seite stören.

Barrierefreiheit

Einzelzeichen-Tastaturkürzel unterliegen dem WCAG 2.1 Erfolgskriterium 2.1.4 — Character Key Shortcuts. Das Problem besteht darin, dass ein an ein einzelnes Zeichen gebundenes Tastaturkürzel versehentlich ausgelöst werden kann — besonders kritisch für Screenreader- und Spracheingabe-Benutzer, deren Werkzeuge beim Navigieren Tastenanschläge erzeugen. Eine unerwartete Accesskey-Aktivierung kann den Fokus verschieben, ein Formular absenden oder eine Aktion auslösen, die der Benutzer nie beabsichtigt hat.

Um SC 2.1.4 zu erfüllen, sollten Sie Benutzern erlauben, das Tastaturkürzel zu deaktivieren, neu zu belegen oder es nur dann aktiv sein zu lassen, wenn die entsprechende Komponente den Fokus besitzt.

Da accesskey keine sichtbare Affordanz hat, sollten Sie das Tastaturkürzel für Hilfstechnologien mit dem Attribut aria-keyshortcuts zugänglich machen. Es dokumentiert den Tastendruck für Screenreader, ohne das Verhalten zu ändern:

<button accesskey="s" aria-keyshortcuts="Alt+S">Save</button>

Beispiel mit einer Schaltfläche und einem Eingabefeld

accesskey ist bei interaktiven Formularelementen am vertretbarsten, da das Fokussieren des Elements genau das ist, was der Benutzer beabsichtigt:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="search" accesskey="f">Search (Alt+F):</label>
      <input id="search" type="text" accesskey="f" />
      <br />
      <button type="submit" accesskey="s" aria-keyshortcuts="Alt+S">
        Save
      </button>
    </form>
    <p>Press the modifier keys for your browser plus the letter, e.g. <strong>Alt + F</strong> to focus the search field or <strong>Alt + S</strong> to reach Save.</p>
  </body>
</html>

Beispiel mit Links

Dasselbe Attribut kann Tastaturkürzel für Navigationslinks vergeben:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/learn-html.html" accesskey="h">HTML online tutorial</a>
    <br />
    <a href="https://www.w3docs.com/learn-css.html" accesskey="c">CSS online tutorial</a>
    <br />
    <a href="https://www.w3docs.com/learn-git.html" accesskey="g">GIT online tutorial</a>
  </body>
</html>

Verwandte Attribute

• HTML Global Attributes
• HTML id Attribute
• HTML class Attribute
• HTML Attributes Reference

Übungen