Erstellen barrierefreier QuickInfos

Erstellen barrierefreier QuickInfos

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

In diesem Thema beschreiben wir das Markup und den Code, mit dem Sie sicherstellen können, dass QuickInfos in einer Windows-Runtime-App barrierefrei sind.

Standard-HTML-QuickInfos

Zum Erstellen standardmäßiger HTML-QuickInfos legen Sie das title-Attribut für ein Element fest. Das System verwendet eine standardmäßige HTML-QuickInfo sowohl als barrierefreien Namen als auch als barrierefreie Beschreibung. Wenn Sie das title-Attribut zum Erstellen einer QuickInfo, aber nicht für einen barrierefreien Namen verwenden möchten, verwenden Sie das aria-labelledby- oder das aria-label-Attribut. Diese Attribute haben Vorrang vor dem title-Attribut, wenn das System den barrierefreien Namen abruft.


<!-- Narrator reads: "Inner text" -->
<button>Inner text</button>
<!-- Narrator reads: "Title attribute" -->
<button title="Title attribute">Inner text</button>
<!-- Narrator reads: "ARIA label" -->
<button title="Title attribute" aria-label="ARIA label" >Inner text</button>

QuickInfos für Windows-Runtime-Apps mit JavaScript

Eine QuickInfo in einer Windows-Runtime-App mit JavaScript hat keine Auswirkungen auf den barrierefreien Namen oder die barrierefreie Beschreibung. Die Sprachausgabe meldet eine QuickInfo, sobald diese eingeblendet wird. Wenn Sie aber den gleichen Text für eine QuickInfo und für einen barrierefreien Namen oder eine barrierefreie Beschreibung verwenden möchten, müssen Sie dies explizit festlegen.


<!-- The P element holds the text to use for the tooltip and description. -->
<p id="backTooltipText">Use this button to navigate back</p>
<button id="back" aria-describedby="backTooltipText">Back</button>
<script>
    var back = document.getElementById('back');
    var backTooltipText = document.getElementById('backTooltipText');

    var myTooltip = Win.UI.Tooltip(back);
    myTooltip.innerHTML = backTooltipText.innerHTML;
</script>

Hinweis  Wenn der Text nicht angezeigt werden soll, können Sie Cascading Stylesheets (CSS) verwenden, um das p-Element unsichtbar zu machen.
 

QuickInfo für XAML

Für das XAML-UI-System für QuickInfos können entweder explizite ToolTip-Elemente genutzt werden, oder es kann eine rein textuelle QuickInfo festgelegt werden, indem für alle Vorkommen von UIElement ein ToolTipService.ToolTip-Attribut verwendet wird. Der Textinhalt der QuickInfo wird höher gestuft als HelpText-Eigenschaft für die Microsoft-Benutzeroberflächenautomatisierung für das Element, an das die QuickInfo angefügt ist. Dieser Text ist auch der Name-Wert des ToolTip-Elements selbst, die eigentliche QuickInfo befindet sich aber normalerweise nicht in der Ansicht „Inhalt“ des Benutzeroberflächenautomatisierungs-Baums. Der XAML-QuickInfo-Dienst löst die erforderlichen Benutzeroberflächenautomatisierungs-Ereignisse aus, damit Sprachausgaben darüber informiert sind, dass beim Erhalt des Fokus eine QuickInfo geöffnet wird. Das Programm für die Bildschirmsprachausgabe ruft den zu lesenden Text dann aus dem HelpText-Wert ab. Weitere Informationen zur Verwendung von QuickInfos in einer XAML-UI finden Sie unter So wird's gemacht: Hinzufügen von QuickInfos. Weitere Informationen dazu, wie QuickInfos von der Benutzeroberflächenautomatisierung behandelt werden, finden Sie unter Typ des ToolTip-Steuerelements.

Verwandte Themen

Implementieren der Barrierefreiheit für bestimmte Inhaltstypen

 

 

Anzeigen:
© 2017 Microsoft