Verfügbarmachen von grundlegenden Informationen zu Benutzeroberflächenelementen (HTML)

Applies to Windows and Windows Phone

Sie suchen die C#/VB/C++/XAML-Version dieses Themas? Informationen finden Sie unter Verfügbarmachen von grundlegenden Informationen zu Benutzeroberflächenelementen (XAML).

Hilfstechnologien (z. B. Bildschirmleseprogramme) benötigen Informationen zu den Benutzeroberflächenelementen einer App. Das System stellt die Informationen auf Grundlage des HTML-Markups einer App bereit. Wir beschreiben den HTML-Code beschrieben, den Sie implementieren müssen, damit die App die grundlegenden Informationen bereitstellt, die von Hilfstechnologien benötigt werden.

Barrierefreier Name

Der barrierefreie Name ist eine kurze, beschreibende Textzeichenfolge, mit der die Sprachausgabe ein UI-Element ansagt. Sie sollten den barrierefreien Namen für die UI-Elemente festlegen, deren Bedeutung wichtig für das Verständnis des Inhalts oder für die Interaktion mit der Benutzeroberfläche ist. Zu diesen Elementen gehören normalerweise Bilder, Eingabefelder, Schaltflächen, Steuerelemente, Bereiche usw.

In der folgenden Tabelle wird erläutert, wie Sie einen barrierefreien Namen für unterschiedliche Typen von HTML-Elementen festlegen.

ElementtypBeschreibung
Statischer TextBei Text und anderen HTML-Tags basiert der barrierefreie Name auf dem sichtbaren (inneren) Text. Beispiele: p-Tag und h1-Tag.
BilderBei Bildern wird das alt-Attribut als barrierefreier Name verwendet. Dies gilt für Bilder, die mit dem img-Tag angegeben werden, Bildschaltflächen, die mit <input type="image"> angegeben werden, und area-Tags, die mit Imagemaps verwendet werden. Weitere Informationen zu Imagemaps finden Sie unter Imagemaps in der HTML5-Spezifikation des World Wide Web Consortium (W3C).
Formularfelder Der barrierefreie Name für ein Formularfeld wie <input type="text| password| checkbox| radio|..."> oder für ein select-Tag oder textarea-Tag sollte der Bezeichnung entsprechen, die für das Feld angezeigt wird. Das bevorzugte Verfahren zum Zuordnen einer Bezeichnung zu einem Eingabefeld besteht in der Verwendung des label-Tags und dem Festlegen des for-Attributs. Wenn der Benutzer auf das label-Tag klickt, wird der Fokus auf das zugeordnete Steuerelement gelegt. Weitere Informationen zu Bezeichnungen für UI-Elemente finden Sie unter Beschriften und Beschreiben in den Erstellungsrichtlinien der Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) 1.0.
Schaltflächen und Links Standardmäßig basiert der barrierefreie Name einer Schaltfläche oder eines Links auf dem sichtbaren Text. Bei a-Tags und button-Tags basiert der barrierefreie Name auf dem inneren Text des Tags. Bei dem input-Tag mit type="button" basiert der barrierefreie Name auf dem value-Attribut.
TabellenDer barrierefreie Name einer Tabelle wird normalerweise mit einem caption-Tag in der Tabelle festgelegt.
Struktur- und OrientierungselementeEs ist wichtig, Struktur- und Orientierungselementen Bezeichnungen zuzuweisen, da die Sprachausgabe anhand dieser Bezeichnungen im Dokument navigiert. Beispiele für Elemente, für die Bezeichnungen benötigt werden, sind Formulare, Frames, Bereiche und andere Elemente mit Orientierungsrollen, z. B. "Primär", "Navigation" und "Suche".
Elemente in einem div-Element

Bei allen Elementen, die für gewöhnlich durch die Verwendung eines div-Tags definiert werden, darunter benutzerdefinierte Elemente, können Sie mithilfe der folgenden Attribute einen barrierefreien Namen festlegen:

  • aria-labelledby – bezieht sich auf das Element, dass den als barrierefreien Namen zu verwendenden Text enthält.
  • aria-label – um den barrierefreien Namen direkt festzulegen.
  • title – um eine QuickInfo zu erstellen, die auch als barrierefreier Name verwendet wird.

Sie sollten die genannten Attribute mit benutzerdefinierten UI-Elementen verwenden (z. B. mit div-Tags). Darüber hinaus können die HTML-Standardattribute mit diesen Attributen überschrieben werden.

 

Im folgenden Beispiel wird veranschaulicht, wie ein barrierefreier Name für unterschiedliche Typen von HTML-Elementen festgelegt wird.


<!--Label landmark regions by using aria-labelledby or aria-label. -->      
<h1 id="formLabel">Personal Information</h1>
<form aria-labelledby="formLabel" ... > 

    <!-- The label tag with "for" attribute sets the name of the input field. -->
    <label for="fullname">Full Name</label>
    <input id="fullname" type="text" accesskey="N"/>

    <!-- Alt text is used as the image accessible name. -->      
    <img src="..." alt="Personal Photo" />

    <!-- An image button's accessible name is set with the alt attribute. -->
    <input type="image" src="images/back.png" alt="Back" onclick="..." />

    <!-- Inner text is used as the accessible name for A, BUTTON, P, and so on. -->
    <a href="...">More Photos</a> 

    <!-- The submit button uses default caption text as the accessible name. -->
    <input type="submit" /> 

</form>

Für Windows-Runtime-Steuerelemente können Sie die Datenbindung zum Festlegen des barrierefreien Namens verwenden.


<!-- Data binding maps the image alt attribute to the data source title field -->
<div class="..." data-win-control="Win.Binding.Template">
    <div class="image" data-win-bind="...; alt: title"></div>
    <div class="text">
        <h1 class="title" data-win-bind="textContent: title"></h1>
        <p class="description" data-win-bind="textContent: description"></p>
    </div>
</div>

<!-- List view can set the accessible name with aria-labelledby or aria-label. -->
<h1 id="pageTitle">Items collection page</ h1>
<div data-win-control="Win.UI.ListView" data-win-options="{...}" 
    aria-labelledby="pageTitle">
</div>

Hinweis  Die Barrierefreiheitsplattform der Microsoft-Benutzeroberflächenautomatisierung generiert die Strukturdarstellung der UI von Apps für die Verwendung durch Benutzeroberflächenautomatisierungs-Clients. Diese stellt die logische Struktur der UI-Elemente dar, die durch Hilfstechnologien untersucht werden und mit denen diese Technologien interagieren können. Sie geben die Informationen für die Benutzeroberflächenautomatisierung nicht selbst an. Sie nutzen aber die integrierte Unterstützung durch den Windows-Runtime-Host, über den alle für den HTML-Inhalt relevanten Attribute in gleichwertige Informationen für die Benutzeroberflächenautomatisierung konvertiert werden. Damit wird eine gemeinsame Barrierefreiheits- oder Automatisierungsdarstellung für jede App erstellt, die angezeigt wird.

Wert

Wenn ein UI-Element ein Wert aufweist, der wichtig für das Verständnis des Zustands des UI-Elements ist, müssen Sie diese Informationen für Frameworks bereitstellen, die Funktionen für die Barrierefreiheit nutzen.

Ein HTML-Steuerelement in einem div-Tag, dessen role-Attribut auf "slider", "progressbar" oder "spinbutton" festgelegt wurde, muss z. B. die Attribute aria-valuemax, aria-valuemin und aria-valuenow verfügbar machen. Außerdem muss die App das aria-valuenow-Attribut dynamisch speichern, um Änderungen des Elements wiederzugeben. Es wird empfohlen, das aria-valuetext-Attribut festzulegen, um die Textzeichenfolge bereitzustellen, die dem aktuellen Wert des aria-valuenow-Attributs entspricht.


<div id="sl" role="slider" ... 
    aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="good"...>
</div>

<script>
    function manageValue()
    {
        ...
        // Dynamically maintain aria properties for the current value and text.
        sl.setAttribute("aria-valuenow", currentValue);
        sl.setAttribute("aria-valuetext", currentValueText);
        ...
    }
}
</script>


Status

In einigen Fällen ist es wichtig, den Barrierefreiheitsstatus eines UI-Elements festzulegen und beizubehalten (z. B. mit dem aria-disabled-Attribut). Das Festlegen und Speichern des Barrierefreiheitsstatus ist insbesondere für benutzerdefinierte UI-Elemente von Bedeutung. Das System verfügt über eine integrierte Unterstützung zum Speichern des Barrierefreiheitsstatus für alle Standard-UI-Elemente und Windows-Steuerelemente.


<!-- Declaring accessibility attributes for a custom image button. -->
<div id="folders" role="tree" aria-label="Folders">
...
</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.leftArrow) {
            // The node is collapsed if it has children
            e.srcElement.setAttribute('aria-expanded', false );
        } else if ( e.keyCode === Win.Utilities.Key.rightArrow) {
            // The node is expanded if it has children
            e.srcElement.setAttribute('aria-expanded', true );
        }
    });
</script>

Hinweis  Wenn Sie ein Element und seinen gesamten Inhalt aus der Struktur der Benutzeroberflächenautomatisierung entfernen möchten, verwenden Sie das aria-hidden-Attribut, und legen Sie den Wert auf true fest.

Rolle

Sie sollten benutzerdefinierten UI-Elementen eine gültige (nicht abstrakte) WAI-ARIA-Rolle zuweisen. Auf diese Weise erhält die Sprachausgabe weitere Informationen zu den von den UI-Elementen zu erwartenden Verhalten und ihren Eigenschaften.

Außerdem ist es wichtig, die Rolle für Elemente festzulegen, auf die vom aria-labelledby-Attribut verwiesen wird, sowie für Elemente, die für die Benutzerinteraktion wichtige UI-Elemente verfügbar machen.

Im folgenden Beispiel werden Elemente einer Strukturansicht mit den entsprechenden WAI-ARIA-Rollen gekennzeichnet, damit die Sprachausgabe die Struktur der Strukturansicht nachvollziehen kann. Außerdem wird dadurch ihr Erweitern–Reduzieren-Verhalten verfügbar gemacht.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" tabindex="0" 
        aria-activedescendant="n-0" >
    <div id="n-0" 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>

Damit die Konzepte der Barrierefreiheit besser dargestellt werden können, wurde die Strukturansicht im vorhergehenden Beispiel vereinfacht und enthält nur ein Element für jeden Knoten der Strukturansicht. In einer tatsächlichen Implementierung enthalten erweiterbare Knoten zwei Unterelemente, eines zum Darstellen der Erweitern–Reduzieren-Funktion und eines zum Bereitstellen der Funktionen, die bei der Aktivierung des Knotens ausgeführt werden (z. B. Laden einer Liste der enthaltenen Dateien und Ordner).


<!-- An example of the expandable and actionable node. -->
...
    <div role="presentation">
    <img src="images/expand.png" role="presentation" onclick="expColl(event)"/>
    <span id="n-0" role="treeitem" onclick="activateItem(event)"
        aria-expanded="true" >Libraries</span>
    </div>
...

Im Beispiel oben werden mit role="presentation" Elemente aus der Benutzeroberflächenstruktur (oder Barrierefreiheitsstruktur) entfernt, die keinen semantischen Wert aufweisen. Beachten Sie, dass mit role="presentation" das aktuelle Element aus der Benutzeroberflächenstruktur entfernt wird. Dies hat jedoch keine Auswirkungen auf die enthaltenen Unterelemente. Wenn Sie das UI-Element und alle untergeordneten Elemente aus der Benutzeroberflächenstruktur entfernen möchten, verwenden Sie aria-hidden="true".

Einige HTML5-Tags, z. B. a oder img, verfügen über starke implizite Rollen, die ausschließlich mit der Rolle "Präsentation" überschrieben werden können.

Barrierefreie Beschreibung (optional)

Eine barrierefreie Beschreibung stellt weitere Informationen zur Barrierefreiheit für ein bestimmtes Element der Benutzeroberfläche bereit. Normalerweise stellen Sie eine barrierefreie Beschreibung bereit, wenn ein barrierefreier Name allein den Zweck eines Elements nicht ausreichend beschreibt.

Die Sprachausgabe liest die Beschreibung eines Elements nur vor, wenn der Benutzer mit FESTSTELLTASTE+F weitere Informationen zum Element anfordert.

Die beste Möglichkeit zum Bereitstellen einer barrierefreien Beschreibung ist das aria-describedby-Attribut. Dieses Attribut verweist auf eines oder mehrere andere UI-Elemente, deren Textinhalt vom System als barrierefreie Beschreibung verwendet wird. Alternativ können Sie die barrierefreie Beschreibung durch die Implementierung einer QuickInfo bereitstellen, die das title-Attribut enthält. Weitere Informationen finden Sie unter Erstellen barrierefreier QuickInfos.


<!-- Declaring visible text as the accessible description of a table. -->
<p id="tableDesc">This table describes travel expenses organized by destination and dates.</p>
<table aria-describedby="tableDesc">...<table>

Verwandte Themen

Grundlegende Zugriffsanforderungen

 

 

Anzeigen:
© 2014 Microsoft