Accessibility Enhancements for Carousel Component

[mattiamazzari]

Title

Add keyboard shortcuts and improve screen reader compatibility for Carousel component

Description

We need to implement several accessibility improvements to the Amazon Connect Carousel component to ensure better usability for all customers, especially those using assistive technologies:

• Keyboard Shortcuts: Implement keyboard shortcuts to execute actions on behalf of the customer without requiring mouse input.
• Alternative Text for Carousel Items: The Carousel should pass an additional field containing a text excerpt or alternative response to the full FAQ text.
• Screen Reader Reading Order: Ensure proper reading order for screen readers when navigating through carousel cards, including announcing the current card number (e.g., "1 of 5").

Current Behavior

Currently, the carousel component lacks proper keyboard navigation and screen reader support. Users relying on assistive technologies have difficulty navigating between cards and understanding the context of each card.

Expected Behavior

After implementing these changes:

Users should be able to navigate the carousel using keyboard shortcuts (e.g., arrow keys for next/previous, Enter to select)
Each carousel item should provide an alternative text field that screen readers can announce
Screen readers should announce cards in sequence with position information (e.g., "Card 1 of 5: [Title], [Text excerpt], [Action button]")

Technical Implementation Notes

For the keyboard shortcuts:

Add event listeners for key presses (arrow keys, Enter, possibly number keys for direct access)
Ensure focus state is clearly visible
Add proper focus trapping within the carousel component

For alternative text and reading order:

• Modify carousel data structure to include altText or excerpt field
• Set proper ARIA attributes (aria-label, aria-current, etc.)
• Ensure DOM structure follows a logical reading order

Related Resources

WCAG 2.1 Success Criterion 2.1.1 - Keyboard
WCAG 2.1 Success Criterion 1.3.2 - Meaningful Sequence

Additional Context

These changes are critical for compliance with accessibility standards and to improve the experience for all users.

[spenlep-amzn]

Hi @mattiamazzari ,

As mentioned in the README, we aim for WCAG 2.1 AA compliance, but we don't guarantee it for this repository. There is definitely room for improvement, especially for Interactive Messages. I've gone ahead and created an internal backlog task so our team can track this improvement.

I'm assuming you're requesting changes to Carousel.jsx (Documentation: Carousel Template Interactive Message)

Going to keep this issue open and triage with team. If we have bandwidth we'll try to raise a PR, but it will be in backlog for now.

Thanks,
-Spencer

Questions

Just for additional context, could you clarify which chat UI you were testing the screen readers on?

Did you initially test this on the pre-built Hosted Widget, or everything was directly from this GitHub ChatInterface? They should be very similar, but the GitHub one could be missing some minor changes. Overall, it's looks like this applies to both as screen reader is difficult to use with Carousel.

Reference

chat-interface-carousel-accessibility-recording.mov