Accessibility stress test of Image Component Example Page on Fabric

[chiaramooney]

Test Accessibility compliance on the Image component page within the Fabric version of Gallery. We will run Fast Pass on the example page. Once Fast Pass runs without issues, then we will execute the steps in the Follow-up Testing Plan section.

Results of Fast Pass Run

In this table we should add the information dumped by the Fast Pass run in Accessibility Insights for the Image Example page. We should log all issues found here along with the accessibility issue in react-native-windows which will resolve the error once implemented.

Note: all react-native-windows accessibility issues tagged here should be labelled with "Needed for Accessibility Grading", once they are added to the table.

Issue Flagged by Fast Pass	Tracking API Parity Issue

Follow-up Testing Plan

The below testing plan is used for testing accessibility compliance of the Gallery app on paper, and will be used to test the current state of the Fabric Gallery app:

1. Keyboard Navigation
- Tab or use arrow keys to move through elements
- Pretend you're in a coding interview - tell the reviewer what keys you're hitting as you press them
- Does this navigation make sense?
- Can you access all of the elements?
2. Narrator: Turn on Narrator (Win + Ctrl + Enter), set default verbosity levels (Settings > Accessibility > Narrator >Verbosity Level = "3 - All control details", Context level for buttons and controls = "2 - Immediate context")
- Share your computer sound on the teams call (Find the presentation banner at the top of your screen & click the button that has the screen and sound icon)
- Use tab and arrows to navigate through the page
- Pretend you're in a coding interview - tell the reviewer what keys you're hitting as you press them
- Listen to what narrator speaks
- Does it make sense?
- Any weirdness or differences between the visible text and text spoken?
- To stop Narrator speaking, press Ctrl, to turn off narrator, press Win + Ctrl + Enter.
3. Turn on dark mode: Personalization-> Colors, Choose a Color -> Dark
- Does this page still look alright in dark mode?
4. Turn on Contrast Themes: Accessibility -> Contrast Themes > Choose Aquatic (similar to High Contrast Black) theme or Desert (similar to High Contrast White) theme
- Does the page look good?
- Is it hard to read any of the text (because the color contrast isn't good)?
- Is there sufficient contrast between elements (i.e. are there any elements that are black on black, similar color on similar color)?
- Choose black theme or white theme (whichever one you haven't shown before)
5. Resize the window to the smallest width (can be as tall as the screen, just width matters here)
- Is text flowing \ wrapping?
- Is any text cut off?
6. Turn on text scaling: Accessibility > Text size> Make text bigger, slide the slider all the way to the right (225x)
- Can you read all of the text?
- Text should wrap and not be cut off (vertically and horizontally)
7. Turn on Voice Access: Accessibility > Speech > Voice Access
- Can you use Voice Access to interact with your feature?
- Can you use Voice Access Numbers overlay to interact with your feature?

Follow-Up Plan Step	Result	Tracking Issue (if needed)
Keyboard Navigation	Cannot tab onto example Image components by default - matches behaviour on Paper Gallery.
Narrator	When first turning Narrator on, blue box appears around the component that has keyboard focus, and Narrator provides correct audio information. However, when trying to tab through page, blue box does not follow keyboard focus, and no audio is provided.
Dark Mode	There is no visual change to the app when dark mode is enabled
Contrast Themes	The example page does change visually when the 'Aquatic' high contrast theme is enabled. Most of the background of the page becomes too dark to be clear and easily readable - the color of the page goes from white to very dark grey
Resize window to smallest width	The text and example buttons wraps themselves to match the width of the window without being cut-off
Turn on text scaling	Text size does not change to match the change of the scaling value
Turn on Voice Access	Voice access works on the example page. Am able to scroll through the example page, and the software is able to identify the available buttons on the page when prompted to, and then click on whichever button it is asked to.