☂️ Improve Accessibility Features

[giolaq]

Improve Accessibility Features

Description

We need to enhance the accessibility features of our React Native Multi-TV App to ensure it's usable by people with various disabilities. This will involve adding proper aria labels, ensuring correct tab order, and implementing high-contrast mode.

Tasks

• Add appropriate labels to all interactive elements . Assigned to @Neha
• Implement a high-contrast mode theme. Assigned to @Neha
• Ensure proper focus management and tab order across all platforms
• Test the app with screen readers on different platforms (Android TV, Fire TV, tvOS, Web) @Neha
• Document accessibility features and usage in the README

Expected Outcome

The app should be fully navigable and usable with a screen reader and keyboard/remote control only. All important elements should have clear, descriptive labels.

Resources

• React Native Accessibility
• WCAG Guidelines

[Neha]

Hello @giolaq , I would like to pick the following tasks:

1. Add appropriate labels to all interactive elements
2. Implement a high-contrast mode theme
3. Document accessibility features and usage in the README : I will update for theme

thanks

[giolaq]

Great!

[Neha]

@giolaq for high-contrast mode theme would there be a UI element to switch between light and dark or it would be based on the device settings?

What is expectation for Document accessibility features and usage? Is it document like :

1. Screen reader support, and how to enable?
2. Themes, etc.

[giolaq]

IMHO the simplest way is to add a "Settings" screen accessible from the left side drawer where the user can access these features and enable/disable. Best option will be associate these to the device settings, but this it's much more complex as different TV OSs will have different way to enable it.

For the documentation, you can add an ACCESSIBILITY.md and link it to the README, what do you think?

[Neha]

I will add the "change theme" in settings.

Any reason for creating ACCESSIBILITY.md? Can't we reuse README?

We can add a section ACCESSIBILITY section and add all accessibility information under that.

[giolaq]

Ok, if it becomes too big we can move it to another file

[Neha]

While working on this issue, I found that the d-pad is not working on Android emulator (the config I am using). I will investigate it more with this issue. I have did a test on Web and app is working fine.

@giolaq you can assign me this too (as I am already testing all 2-3 platforms) "Test the app with screen readers on different platforms (Android TV, Fire TV, tvOS, Web)"

[giolaq]

Hi @Neha any updates on these tasks? Hacktoberfest is finishing on 31st, maybe we can release some task for other people to pickup

[Neha]

update: created the issue: #25

Hey @giolaq , I am not able to run the app's navigation on android emulator. I will work on this issue. Meanwhile, if someone wants to pick it up, you can can remove the task from my name

[Neha]

@giolaq for theme switcher, what is your thought on adding the theme switcher in the left navigation? The reason is to have the theme switcher in just one click away. It is a good UX experience.

[giolaq]

Usually the TV apps have only options related to content, profile or navigation in the main screen. While the theme switcher is a good UX in the front page of a website, for TV apps such a switcher will add more noise to to UI.
Best option is to automatically get the theme setting value from the OS ( when is possibile ) and provide a switcher in the Settings menu or screen.

[Neha]

@giolaq , My suggestion is to break the tasks into separate issues.

These could be separate issues:

1. Implement a high-contrast mode theme
2. Ensure proper focus management and tab order across all platforms
3. Add appropriate labels to all interactive elements

Document accessibility features and usage in the README (this should be the subtask of all the above issues).

What is the end goal of this task? Test the app with screen readers on different platforms (Android TV, Fire TV, tvOS, Web)

lmk wyt

[giolaq]

That's why it's an Umbrella Issue with task associated and you have 3 assigned.
You can create the PR related to a task and when is merged we link it to that.

"Test the app with screen readers on different platforms (Android TV, Fire TV, tvOS, Web)" This is about testing the screen readers on the majority of tv OSs out there, making sure we can support them or open other activities to support them