Adding a11y support in UWP JavaScript/React based app

Question

Adding a11y support in UWP JavaScript/React based app

Jordan Montpetit 0

Hi

I am looking to add support for a11y/TTS in a UWP JS/React based app. I wanted to confirm whether the correct method for integrate with the screen reader would be adding aria attributes to the relevant components. If not what would be the preferred method?

Note: This is for an Xbox app but I haven't been able to locate the proper Xbox UWP developer forum but I'm hoping that this question would apply to any UWP JS app.

Thanks

2 answers

Your answer

Answer 1

To add accessibility (a11y) support in a UWP JavaScript/React-based app, using aria attributes is indeed a recommended approach. These attributes help improve the interaction of your app with assistive technologies such as screen readers. By providing additional context about the UI elements, you can enhance the experience for users who rely on these technologies.

In addition to aria attributes, you should ensure that your app supports keyboard interactions and follows best practices for accessibility. This includes providing support for screen readers and allowing user customization for display settings. UWP apps typically have built-in support for accessibility through the Microsoft UI Automation framework, which can be leveraged to ensure your app is accessible.

For Xbox apps specifically, while the general principles of accessibility apply, you may want to explore additional resources or libraries that cater specifically to Xbox development to ensure a seamless experience across devices.

References:

Answer 2

Harry Vo (WICLOUD CORPORATION) 4,665 Microsoft External Staff Moderator

Hi @Jordan Montpetit

For UWP apps built with JavaScript and React, accessibility works the same way as on the web.

Screen readers like Narrator read accessibility information that comes from HTML semantics and ARIA attributes in the page. Because of this, using proper HTML elements and adding ARIA attributes where needed is the correct and supported way to add screen reader and TTS support in a UWP JS app.

There is no special UWP or Xbox-only API for accessibility in JavaScript apps (unlike XAML apps, which use AutomationProperties). This approach also applies to Xbox UWP apps.

For Xbox, you should also pay attention to focus handling and controller navigation, since Narrator relies on those to move between UI elements.
If you have other questions, or find my answer's useful, please let me know. Thanks!

Jordan Montpetit 0 Reputation points

2026-01-15T15:04:43.51+00:00

Hi Harry,

Thanks so much for clarifying.

As a followup, I was also wondering if there was an API available that exposes whether the Xbox system screen reader is enabled or disabled so we could do some potential custom handling around TTS?
Harry Vo (WICLOUD CORPORATION) 4,665 Reputation points Microsoft External Staff Moderator

2026-01-16T07:16:26.7966667+00:00

Hi @Jordan Montpetit ,

There is currently no public UWP or JavaScript API that allows an app to directly check whether Narrator is enabled or disabled on Xbox (or Windows).

The recommended approach is to always provide accessibility information (semantic HTML, ARIA, proper focus behavior) and allow the system screen reader to handle TTS when it is enabled. Apps should avoid branching logic based on screen reader state and instead ensure that the UI is usable and understandable in all cases.

If you need app-specific audio feedback, it should be implemented independently of Narrator and designed so it does not conflict with system TTS when Narrator is active.

Share via

Adding a11y support in UWP JavaScript/React based app

2 answers

Your answer