Implementieren von Barrierefreiheit für den Tastaturzugriff (HTML)

Applies to Windows and Windows Phone

Sie suchen die C#/VB/C++/XAML-Version dieses Themas? Informationen finden Sie unter Implementieren von Barrierefreiheit für den Tastaturzugriff (XAML).

Viele Benutzer, die blind oder in ihrer Beweglichkeit eingeschränkt sind, sind auf die Tastatur als einziges Mittel zur Navigation für die Benutzeroberfläche Ihrer App sowie zum Zugriff auf die Funktionen der App angewiesen. Wenn Ihre App keinen guten Zugriff über die Tastatur ermöglicht, haben diese Benutzer Schwierigkeiten bei der Verwendung Ihrer App oder können Ihre App überhaupt nicht nutzen.

In diesem Thema erfahren Sie, welches Markup und welchen Code Sie implementieren müssen, um zu gewährleisten, dass Ihre Windows Store-App mit JavaScript von Tastaturbenutzern verwendet werden kann.

Sehen Sie dieses Feature in unserer Reihe App-Features von A bis Z in Aktion.:  Benutzerinteraktion: Toucheingabe... und vieles mehr.

Fokus Ihrer Tastatur beim Starten

Legen Sie den Fokus Ihrer Tastatur beim Starten der App auf das Element fest, mit dem Benutzer intuitiv (oder mit der größten Wahrscheinlichkeit) als erstes interagieren. In aller Regel handelt es sich dabei um die Hauptansicht der App. Benutzer können so mithilfe der Pfeiltasten unmittelbar einen Bildlauf durch den Inhalt der App durchführen. Weitere Informationen zum Festlegen des Fokus auf spezifische Steuerelemente finden Sie unter focus.

Navigation zwischen Benutzeroberflächenelementen mithilfe der Tastatur

Legen Sie für das tabIndex-Attribut einen Wert fest, der für alle interaktiven Benutzeroberflächenelemente, die sich nicht standardmäßig in der Aktivierreihenfolge befinden, größer als oder gleich 0 ist. Es ist wichtig, das tabIndex-Attribut festzulegen, da Benutzer der Sprachausgabe zwischen interaktiven Benutzeroberflächenelementen mithilfe der Tabulatortaste navigieren.

Das folgende Beispiel enthält das oberste Strukturelement in der Aktivierreihenfolge. Informationen zum aktuellen Strukturelement werden mit dem aria-activedescendant-Attribut angezeigt.


<!-- The top tree item must be added to the tab order. -->
<div id="folders" role="tree" aria-label="Folders" tabindex="0"
    aria-activedescendant="n-0" >
...
    <div id="n-0" class="selected" role="treeitem" aria-expanded="true" 
            onclick="...">
...
</div>

Fokussierbare HTML-Tags wiea href="…", input und select befinden sich standardmäßig in der Aktivierreihenfolge.

Für das tabIndex-Attribut gelten folgende Regeln.

  • Benutzeroberflächenelemente, bei denen tabIndex gleich 0 ist, werden der Aktivierreihenfolge basierend auf der Dokumentreihenfolge hinzugefügt.
  • Benutzeroberflächenelemente, bei denen tabIndex größer als 0 ist, werden der Aktivierreihenfolge basierend auf dem tabIndex-Wert hinzugefügt.
  • Benutzeroberflächenelemente, bei denen tabIndex kleiner als 0 ist, werden der Aktivierreihenfolge nicht hinzugefügt, können jedoch den Tastaturfokus empfangen.

Hinweis  Geben Sie für Textelemente (wie z. B. p-Tags) kein tabIndex an, das größer oder gleich 0 ist. Text ist in der Regel nicht interaktiv und sollte nicht die Konnotation aufweisen, dass ein Festlegen des Fokus darauf eine mögliche Aktion auslöst. Textelemente werden von Hilfstechnologien weiterhin erkannt und von Sprachausgaben laut vorgelesen, dies basiert jedoch auf anderen Techniken als dem Finden dieser Elemente in der praktischen Aktivierreihenfolge.

Navigation innerhalb eines Benutzeroberflächenelements mithilfe der Tastatur

Bei zusammengesetzten Elementen ist es wichtig, eine ordnungsgemäße interne Navigation zwischen den enthaltenen Elementen sicherzustellen. Es gibt mehrere Möglichkeiten, eine interne Navigation für ein zusammengesetztes Element zu implementieren.

Von einem zusammengesetzten Element können die eigenen, derzeit aktiven untergeordneten Elemente verwaltet werden. Auf diese Weise wird der Aufwand reduziert, alle untergeordneten Elemente fokussierbar halten zu müssen. Ein zusammengesetztes Element dieser Art ist in der Aktivierreihenfolge enthalten. Von ihm werden Tastaturnavigationsereignisse verarbeitet. Vom zusammengesetzten Element werden Informationen zum derzeit aktiven untergeordneten Element mithilfe des aria-activedescendant-Attributs angezeigt.


<!-- Custom tree view element. -->
<div id="folders" class="tree" role="tree" aria-label="Folders" tabindex="0"
        aria-activedescendant="n-0" >
    <div id="n-0" class="selected" role="treeitem" aria-expanded="true" 
            onclick="...">
        Libraries</div>
    <div role="group" >
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="…">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="…">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="…">Pics</div>
    </div>
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys.
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if (e.keyCode === Win.Utilities.Key.upArrow) {
            // Update aria-activedescendant with the previous node id.
            // Update the class attribute to mark the selected node.
        } else if (e.keyCode === Win.Utilities.Key.downArrow) {
            // Update aria-activedescendant with the next node id.
            // Update the class attribute to mark the selected node.
        }
    });
</script>

Eine weitere Möglichkeit besteht darin, das tabIndex-Attribut für den Knoten dynamisch zu verwalten. Diese Methode wird als Bereitstellen eines "wechselnden Indexes" bezeichnet.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" >
    <div id="n-0" role="treeitem" aria-expanded="true" tabindex="0">Libraries</div>
    <div role="group" >
        <!-- Child tree items: Documents, Music, Pictures ... -->
        <div id="n-0-1" role="treeitem" aria-expanded="false" tabindex="-1">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" tabindex="-1">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" tabindex="-1">Pics</div>
    </div>
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys.
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if (e.keyCode === Win.Utilities.Key.upArrow) {
            // Update tabindex attributes.
        } else if (e.keyCode === Win.Utilities.Key.downArrow) {
            // Update tabindex attributes.
        }
    });
</script>

Wie anhand der beiden obigen Beispiele deutlich wurde, empfiehlt es sich, für Tastenkombinationen zum Navigieren zwischen untergeordneten Elementen Pfeiltasten zu verwenden. Wenn Knoten der Strukturansicht verschiedene Elemente für die Verarbeitung der Erweitern–Reduzieren- und Knotenaktivierung aufweisen, sollten Sie die Nach-links- und Nach-rechts-Taste verwenden, um die Erweitern–Reduzieren-Funktion über die Tastatur bereitzustellen.

Tastaturaktivierung

Stellen Sie sicher, dass Benutzeroberflächenelemente, auf die geklickt werden kann, auch über die Tastatur aufgerufen werden können.

Implementieren Sie für Benutzeroberflächenelemente, die aufgerufen werden können, Tastaturereignishandler für die die Leertaste und die Eingabetaste. Auf diese Weise bieten Sie eine umfassende Unterstützung für den Zugriff über die Tastatur. Zudem ermöglichen Sie es Benutzern, einfache App-Szenarien nur über die Tastatur auszuführen. Das bedeutet, dass Benutzer alle interaktiven Benutzeroberflächenelemente erreichen und die Standardfunktionen aktivieren können.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" aria-activedescendant="n-0" 
        tabindex="0" >
    <div id="n-0" role="treeitem" aria-expanded="true" onclick="..." >Libraries</div>

    <div role="group" >
        <!—Child tree items: Documents, Music, Pictures ... -->
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="...">Docs</div>   
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="...">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="...">Pics</div>
    </div>
</div>

<script>
    // Ensure keyboard activation
    folders.addEventListener('keydown', function(e) {
        if (e.srcElement && (e.keyCode === Win.Utilities.Key.enter ||
                e.keycode === Win.Utilities.Key.space)) {
            e.srcElement.click(e);
        }
    });
</script>


Tastenkombinationen (optional)

Neben der Implementierung von Navigation und Aktivierung über die Tastatur für die App hat es sich bewährt, für App-Funktionen Tastenkombinationen zu implementieren. Durch Tastenkombinationen wird die Produktivität verbessert, da sie dem Benutzer eine effiziente Möglichkeit für den Zugriff auf die Funktionen der App bieten.

Zugriffstasten ermöglichen den schnellen Zugriff auf Benutzeroberflächenelemente in Ihrer App. Eine Zugriffstaste ist eine Kombination aus der ALT-TASTE und einer Buchstabentaste.

Tastenkombinationen ermöglichen die schnelle Nutzung von App-Befehlen. Ihr App kann Benutzeroberflächenelemente aufweisen, die exakt dem Befehl entsprechen. Tastenkombinationen sind eine Kombination aus der STRG-TASTE und einer Buchstabentaste.

Benutzern, die auf Sprachausgabe und andere Hilfstechnologien angewiesen sind, muss eine einfache Möglichkeit geboten werden, die Tastenkombinationen der App zu erkennen. Sie sollten die Tastenkombinationen im HTML-Markup Ihrer App mithilfe der Attribute accesskey und x-ms-acceleratorkey deklarieren und Tastenkombinationen mithilfe von QuickInfos, barrierefreien Namen und barrierefreien Beschreibungen oder einer anderen Form der Kommunikation mittels Screenreader kommunizieren. Zumindest sollten die Tastenkombinationen im Hilfeinhalt Ihrer App gut dokumentiert sein.


<!-- Alt+F sets focus to firstName and is exposed by the -->
<!-- AccessKey UIA property.                             -->
<label for="firstName">First Name</label>
<input id="firstName" type="text" accesskey="F" /> 

<!-- Alt+S invokes the Save button and is exposed by the -->
<!-- AccessKey UIA property.                             -->
<button accesskey="S">Save</button>

<!-- Ctrl+S invokes the Save button and is exposed by a tooltip. -->
<button id="sendButton" value="Send" title="Send (Ctrl+S)">Send</button>


Das Framework unterstützt Tastenkombinationen zum Festlegen des Fokus oder zum Aufrufen von Elementen. Tastenkombinationen in JavaScript müssen allerdings mithilfe von Tastaturereignishandlern implementiert werden.


<script>
    var sendButton = document.getElementById('sendButton');
    sendButton.addEventListener('keyup', function(e) {
        var itm = e.srcElement;
        if (e.ctrlKey && e.keyCode === 83 ) {
            // Invoke send functionality.
        }
    });
</script>

Sie müssen die Tastenkombinationen auch während der Lokalisierung berücksichtigen. Die Lokalisierung von Tastenkombinationen ist besonders wichtig, da die Auswahl einer Tastenkombination in der Regel von der Bezeichnung für das Element abhängt.


<script>
    var sendButton = document.getElementById('saveButton');
    sendButton.innerHTML = res.getString('saveButton');
    sendButton.setAttribute('accesskey',res.getString('saveButtonAccessKey');
</script>

<!-- resources.resw -->
    <data name="saveButton" xml:space="preserve"><value>Save</value></data> 
    <data name="saveButtonAccessKey" xml:space="preserve"><value>S</value></data>

Weitere Unterstützung bei der Implementierung von Tastenkombinationen erhalten Sie unter Tastenkombinationen in den Windows-Richtlinien für die Benutzerinteraktion.

Barrierefreiheit der Tastaturnavigation und Windows Phone

Ein Windows Phone-Gerät verfügt in der Regel nicht über eine dedizierte Hardwaretastatur. Ein Soft Input Panel (SIP) kann jedoch mehrere Szenarien der Barrierefreiheit der Tastaturnavigation unterstützen. Sprachausgaben können Texteingaben vom Text-SIP lesen, darunter Löschankündigungen. Benutzer wissen, wo sich ihre Finger befinden, da das Bildschirmleseprogramm erkennt, dass der Benutzer Tasten auswählt und den Namen der ausgewählten Taste laut vorliest. Einige der tastaturbezogenen Konzepte für die Barrierefreiheit können auch zugehörigen Hilfstechnologieverhalten zugeordnet werden, die überhaupt keine Tastatur verwenden. Das SIP verfügt zwar nicht über eine Tabulatortaste, die Sprachausgabe unterstützt jedoch eine Touchbewegung, die dem Drücken der Tabulatortaste entspricht. Daher ist eine geeignete Aktivierreihenfolge über die Steuerelemente auf einer UI weiterhin ein wichtiges Barrierefreiheitsprinzip. Pfeiltasten, wie sie für die Navigation innerhalb von komplexen Steuerelementen verwendet werden, werden auch über die Toucheingabe der Sprachausgabe unterstützt. Sobald der Fokus auf einem Steuerelement liegt, das nicht zur Texteingabe dient, unterstützt die Sprachausgabe eine Geste zum Aufrufen der Aktion dieses Steuerelements.

Tastenkombinationen sind für Windows Phone-Apps in der Regel nicht relevant, da ein SIP nicht über STRG- und ALT-TASTEN verfügt.

Verwandte Themen

Grundlegende Zugriffsanforderungen

 

 

Anzeigen:
© 2014 Microsoft