Ensure Bar Graph Accessibility with Patterns, Textures, and Data Tables

[SamiyahKey]

Story

As a with visual impairments or color vision deficiencies,
I need bar graphs to include patterns or textures in addition to color,
And I need a programmatically accessible data table equivalent,
so that I can accurately interpret the data being presented without relying on color alone or visual elements.

Acceptance Criteria

• Visual Updates:

• Add patterns, textures, or other non-color indicators to the bars in the graph to differentiate data points.
• Ensure the patterns/textures are distinct and do not compromise readability in either light or dark mode.
• Include a legend that maps colors and patterns/textures to their respective data points.

• Programmatic Accessibility:

• Create a corresponding data table that presents the same information as the bar graph.
• Ensure each row and column in the table is properly labeled with descriptive headers.
• Confirm the table can be accessed and navigated by screen readers and other assistive technologies.

• Compatibility:

• Verify that both the updated bar graph and the table are functional and visually clear across various screen sizes and browsers.
• Conduct usability testing with users who have visual impairments to validate the enhancements.

Compliance:

Ensure the updates adhere to WCAG 1.4.1 Use of Color and 1.1.1 Non-Text Content.

Additional Context

• Assign appropriate ARIA roles and labels to ensure screen readers provide meaningful context for the graph.
• If feasible, consider providing users with the option to toggle between a visual and text-based representation of the data.

Issue Links

🔄 Relates to: #3146