Anforderungen für barrierefreien TextAccessible text requirements

In diesem Thema werden die bewährten Methoden für barrierefreien Text in Apps beschrieben. Damit stellen Sie sicher, dass der Kontrast zwischen Farben und Hintergründen ausreichend hoch ist.This topic describes best practices for accessibility of text in an app, by assuring that colors and backgrounds satisfy the necessary contrast ratio. Außerdem werden in diesem Thema die Rollen der Microsoft-Benutzeroberflächenautomatisierung, die für Textelemente in einer App der universellen Windows-Plattform (UWP) verwendet werden können, sowie bewährte Methoden für Text in Grafiken erläutert.This topic also discusses the Microsoft UI Automation roles that text elements in a Universal Windows Platform (UWP) app can have, and best practices for text in graphics.

KontrastverhältnisseContrast ratios

Obwohl Benutzer immer die Möglichkeit haben, die Anzeige auf einen Modus mit hohem Kontrast umzuschalten, sollten Sie diese Option in Ihrem App-Design für Text möglichst nicht verwenden.Although users always have the option to switch to a high-contrast mode, your app design for text should regard that option as a last resort. Stellen Sie stattdessen sicher, dass der App-Text bestimmte Richtlinien für die Kontraststufe zwischen Text und seinem Hintergrund erfüllt.A much better practice is to make sure that your app text meets certain established guidelines for the level of contrast between text and its background. Die Bewertung der Kontraststufe basiert auf deterministischen Techniken, bei denen der Farbton nicht berücksichtigt wird.Evaluation of the level of contrast is based on deterministic techniques that do not consider color hue. Wenn Sie z. B. roten Text auf grünem Hintergrund haben, ist dieser Text für einen farbenblinden Benutzer möglicherweise nicht lesbar.For example, if you have red text on a green background, that text might not be readable to someone with a color blindness impairment. Durch eine Überprüfung und Korrektur des Kontrastverhältnisses können Sie solche Probleme bezüglich der Barrierefreiheit vermeiden.Checking and correcting the contrast ratio can prevent these types of accessibility issues.

Die hier dokumentierten Empfehlungen für den Textkontrast basieren auf einem Standard für Barrierefreiheit im Internet, G18: Sicherstellen eines Kontrastverhältnisses von mindestens 4,5:1 zwischen Text (und Textbildern) und dem Texthintergrund.The recommendations for text contrast documented here are based on a web accessibility standard, G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. Dieser Leitfaden ist in der W3C-Spezifikation für die Techniken für WCAG 2.0 enthalten.This guidance exists in the W3C Techniques for WCAG 2.0 specification.

Damit sichtbarer Text als barrierefreier Text gilt, muss er ein Leuchtdichte-Kontrastverhältnis von mindestens 4,5:1 bezogen auf den Hintergrund aufweisen.To be considered accessible, visible text must have a minimum luminosity contrast ratio of 4.5:1 against the background. Ausnahmen sind Logos und nebensächlicher Text (z. B. Text, der Teil einer inaktiven Benutzeroberflächenkomponente ist).Exceptions include logos and incidental text, such as text that is part of an inactive UI component.

Für dekorativen Text, der keine Informationen liefert, gilt diese Anforderung nicht.Text that is decorative and conveys no information is excluded. Wenn beispielsweise zufällige Wörter zum Erstellen eines Hintergrunds verwendet werden und die Wörter ohne Bedeutungsänderung neu angeordnet oder ersetzt werden können, gelten die Wörter als dekorative Elemente und müssen dieses Kriterium nicht erfüllen.For example, if random words are used to create a background, and the words can be rearranged or substituted without changing meaning, the words are considered to be decorative and do not need to meet this criterion.

Überprüfen Sie mit den Farbkontrasttools, ob das Kontrastverhältnis von sichtbarem Text in Ordnung ist.Use color contrast tools to verify that the visible text contrast ratio is acceptable. Tools zum Testen des Kontrastverhältnisses finden Sie unter Techniken für WCAG 2.0 G18 (Abschnitt Ressourcen).See Techniques for WCAG 2.0 G18 (Resources section) for tools that can test contrast ratios.

Hinweis

Einige der unter den Techniken für WCAG 2.0 G18 aufgeführten Tools können bei einer UWP-App nicht interaktiv verwendet werden.Some of the tools listed by Techniques for WCAG 2.0 G18 can't be used interactively with a UWP app. Sie müssen möglicherweise die Werte für Vordergrund- und Hintergrundfarben manuell in das Tool eingeben oder Bildschirmaufnahmen der App-UI erstellen und anschließend das Kontrastverhältnistool für das aufgenommene Bild ausführen.You may need to enter foreground and background color values manually in the tool, or make screen captures of app UI and then run the contrast ratio tool over the screen capture image.

TextelementrollenText element roles

In einer UWP-App können die folgenden Standardelemente (meist als Textelemente oder textedit-Steuerelemente bezeichnet) verwendet werden:A UWP app can use these default elements (commonly called text elements or textedit controls ):

Wenn ein Steuerelement meldet, dass ihm die Rolle Edit zugewiesen ist, gehen Hilfstechnologien davon aus, dass Benutzer die Werte ändern können.When a control reports that is has a role of Edit, assistive technologies assume that there are ways for users to change the values. Falls Sie also statischen Text in einem TextBox platzieren, wird die Rolle falsch gemeldet, wodurch auch die Struktur der App falsch für einen Benutzer gemeldet wird, der Barrierefreiheitsfeatures verwendet.So if you put static text in a TextBox, you are misreporting the role and thus misreporting the structure of your app to the accessibility user.

In den Textmodellen für XAML sind zwei Elemente enthalten, die hauptsächlich für statischen Text, TextBlock-Elemente und RichTextBlock-Elemente verwendet werden.In the text models for XAML, there are two elements that are primarily used for static text, TextBlock and RichTextBlock. Bei keinem dieser Elemente handelt es sich um eine Control-Unterklasse, sodass sie auch nicht den Tastaturfokus erhalten oder in der Aktivierreihenfolge erscheinen können.Neither of these are a Control subclass, and as such neither of them are keyboard-focusable or can appear in the tab order. Dies bedeutet jedoch nicht, dass sie von Hilfstechnologien nicht gelesen werden bzw. gelesen werden können.But that does not mean that assistive technologies can't or won't read them. Sprachausgaben sind in der Regel für die Unterstützung mehrerer Modi zum Ausgeben der Inhalte einer App ausgelegt und verfügen beispielsweise über einen dedizierten Lesemodus oder Navigationsmuster, die über den Fokus und die Aktivierreihenfolge hinausgehen, z. B. einen „virtuellen Cursor“.Screen readers are typically designed to support multiple modes of reading the content in an app, including a dedicated reading mode or navigation patterns that go beyond focus and the tab order, like a "virtual cursor". Fügen Sie Ihren statischen Text also nicht nur deswegen in Container ein, die den Fokus erhalten können, damit Benutzer über die Aktivierreihenfolge darauf zugreifen können.So don't put your static text into focusable containers just so that tab order gets the user there. Benutzer von Hilfstechnologien erwarten, dass über die Aktivierreihenfolge verfügbare Inhalte interaktiv sind. Wenn sie darin auf statischen Text treffen, ist dies eher verwirrend als hilfreich.Assistive technology users expect that anything in the tab order is interactive, and if they encounter static text there, that is more confusing than helpful. Testen Sie dies selbst mit der Sprachausgabe, um einen Eindruck der Benutzeroberfläche Ihrer App zu gewinnen, wenn eine Sprachausgabe zum Untersuchen des statischen Texts der App verwendet wird.You should test this out yourself with Narrator to get a sense of the user experience with your app when using a screen reader to examine your app's static text.

Barrierefreiheitsfunktion „Automatischer Vorschlag“Auto-suggest accessibility

Wenn ein Benutzer etwas in ein Eingabefeld tippt und eine Liste möglicher Vorschläge eingeblendet wird, wird dieses Szenario als „Automatischer Vorschlag“ bezeichnet.When a user types into an entry field and a list of potential suggestions appears, this type of scenario is called auto-suggest. Sie finden diese Funktion häufig in der Zeile An: eines E-Mail-Felds, im Suchfeld von Cortana in Windows, im URL-Eingabefeld in Microsoft Edge, im Feld zur Eingabe des Standorts in der Wetter-App usw.This is common in the To: line of a mail field, the Cortana search box in Windows, the URL entry field in Microsoft Edge, the location entry field in the Weather app, and so on. Bei Verwendung von AutosuggestBox in XAML oder von systeminternen HTML-Steuerelementen ist diese Funktionalität bereits standardmäßig integriert.If you are using a XAML AutosuggestBox or the HTML intrinsic controls, then this experience is already hooked up for you by default. Um die Funktion zur Verfügung zu stellen, müssen das Eingabefeld und die Liste verknüpft werden.To make this experience accessible the entry field and the list must be associated. Im Abschnitt Implementieren von „Automatischer Vorschlag“ finden Sie eine Erläuterung.This is explained in the Implementing auto-suggest section.

Die Sprachausgabe wurde aktualisiert und stellt diese Funktion nun mit einem speziellen Vorschlagsmodus bereit.Narrator has been updated to make this type of experience accessible with a special suggestions mode. Wenn Bearbeitungsfeld und Liste ordnungsgemäß verknüpft sind, haben Endbenutzer im Allgemeinen folgende Möglichkeiten:At a high level, when the edit field and list are connected properly the end user will:

  • Sie wissen, dass die Liste vorhanden ist und wann sie geschlossen wird.Know the list is present and when the list closes
  • Sie wissen, wie viele Vorschläge verfügbar sind.Know how many suggestions are available
  • Sie kennen das ausgewählte Element, falls vorhanden.Know the selected item, if any
  • Sie können den Fokus der Sprachausgabe in die Liste verschieben.Be able to move Narrator focus to the list
  • Sie können mit allen anderen Lesemodi durch einen Vorschlag navigieren.Be able to navigate through a suggestion with all other reading modes

VorschlagslisteSuggestion list
Beispiel für eine VorschlagslisteExample of a suggestion list

Implementieren von „Automatischer Vorschlag“Implementing auto-suggest

Für den Zugriff auf diese Funktion müssen das Eingabefeld und die Liste in der UIA-Struktur einander zugeordnet werden.To make this experience accessible the entry field and the list must be associated in the UIA tree. Die Zuordnung wird über die UIA_ControllerForPropertyId-Eigenschaft in Desktop-Apps oder über die ControlledPeers-Eigenschaft in UWP-Apps hergestellt.This association is done with the UIA_ControllerForPropertyId property in desktop apps or the ControlledPeers property in UWP apps.

„Automatischer Vorschlag“ kann im Allgemeinen auf zwei Weisen genutzt werden.At a high level there are 2 types of auto-suggest experiences.

StandardauswahlDefault selection
Wenn in der Liste eine Standardauswahl getroffen wird, sucht die Sprachausgabe ein UIA_SelectionItem_ElementSelectedEventId-Ereignis in einer Desktop-App oder das AutomationEvents.SelectionItemPatternOnElementSelected-Ereignis, um es in einer UWP-App auszulösen.If a default selection is made in the list, Narrator looks for a UIA_SelectionItem_ElementSelectedEventId event in a desktop app, or the AutomationEvents.SelectionItemPatternOnElementSelected event to be fired in a UWP app. Jedes Mal, wenn sich die Auswahl ändert, wenn der Benutzer einen weiteren Buchstaben eingibt und die Vorschläge aktualisiert wurden oder wenn ein Benutzer durch die Liste navigiert, sollte das ElementSelected -Ereignis ausgelöst werden.Every time the selection changes, when the user types another letter and the suggestions have been updated or when a user navigates through the list, the ElementSelected event should be fired.

Liste mit StandardauswahlList with a default selection
Beispiel mit StandardauswahlExample where there is a default selection

Keine StandardauswahlNo default selection
Wenn keine Standardauswahl vorhanden ist, beispielsweise im Standortfeld der Wetter-App, sucht die Sprachausgabe das UIA_LayoutInvalidatedEventId-Desktopereignis oder das LayoutInvalidated-UWP-Ereignis, das bei jeder Listenaktualisierung für die Liste ausgelöst werden muss.If there is no default selection, such as in the Weather app’s location box, then Narrator looks for the desktop UIA_LayoutInvalidatedEventId event or the UWP LayoutInvalidated event to be fired on the list every time the list is updated.

Liste ohne StandardauswahlList with no default selection
Beispiel ohne StandardauswahlExample where there is no default selection

XAML-ImplementierungXAML implementation

Wenn Sie die standardmäßige AutosuggestBox-Klasse in XAML verwenden, ist diese Funktionalität bereits integriert.If you are using the default XAML AutosuggestBox, then everything is already hooked up for you. Wenn Sie mithilfe von TextBox und einer Liste eine eigene Funktion für automatische Vorschläge erstellen, müssen Sie die Liste für TextBox auf AutomationProperties.ControlledPeers festlegen.If you are making your own auto-suggest experience using a TextBox and a list then you will need to set the list as AutomationProperties.ControlledPeers on the TextBox . Sie müssen das AutomationPropertyChanged -Ereignis jedes Mal für die ControlledPeers-Eigenschaft auslösen, wenn Sie diese Eigenschaft hinzufügen oder entfernen, und abhängig vom verwendeten Szenario auch Ihre eigenen SelectionItemPatternOnElementSelected-Ereignisse oder LayoutInvalidated-Ereignisse auslösen, wie zuvor in diesem Artikel erläutert.You must fire the AutomationPropertyChanged event for the ControlledPeers property every time you add or remove this property and also fire your own SelectionItemPatternOnElementSelected events or LayoutInvalidated events depending on your type of scenario, which was explained previously in this article.

HTML-ImplementierungHTML implementation

Wenn Sie die systemeigenen Steuerelemente in HTML verwenden, wurde die UIA-Implementierung bereits für Sie zugeordnet.If you are using the intrinsic controls in HTML, then the UIA implementation has already been mapped for you. Im Folgenden ein Beispiel für eine Implementierung, die bereits für Sie integriert wurde:Below is an example of an implementation that is already hooked up for you:

<label>Sites <input id="input1" type="text" list="datalist1" /></label>
<datalist id="datalist1">
        <option value="http://www.google.com/" label="Google"></option>
        <option value="http://www.reddit.com/" label="Reddit"></option>
</datalist>

Wenn Sie eigene Steuerelemente erstellen, müssen Sie eigene ARIA-Steuerelemente einrichten, die in den W3C-Standards beschrieben sind.If you are creating your own controls, you must set up your own ARIA controls, which are explained in the W3C standards.

Text in GrafikenText in graphics

Verwenden Sie nach Möglichkeit keinen Text in Grafiken.Whenever possible, avoid including text in a graphic. Text, den Sie der in der App als Image-Element angezeigten Bildquelldatei hinzufügen, ist z. B. nicht automatisch barrierefrei oder für Hilfstechnologien lesbar.For example, any text that you include in the image source file that is displayed in the app as an Image element is not automatically accessible or readable by assistive technologies. Falls Sie Text in Grafiken verwenden müssen, müssen Sie sicherstellen, dass der AutomationProperties.Name-Wert, den Sie als Entsprechung für „alternativen Text“ angeben, diesen Text oder eine Zusammenfassung seiner Bedeutung enthält.If you must use text in graphics, make sure that the AutomationProperties.Name value that you provide as the equivalent of "alt text" includes that text or a summary of the text's meaning. Ähnliche Überlegungen gelten, wenn Sie Textzeichen aus Vektoren als Teil eines Pfads oder mithilfe vonSymbolen erstellen.Similar considerations apply if you are creating text characters from vectors as part of a Path, or by using Glyphs.

Text Schriftgröße und-SkalaText font size and scale

Benutzer können Schwierigkeiten beim Lesen von Text in einer APP haben, wenn die Schriftarten einfach zu klein sind. Stellen Sie daher sicher, dass jeder Text in Ihrer Anwendung eine sinnvolle Größe ist.Users can have difficulty reading text in an app when the fonts uses are simply too small, so make sure any text in your application is a reasonable size in the first place.

Nachdem Sie den offensichtlichen Vorgang durchgeführt haben, enthält Windows verschiedene Tools und Einstellungen für die Barrierefreiheit, die Benutzer nutzen und ihren eigenen Anforderungen und Vorlieben zum Lesen von Text anpassen können.Once you've done the obvious, Windows includes various accessibility tools and settings that users can take advantage of and adjust to their own needs and preferences for reading text. Dazu gehören:These include:

  • Das Bildschirm Vergrößerungs Tool, das einen ausgewählten Bereich der Benutzeroberfläche vergrößert.The Magnifier tool, which enlarges a selected area of the UI. Sie sollten sicherstellen, dass das Layout des Texts in der APP die Verwendung der Bildschirmlupe nicht erschwert.You should ensure the layout of text in your app doesn't make it difficult to use Magnifier for reading.
  • Globale Skalierungs-und Auflösungseinstellungen in Einstellungen->System >Anzeige >Skalierung und Layout .Global scale and resolution settings in Settings->System->Display->Scale and layout . Welche Größen Anpassungsoptionen verfügbar sind, kann variieren, je nachdem, welche Möglichkeiten das Anzeigegerät hat.Exactly which sizing options are available can vary as this depends on the capabilities of the display device.
  • Einstellungen für die Textgröße in den Einstellungen->einfache Zugriffs >Anzeige .Text size settings in Settings->Ease of access->Display . Passen Sie die Einstellung Text vergrößern an, um nur die Textgröße in unterstützenden Steuerelementen für alle Anwendungen und Bildschirme anzugeben (alle UWP-Text Steuerelemente unterstützen die Text Skalierung ohne Anpassung oder Vorlagen).Adjust the Make text bigger setting to specify only the size of text in supporting controls across all applications and screens (all UWP text controls support the text scaling experience without any customization or templating).

Hinweis

Mit der Einstellung alles erstellen kann ein Benutzer seine bevorzugte Größe für Text und apps im Allgemeinen nur auf dem primären Bildschirm angeben.The Make everything bigger setting lets a user specify their preferred size for text and apps in general on their primary screen only.

Verschiedene Textelemente und Steuerelemente verfügen über eine IsTextScaleFactorEnabled-Eigenschaft.Various text elements and controls have an IsTextScaleFactorEnabled property. Diese Eigenschaft weist standardmäßig den Wert true auf.This property has the value true by default. Wenn true , kann die Textgröße in diesem Element skaliert werden.When true , the size of text in that element can be scaled. Die Skalierung wirkt sich auf Text aus, der einen kleinen FontSize -Wert aufweist, als er sich auf Text auswirkt, der über eine große FontSize verfügt.The scaling affects text that has a small FontSize to a greater degree than it affects text that has a large FontSize . Sie können die automatische Größe ändern, indem Sie die Eigenschaft istextscalefactoriable eines Elements auf false festlegen.You can disable automatic resizing by setting an element's IsTextScaleFactorEnabled property to false .

Weitere Informationen finden Sie unter Text Skalierung .See Text scaling for more details.

Fügen Sie der APP das folgende Markup hinzu, und führen Sie es aus.Add the following markup to an app and run it. Passen Sie die Einstellung für die Textgröße an, und sehen Sie, was mit den einzelnen TextBlock geschieht.Adjust the Text size setting, and see what happens to each TextBlock .

XAMLXAML

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been left set to its default value of true."
    Style="{StaticResource BodyTextBlockStyle}"/>

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been set to false."
    Style="{StaticResource BodyTextBlockStyle}" IsTextScaleFactorEnabled="False"/>

Es wird nicht empfohlen, die Text Skalierung zu deaktivieren, da der Benutzeroberflächen Text in allen apps universell skaliert werden kann.We don't recommend that you disable text scaling as scaling UI text universally across all apps is an important accessibility experience for users.

Sie können auch das TextScaleFactorChanged-Ereignis und die TextScaleFactor-Eigenschaft verwenden, um Informationen zu Änderungen der Einstellung Textgröße auf dem Smartphone zu erhalten.You can also use the TextScaleFactorChanged event and the TextScaleFactor property to find out about changes to the Text size setting on the phone. So geht‘s:Here’s how:

C#C#

{
    ...
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
    ...
}

private async void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    var messageDialog = new Windows.UI.Popups.MessageDialog(string.Format("It's now {0}", sender.TextScaleFactor), "The text scale factor has changed");
    await messageDialog.ShowAsync();
}

Der Wert von textscalefactor ist ein Double im Bereich von [ 1, 2,25 ] .The value of TextScaleFactor is a double in the range [1,2.25]. Der kleinste Text wird um diesen Wert vergrößert.The smallest text is scaled up by this amount. Unter Umständen können Sie den Wert verwenden, um beispielsweise Grafiken passend zum Text zu skalieren.You might be able to use the value to, say, scale graphics to match the text. Denken Sie jedoch daran, dass nicht der gesamte Text um denselben Faktor skaliert wird.But remember that not all text is scaled by the same factor. Allgemein gilt: Je größer der Text, desto geringer sind die Auswirkungen der Skalierung.Generally speaking, the larger text is to begin with, the less it’s affected by scaling.

Diese Typen verfügen über eine IsTextScaleFactorEnabled -Eigenschaft:These types have an IsTextScaleFactorEnabled property: