Reaktion auf Tastaturinteraktionen (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]
Erstellen und Gestalten Sie Apps, in denen Benutzer per Hardwaretastatur, Bildschirmtastatur oder Touchtastatur interagieren können.
Tipp Dieses Thema enthält spezifische Informationen zum Entwickeln von Apps mit JavaScript.
Informationen zu Apps mit C++, C# oder Visual Basic finden Sie unter Reaktion auf Tastaturinteraktionen (XAML).
Informationen zu Apps mit DirectX mit C++ finden Sie unter Entwickeln von Maussteuerelementen (DirectX und C++).
Voraussetzungen: Wenn Sie noch keine Erfahrung mit der Entwicklung von Apps mit JavaScript haben, sollten Sie sich in den folgenden Themen zunächst mit den hier besprochenen Technologien vertraut machen.
Erstellen Ihrer ersten Windows Store-App mit JavaScript
Roadmap für Windows Store-Apps mit JavaScript
Informieren Sie sich über Ereignisse unter Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen
App-Features von A bis Z:
In unserer Reihe App-Features von A bis Z können Sie sich genauer über diese Funktion informieren.
Benutzerinteraktion von A bis Z (HTML)
Anpassung der Benutzerinteraktion von A bis Z (HTML)
Richtlinien für die Benutzeroberfläche:
Die Plattform-Steuerelementbibliotheken (HTML und XAML) bieten umfassende Funktionalität für Windows-Benutzerinteraktionen, u. a. für Standardinteraktionen, animierte Physikeffekte und visuelles Feedback. Wenn Sie keine Unterstützung für angepasste Interaktionen benötigen, sollten Sie diese integrierten Steuerelemente verwenden.
Falls die Funktionalität der Plattformsteuerelemente nicht ausreicht, können Ihnen die folgenden Richtlinien für Benutzerinteraktionen dabei helfen, eine ansprechende, immersive und für alle Eingabemodi einheitliche Interaktionsumgebung bereitzustellen. Diese Richtlinien betreffen in erster Linie Fingereingaben, sie sind jedoch auch für Touchpad-, Maus-, Tastatur- und Stifteingaben relevant.
- Richtlinien für häufige Benutzerinteraktionen
- Richtlinien für optischen Zoom und Änderung der Fenstergröße
- Richtlinien für Schwenkung
- Richtlinien für Drehung
- Richtlinien für semantischen Zoom
- Richtlinien für visuelles Feedback
Beispiele: Sehen Sie sich unter Beispiele für Apps diese Funktionalität in Aktion an.
Anpassung der Benutzerinteraktion von A bis Z
Eingabe: Beispiel für Gerätefunktionen
Eingabe: Beispiel für die Bildschirmtastatur
Beispiel für die Reaktion auf die Anzeige der Bildschirmtastatur
Übersicht
Die Tastatureingabe ist ein wichtiger Teil des Gesamteindrucks, den Benutzer bei der Interaktion haben. Die Tastatur ist unentbehrlich für Personen mit bestimmten körperlichen Beeinträchtigungen oder für Benutzer, die die Tastatur als effizienteste Methode ansehen, um mit einer App zu interagieren. Benutzer sollten beispielsweise in der Lage sein, mit der Tabulatortaste und den Pfeiltasten in der App zu navigieren, mit der Leertaste und der EINGABETASTE UI-Elemente zu aktivieren und mit Tastenkombinationen auf Befehle zuzugreifen.
Eine gut durchdachte Tastatur-Benutzeroberfläche ist ein wichtiger Aspekt für die Barrierefreiheit von Software. Sie ermöglicht es Benutzern mit einer Sehbeeinträchtigung oder mit bestimmten motorischen Einschränkungen, in einer App zu navigieren und mit deren Features zu interagieren. Diese Benutzer können u. U. keine Maus bedienen und sind auf verschiedene Hilfstechnologien wie etwa Tastaturerweiterungstools, Bildschirmtastaturen, Bildschirmlupen, Bildschirmleseprogramme oder die Möglichkeit der Spracheingabe angewiesen.
Die am weitesten verbreitete Tastaturart ist die externe Hardwaretastatur, die physisch an ein Gerät angeschlossen wird. Neben der Hardwaretastatur bietet Windows 8 zwei Softwaretastaturen:
Bei der Bildschirmtastatur handelt es sich um eine Softwaretastatur, die Sie unter Windows anstelle der physischen Tastatur zum Eingeben von Daten per Touch, Maus, Zeichen-/Eingabestift oder anderem Zeigegerät verwenden können. Ein Touchscreen ist nicht erforderlich. Die Bildschirmtastatur ist für Systeme ohne physische Tastatur oder für Benutzer vorgesehen, deren Mobilitätseinschränkungen die Verwendung herkömmlicher physischer Eingabegeräte verhindern. Die Bildschirmtastatur emuliert nahezu alle Funktionen der Hardwaretastatur.
.png "Die Bildschirmtastatur")
Bei der Touchtastatur handelt es sich um eine visuelle Softwaretastatur für die Texteingabe per Touch. Die Touchtastatur ist kein Ersatz für die Bildschirmtastatur von Windows. Sie wird nur für die Texteingabe verwendet (die Hardwaretastatur wird nicht emuliert) und wird nur angezeigt, wenn der Fokus auf einem Textfeld oder einem anderen bearbeitbaren Textsteuerelement liegt.
Hinweis Die Bildschirmtastatur hat gegenüber dem SIP Priorität. Das SIP erscheint nicht, wenn die Bildschirmtastatur angezeigt wird.
Hier finden Sie Beispiele für die Touchtastatur.
Windows – Standardlayout:
.png "Touchtastatur im Standardlayout")
Windows – Daumenlayout (möglicherweise nicht in allen Sprachen verfügbar):
.png "Touchtastatur im Daumenlayout")
Windows Phone – Standardlayout:
.png "Die Touchtastatur von Windows Phone")
Tastaturereignisse
Die folgenden Tastaturereignisse können sowohl für Hardware- als auch für Bildschirmtastaturen eintreten.
| Ereignis | Beschreibung |
|---|---|
| keydown | Tritt ein, wenn eine beliebige Taste gedrückt wird. |
| keyup | Tritt ein, wenn eine beliebige Taste losgelassen wird. |
| keypress | Tritt ein, wenn eine alphanumerische Taste gedrückt wird. |
Tastaturereignisse und Fokus
Die Steuerelemente der UI generieren nur dann Tastaturereignisse, wenn sie den Eingabefokus haben. Ein einzelnes Steuerelement erhält den Fokus, wenn Benutzer im Layout auf das Steuerelement klicken oder tippen oder mit der TAB-TASTE im Inhaltsbereich eine Aktivierreihenfolge durchlaufen.
Sie können auch die focus-Methode aufrufen, um den Fokus zu erzwingen. Dies ist notwendig, wenn Sie Tastenkombinationen implementieren, da der Tastaturfokus beim Laden der UI nicht standardmäßig festgelegt wird. Weitere Informationen finden Sie weiter unten in diesem Thema unter Beispiel für Tastenkombinationen.
Damit ein Steuerelement den Eingabefokus erhält, muss es aktiviert und sichtbar sein. Dies ist der Standardzustand der meisten Steuerelemente. Wenn ein Steuerelement den Eingabefokus hat, kann es Tastatureingabeereignisse auslösen und auf diese reagieren. Dies wird weiter unten in diesem Thema beschrieben. Mit den focus-, focusin- blur- und focusout-Ereignissen können Sie außerdem reagieren, wenn ein Steuerelement den Fokus erhält oder verliert.
Standardmäßig entspricht die Aktivierreihenfolge von Steuerelementen der Reihenfolge, in der sie im HTML-Code angezeigt werden. Mit der tabIndex-Eigenschaft können Sie diese Reihenfolge jedoch ändern. Weitere Informationen finden Sie unter Implementieren von Barrierefreiheit für den Tastaturzugriff (HTML).
Tastaturereignishandler
Es wird empfohlen, in HTML-Code die Ereignishandler nicht deklarativ, sondern programmgesteuert hinzuzufügen (siehe Warum Ereignishandler nicht im Markup festgelegt werden dürfen).
Es existieren drei Eingabeereignisse, die direkt mit Tastaturinteraktionen in Zusammenhang stehen: keydown, keyup und keypress.
Die meisten Ereignishandler empfangen ein einzelnes Argument, ein Event object, das Informationen zum Ereignis enthält. Einige der nützlichsten Tastatureingabeeigenschaften sind target, keyCode, und, wenn das Bubbling für Ereignisse zulässig ist, currentTarget.
Taste
In der Regel werden Tastaturereignisse überwacht, um einen bestimmten Tastenwert zu verarbeiten. Überprüfen Sie den keyCode-Wert in den Ereignisdaten, um die gedrückte oder losgelassene Taste zu ermitteln. keyCode gibt einen Key-Wert zurück. Die Key-Enumeration umfasst alle unterstützten Tasten.
Tastenkombinationen
Zusätzlich zur Navigation und Aktivierung über die Tastatur empfiehlt es sich, Tastenkombinationen für die Funktionen Ihrer App zu implementieren. Durch Tastenkombinationen (normalerweise eine Buchstabentaste kombiniert mit einer Zusatztaste) wird die Produktivität verbessert, da sie dem Benutzer eine effiziente Möglichkeit für den Zugriff auf die Funktionalität der App bieten.
Zugriffstasten ermöglichen den schnellen Zugriff auf UI-Elemente 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 UI-Elemente aufweisen, die exakt dem Befehl entsprechen. Tastenkombinationen sind eine Kombination aus der Strg- und/oder Umschalttaste und einer Buchstabentaste.
Mit dem x-ms-acceleratorKey-Attribut können Sie Bildschirmleseprogramme und andere Hilfstechnologien darüber benachrichtigen, dass eine Tastenkombination vorhanden ist. Dieses Attribut stellt nicht das Verhalten der Tastenkombination bereit. Sie müssen Tastaturereignishandler wie keydown, keyup und keypress bereitstellen, um Tastenkombinationen in Ihrer App zu verarbeiten.
Überwachen und Behandeln von Tastaturereignissen
An dieser Stelle demonstrieren wir die Angabe und Definition eines Handlers für das keydown-Ereignis.
Hinweis Diese Beispiele stammen aus dem Beispiel für die angepasste Benutzerinteraktion zum Thema Anpassung der Benutzerinteraktion von A bis Z (HTML).
Dieser Ereignishandler filtert alle Tastaturanschläge und verarbeitet nur die Tasten Pfeil links und Pfeil rechts.
// Key down handler.
// Take input from only the left and right arrow keys.
// Left: counter-clockwise rotation.
// Right: clockwise rotation.
this._element.addEventListener("keydown", function onKeyDownE(eventInfo) {
// Process keystroke only if color selected.
if (!that.selectedColor) {
return;
}
if (eventInfo.target === msGesture_ColorMixer.target) {
if (that._focus === false) {
return;
}
// Set increment or decrement value based on key pressed.
var increment;
if (eventInfo.keyCode === WinJS.Utilities.Key.leftArrow) {
increment = -1;
}
else if (eventInfo.keyCode === WinJS.Utilities.Key.rightArrow) {
increment = 1;
}
else return;
// Attach first contact and track input device type.
if (!that._pointerType) {
that._pointerType = "keyboard";
}
// Rotate the color mixer.
_Rotate(increment);
// Event tracking.
//document.getElementById("status").innerHTML += "keydown :: " + eventInfo.keyCode;
}
}, false);
Deklarieren Sie die Tastenkombinationen im HTML-Markup mithilfe der Attribute „accesskey“ und „x-ms-acceleratorkey“.
<div class="ColorSelector" id="colorSelector">
<!--
The aria-label attribute can be used when:
- the name of an element cannot be determined
programmatically from the content of the element.
- providing a visible label and/or tooltip is not
the desired user experience.
However, if the label text is visible on screen, you should
use aria-labelledby instead of aria-label.
-->
<div class="Color"
id="red"
aria-labelledby="redLabel redValue"
tabindex="0"
accesskey="R">
<span class="ColorLabel"
id="redLabel"
data-win-res="{textContent: 'colorpicker_red'}" />
<span class="ColorValue" id="redValue" />
</div>
<div class="Color"
id="green"
aria-labelledby="greenLabel greenValue"
tabindex="0"
accesskey="G">
<span class="ColorLabel"
id="greenLabel"
data-win-res="{textContent: 'colorpicker_green'}" />
<span class="ColorValue" id="greenValue" />
</div>
<div class="Color"
id="blue"
aria-labelledby="blueLabel blueValue"
tabindex="0"
accesskey="B">
<span class="ColorLabel"
id="blueLabel"
data-win-res="{textContent: 'colorpicker_blue'}" />
<span class="ColorValue" id="blueValue" />
</div>
<!--
Ctrl+S invokes the Save button and is exposed by a tooltip.
-->
<button
id="sendButton"
value="Send"
title="Send (Ctrl+S)"
x-ms-acceleratorkey="S">Send</button>
Das Framework unterstützt die Tastaturfunktionalität zum Festlegen des Fokus oder Aufrufen von Elementen. Sie müssen jedoch Tastaturereignishandler implementieren, zum Beispiel keydown, keyup und keypress, damit Tastenkombinationen in der App verarbeitet werden können.
var sendButton = document.getElementById('sendButton');
sendButton.addEventListener('keyup', function(e) {
var itm = e.srcElement;
if (e.ctrlKey && e.keyCode === WinJS.Utilities.Key.s ) {
// Invoke send functionality.
}
});
Ereignismodifizierer
preventDefault bricht die Standardaktion des Ereignisses ab, ohne die Weitergabe durch das Dokumentobjektmodell (DOM) zu stoppen. Verwenden Sie cancelable, um zu überprüfen, ob das Ereignis abgebrochen werden kann, da der preventDefault-Aufruf für ein nicht abbrechbares Ereignis keine Auswirkung hat.
stopPropagation bricht die Ereignisweitergabe in der Ereignisphase der Erfassung oder des Bubblings ab. Das Ereignis wird jedoch an alle Ereignislistener im aktuellen Ziel verteilt (unabhängig von der Erfassung oder dem Bubbling), bevor der Ereignisablauf stoppt. Wenn Sie die Ausführung jeglicher verbleibender Handler vollständig verhindern möchten, verwenden Sie stattdessen die stopImmediatePropagation-Methode.
Die Bildschirmtastatur
Steuerelemente für die Texteingabe bieten automatische Unterstützung für die Bildschirmtastatur. Wenn Benutzer den Eingabefokus per Fingereingabe auf ein Textsteuerelement festlegen, wird automatisch die Bildschirmtastatur angezeigt. Wenn sich der Eingabefokus nicht auf einem Textsteuerelement befindet, ist die Bildschirmtastatur ausgeblendet.
Wenn die Bildschirmtastatur angezeigt wird, wird Ihre UI automatisch umpositioniert, um sicherzustellen, dass das Element mit dem Fokus sichtbar bleibt. Dies kann dazu führen, dass andere wichtige Bereiche der UI nicht mehr auf dem Bildschirm angezeigt werden. Sie können das Standardverhalten jedoch deaktivieren und eigene UI-Anpassungen vornehmen, wenn die Bildschirmtastatur eingeblendet wird. Weitere Informationen finden Sie im Beispiel zur Reaktion auf die Anzeige der Bildschirmtastatur.
Wenn Sie ein benutzerdefiniertes Steuerelement erstellen, das zwar Texteingabe erfordert, aber nicht von einem Standardsteuerelement für die Texteingabe abgeleitet ist, können Sie Unterstützung für die Bildschirmtastatur hinzufügen, indem Sie die richtigen Steuerelementmuster für die Benutzeroberflächenautomatisierung implementieren. Weitere Informationen finden Sie im Beispiel für die Bildschirmtastatur.
Durch Drücken von Tasten auf der Bildschirmtastatur werden genau wie beim Drücken von Tasten auf Hardwaretastaturen die Ereignisse keydown und onkeyup ausgelöst. Die Bildschirmtastatur löst jedoch keine Eingabeereignisse für STRG+A, STRG+Z, STRG+X, STRG+C und STRG+V aus, da diese Tastenkombinationen für Textänderungen im Eingabesteuerelement reserviert sind.
Richtlinien für die Benutzeroberfläche zur Unterstützung von Tastaturinteraktionen
Hier finden Sie einige Richtlinien für die Unterstützung von Tastaturinteraktionen.
Allgemein
Die Benutzer müssen in der Lage sein, alle von der App unterstützten Funktionen nur mithilfe der Hardware-Tastatur oder der Bildschirmtastatur auszuführen.Hinweis Die Bildschirmtastatur wird nur für Texteingabe und nicht für App- oder Systembefehle verwendet.
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 „Inhalt“ 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.
Die Navigation durch die Inhalte mithilfe der TAB-Taste und der Pfeiltasten muss in einer logischen Reihenfolge erfolgen.
Legen Sie für das tabIndex-Attribut einen Wert fest, der für alle interaktiven UI-Elemente, 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 UI-Elementen mithilfe der Tabulatortaste navigieren.
Verwenden Sie die Pfeiltasten als Tastenkombinationen für die ordnungsgemäße interne Navigation zwischen untergeordneten Elementen zusammengesetzter Elemente. Wenn Knoten der Strukturansicht separate untergeordnete Elemente für die Verarbeitung der Erweitern/Reduzieren- und Knoten-Aktivierung aufweisen, sollten Sie die Nach-links- und die Nach-rechts-Taste verwenden, um die Erweitern/Reduzieren-Funktion über die Tastatur bereitzustellen.
Stellen Sie sicher, dass alle UI-Elemente, auf die geklickt werden kann, auch über die Tastatur aufgerufen werden können.
Implementieren Sie Tastenkombinationen für wichtige Funktionen der App. (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 UI-Elemente 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 UI-Elemente 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. Deklarieren Sie die Tastenkombinationen im HTML-Markup Ihrer App mithilfe des accessKey- und -ms-AcceleratorKey-Attributs, und übermitteln Sie Tastenkombinationen mithilfe von QuickInfos, barrierefreien Namen und barrierefreien Beschreibungen oder einer anderen Form der Bildschirmkommunikation. Tastenkombinationen sollten im Hilfeinhalt Ihrer App ausführlich dokumentiert sein.
Weitere Unterstützung bei der Implementierung von Tastenkombinationen erhalten Sie unter Tastenkombinationen in den Richtlinien zur benutzerfreundlichen Interaktion bei Windows.
Definieren Sie die Standardtastenkombinationen nicht um, die Benutzer in allen Windows Store-Apps erwarten. Eine umfassende Liste finden Sie unter Tastenkombinationen.
Hardware
Überprüfen Sie die Funktionen des Tastaturgeräts (KeyboardCapabilities), um festzustellen, ob eine Tastatur angeschlossen ist und auf welche Elemente der Benutzeroberfläche Ihrer App die Tastaturhardware direkt zugreifen kann. Weitere Informationen zum Überprüfen von Gerätefunktionen finden Sie unter Schnellstart: Erkennen von Zeigergeräten.
Weisen Sie Tastaturschaltflächen in der Benutzeroberfläche Ihrer App entsprechende Funktionen zu (Zurück- und Vorwärts-Schaltflächen).
Visuelles Feedback
- Verwenden Sie Fokusrechtecke nur bei Tastaturinteraktionen. Wenn der Benutzer eine Touchinteraktion auslöst, blenden Sie die für Tastaturinteraktionen spezifische Benutzeroberfläche schrittweise aus. Somit bleibt die Benutzeroberfläche sauber und aufgeräumt.
- Lassen Sie kein visuelles Feedback anzeigen, wenn ein Element keine Interaktionen unterstützt (z. B. statischer Text).
- Lassen Sie für alle Elemente, die das gleiche Eingabeziel darstellen, visuelles Feedback anzeigen.
- Stellen Sie Schaltflächen (z. B. "+" und "-") zur Verfügung, um Hinweise für touchbasierte Manipulationen wie etwa Verschieben, Drehen, Zoomen usw. zu emulieren.
Allgemeine Informationen zum visuellen Feedback finden Sie unter Richtlinien für visuelles Feedback.
Verwandte Themen
Konzept
Reaktion auf Benutzerinteraktionen
Implementieren des Zugriffs über die Tastatur
Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen