Entwickeln von barrierefreien Windows-AppsDeveloping inclusive Windows apps

In diesem Artikel wird erläutert, wie Sie barrierefreie Windows-apps entwickeln.This article discusses how to develop accessible Windows apps. Insbesondere wird vorausgesetzt, dass Sie wissen, wie Sie die logische Hierarchie für Ihre App entwerfen können.Specifically, it assumes that you understand how to design the logical hierarchy for your app. Erfahren Sie, wie Sie barrierefreie Windows-apps entwickeln, die Tastaturnavigation, Farb-und Kontrasteinstellungen sowie Unterstützung für Hilfstechnologien enthalten.Learn to develop accessible Windows apps that include keyboard navigation, color and contrast settings, and support for assistive technologies.

Wenn Sie dies noch nicht getan haben, lesen Sie zunächst den Artikel entwerfen inklusiver Software.If you have not yet done so, please start by reading Designing inclusive software.

Sie sollten drei Dinge tun, um sicherzustellen, dass Ihre App barrierefrei ist:There are three things you should do to make sure that your app is accessible:

  1. Machen Sie Ihre UI-Elemente auf programmgesteuerten Zugriff verfügbar.Expose your UI elements to programmatic access.
  2. Stellen Sie sicher, dass Ihre App die Tastaturnavigation für Personen unterstützt, die keine Maus oder keinen Touchscreen verwenden können.Ensure that your app supports keyboard navigation for people who are unable to use a mouse or touchscreen.
  3. Stellen Sie sicher, dass Ihre App barrierefreie Farbe und Kontrast-Einstellungen unterstützt.Make sure that your app supports accessible color and contrast settings.

Programmgesteuerter ZugriffProgrammatic access

Programmgesteuerter Zugriff ist wichtig für die Barrierefreiheit in Apps.Programmatic access is critical for creating accessibility in apps. Dies erfolgt durch die Festlegung des Namens (erforderlich) und der Beschreibung (optional) zur Verwendung durch Bildschirmleseprogramme für den Inhalt und die interaktiven UI-Elemente Ihrer App.This is achieved by setting the accessible name (required) and description (optional) for content and interactive UI elements in your app. Dadurch wird sichergestellt, dass die UI-Steuerelemente für unterstützende Technologie (AT) (z. B. Sprachausgabe) oder alternative Audioausgabegeräte (z. B. Braille-Anzeigen) verfügbar gemacht wird.This ensures that UI controls are exposed to assistive technology (AT) such as screen readers (for example, Narrator) or alternative output devices (such as Braille displays). Ohne den programmgesteuerten Zugriff können die APIs für Eingabehilfen Informationen nicht korrekt interpretieren. Dadurch können Benutzer Produkte nicht ausreichend verwenden oder es wird erzwungen, dass die AT undokumentierte Programmierschnittstellen oder Techniken verwenden, die nie als barrierefreie Benutzeroberfläche verwendet werden sollten.Without programmatic access, the APIs for assistive technology cannot interpret information correctly, leaving the user unable to use the products sufficiently, or forcing the AT to use undocumented programming interfaces or techniques never intended to be used as an accessibility interface. Wenn UI-Steuerelemente für Hilfstechnologien verfügbar gemacht werden, kann die AT feststellen, welche Aktionen und Optionen für den Benutzer verfügbar sind.When UI controls are exposed to assistive technology, the AT is able to determine what actions and options are available to the user.

Weitere Informationen zur Bereitstellung der UI-Elemente Ihrer App für Hilfstechnologien (AT) finden Sie unter Grundlegende Informationen zur Barrierefreiheit verfügbar machen.For more information about making your app UI elements available to assistive technologies (AT), see Expose basic accessibility information.

Navigation mithilfe der TastaturKeyboard navigation

Für Benutzer, die blind sind oder deren Beweglichkeit eingeschränkt ist, ist die Navigation auf der Benutzeroberfläche mit einer Tastatur äußerst wichtig.For users who are blind or have mobility issues, being able to navigate the UI with a keyboard is extremely important. Allerdings sollten nur UI-Steuerelemente einen Tastaturfokus erhalten, die eine Benutzerinteraktion erfordern.However, only those UI controls that require user interaction to function should be given keyboard focus. Komponenten, die keine Aktion erfordern, z. B. statische Bilder, erfordern keinen Tastaturfokus.Components that don’t require an action, such as static images, do not need keyboard focus.

Es ist wichtig, zu beachten, dass im Gegensatz zur Navigation mit einer Maus oder per Fingereingabe die Tastaturnavigation linear ist.It is important to remember that unlike navigating with a mouse or touch, keyboard navigation is linear. Bei der Tastaturnavigation sollten Sie überlegen, wie der Benutzer mit Ihrem Produkt interagiert und was die logische Navigation wird.When considering keyboard navigation, think about how your user will interact with your product and what the logical navigation will be. In westeuropäischen Kulturkreisen liest man von links nach rechts und von oben nach unten.In Western cultures, people read from left to right, top to bottom. Es ist daher üblich, dieses Muster für die Navigation per Tastatur zu verwenden.It is, therefore, common practice to follow this pattern for keyboard navigation.

Untersuchen Sie beim Entwerfen der Tastaturnavigation Ihre Benutzeroberfläche und denken Sie über diese Fragen nach:When designing keyboard navigation, examine your UI, and think about these questions:

  • Wie sind die Steuerelemente angeordnet oder in der Benutzeroberfläche gruppiert?How are the controls laid out or grouped in the UI?
  • Gibt es ein paar erhebliche Steuerelementgruppen?Are there a few significant groups of controls?
    • Falls ja, enthalten diese Gruppen eine andere Ebene von Gruppen?If yes, do those groups contain another level of groups?
  • Sollte die Navigation zwischen Peer-Steuerelementen durch die TAB-Taste oder über spezielle Navigation (z. B. Pfeiltasten) erfolgen, oder beides?Among peer controls, should navigation be done by tabbing around, or via special navigation (such as arrow keys), or both?

Dem Benutzer soll dadurch ein Verständnis darüber vermittelt werden, wie die Benutzeroberfläche angeordnet ist und wie die behandelten Steuerelemente ermittelt werden.The goal is to help the user understand how the UI is laid out and identify the controls that are actionable. Wenn Sie erkennen, dass zu viele Tabstopps vorhanden sind, bevor der Benutzer die Navigationsschleife abgeschlossen hat, können Sie in Betracht ziehen, verwandte Steuerelemente gemeinsam zu gruppieren.If you are finding that there are too many tab stops before the user completes the navigation loop, consider grouping related controls together. Einige verknüpfte Steuerelemente, z. B. ein Hybrid-Steuerelement, müssen eventuell in diesem frühen Stadium behandelt werden.Some controls that are related, such as a hybrid control, may need to be addressed at this early exploration stage. Nach begonnener Produktentwicklung ist es schwierig, die Tastaturnavigation zu überarbeiten. Planen Sie daher sorgfältig und frühzeitig!After you begin to develop your product, it is difficult to rework the keyboard navigation, so plan carefully and plan early!

Weitere Informationen zur Navigation zwischen Benutzeroberflächenelementen mithilfe der Tastatur finden Sie unter Tastaturzugriff.To learn more about keyboard navigation among UI elements, see Keyboard accessibility.

Darüber hinaus enthält das E-Book Engineering-Software für Eingabehilfen ein hervorragendes Kapitel zu diesem Thema mit dem Titel Designing the Logical Hierarchy (Entwerfen der logischen Hierarchie).Also, the Engineering Software for Accessibility eBook has an excellent chapter on this subject titled Designing the Logical Hierarchy.

Farbe und KontrastColor and contrast

Eine integrierte Eingabehilfe in Windows ist der Modus mit hohem Kontrast, der den Farbkontrast von Texten und Bildern auf dem Bildschirm erhöht.One of the built-in accessibility features in Windows is the High Contrast mode, which heightens the color contrast of text and images on the computer screen. Bei manchen Personen führt ein erhöhter Farbkontrast zu einer Reduzierung der Belastung für die Augen und einer besseren Lesbarkeit.For some people, increasing the contrast in colors reduces eyestrain and makes it easier to read. Wenn Sie Ihre Benutzeroberfläche mit hohem Kontrast überprüfen, dann stellen Sie sicher, dass die Steuerelemente konsistent und mit Systemfarben (nicht mit hartcodierten Farben) codiert wurden, um zu gewährleisten, dass alle Steuerelemente auf dem Bildschirm angezeigt werden, die ein Benutzer sehen würde, der den hohen Kontrast nicht verwendet.When you verify your UI in high contrast, you want to check that controls have been coded consistently and with system colors (not with hard-coded colors) to ensure that they will be able to see all the controls on the screen that a user not using high contrast would see.

XAMLXAML

<Button Background="{ThemeResource ButtonBackgroundThemeBrush}">OK</Button>

Weitere Informationen zur Verwendung von Systemfarben und Ressourcen finden Sie unter XAML-Designressourcen.For more information about using system colors and resources, see XAML theme resources.

Sofern Sie Systemfarben nicht außer Kraft gesetzt haben, unterstützt eine UWP-App Designs mit hohem Kontrast standardmäßig.As long as you haven’t overridden system colors, a UWP app supports high-contrast themes by default. Wenn sich ein Benutzer für die Verwendung eines Designs mit hohem Kontrast aus den Systemeinstellungen oder Tools für die Barrierefreiheit entscheidet, werden vom Framework automatisch Farben und Stileinstellungen verwendet, mit denen für Steuerelemente und Komponenten auf der Benutzeroberfläche ein Layout und Rendering mit hohem Kontrast entsteht.If a user has chosen that they want the system to use a high-contrast theme from system settings or accessibility tools, the framework automatically uses colors and style settings that produce a high-contrast layout and rendering for controls and components in the UI.

Weitere Informationen finden Sie unter Designs mit hohem Kontrast.For more information, see High-contrast themes.

Beachten Sie diese Richtlinien, wenn Sie sich entschieden haben, Ihr eigenes Farbdesign anstelle von Systemfarben zu verwenden:If you have decided to use you own color theme instead of system colors, consider these guidelines:

Farbkontrastverhältnis – Der aktualisierte Abschnitt 508 des Gesetzes für Amerikaner mit Behinderung (Americans with Disability Act) sowie andere Rechtsvorschriften erfordern, dass der standardmäßige Farbkontrast zwischen Text und Hintergrund das Verhältnis 5:1 aufweisen muss.Color contrast ratio – The updated Section 508 of the Americans with Disability Act, as well as other legislation, requires that the default color contrasts between text and its background must be 5:1. Für großen Text (Schriftgröße 18 oder 14 fett markiert) beträgt das erforderliche Kontrastverhältnis 3:1.For large text (18-point font sizes, or 14 points and bolded), the required default contrast is 3:1.

Farbkombinationen – Etwa 7 Prozent des Männer (und weniger als 1 Prozent der Frauen) weisen ein Farbdefizit auf.Color combinations – About 7 percent of males (and less than 1 percent of females) have some form of color deficiency. Benutzer mit Farbenblindheit haben Probleme bei der Unterscheidung zwischen bestimmten Farben. Es ist daher wichtig, dass niemals nur Farben verwendet werden, um Status oder Bedeutung in einer Anwendung zu vermitteln.Users with colorblindness have problems distinguishing between certain colors, so it is important that color alone is never used to convey status or meaning in an application. Für dekorative Bilder (wie Symbole oder Hintergründe) sollten Farbkombinationen so gewählt werden, dass die Wahrnehmung des Bilds durch den farbenblinden Benutzer maximiert wird.As for decorative images (such as icons or backgrounds), color combinations should be chosen in a manner that maximizes the perception of the image by colorblind users.

Prüfliste für die BarrierefreiheitAccessibility checklist

Es folgt nun eine gekürzte Version der Prüfliste für die Barrierefreiheit:Following is an abbreviated version of the accessibility checklist:

  1. Legen Sie den Namen (erforderlich) und die Beschreibung (optional) zur Verwendung durch Bildschirmleseprogramme für den Inhalt und die interaktiven UI-Elemente Ihrer App fest.Set the accessible name (required) and description (optional) for content and interactive UI elements in your app.
  2. Implementieren Sie Barrierefreiheit für den Tastaturzugriff.Implement keyboard accessibility.
  3. Schauen Sie sich die Benutzeroberfläche an, um sicherzustellen, dass der Textkontrast ausreicht, Elemente in Designs mit hohem Kontrast richtig dargestellt werden und Farben korrekt verwendet werden.Visually verify your UI to ensure that the text contrast is adequate, elements render correctly in the high-contrast themes, and colors are used correctly.
  4. Führen Sie Tools zum Testen der Barrierefreiheit aus. Behandeln Sie gemeldete Probleme und überprüfen Sie die Qualität der Sprachausgabe.Run accessibility tools, address reported issues, and verify the screen reading experience. (Mehr über Testen der Barrierefreiheit erfahren)(See Accessibility testing topic.)
  5. Stellen Sie sicher, dass die Einstellungen für das App-Manifest den Richtlinien für Barrierefreiheit entsprechen.Make sure your app manifest settings follow accessibility guidelines.
  6. Deklarieren Sie Ihre APP im Microsoft Store als verfügbar.Declare your app as accessible in the Microsoft Store. (Siehe das Thema Eingabehilfen im Store)(See the Accessibility in the store topic.)

Weitere Details finden Sie im vollständigen Thema Prüfliste für die Barrierefreiheit.For more detail, please see the full Accessibility checklist topic.