Ensure the image carousel component meets accessibility standards, including screen reader support, keyboard navigation, and compliance with ARIA authoring practices for carousel widgets. The Aria Pattern Guide has an example gallery/carousel example that should be referenced here: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/

Context

During the prototype phase, an accessibility audit (T404743) identified two unresolved issues specific to the carousel. As we scale this feature to production (T410786), these need to be addressed along with any other accessibility requirements for the new carousel implementation in its production codebase.

Known issues from prototype audit

• Widget label: The prototype used "Image carousel" as the ARIA label. We should confirm the appropriate label for the production feature.
• Next/previous navigation: ARIA authoring practices for carousel widgets recommend dedicated next/previous buttons. The prototype lacked these, making it difficult to browse images via keyboard or assistive technology — swiping is not available to all users.

VoiceOver image descriptions (iOS)

A community member reported (T408831) that iOS VoiceOver's on-device ML image descriptions do not work when images are wrapped in <button> elements. The prototype used buttons for interactive carousel thumbnails (since they trigger UI state changes rather than navigation), but iOS appears to only process <img> or <a> elements for its vision-based descriptions.

The production carousel markup needs to satisfy both concerns: correct semantic role for interactive images, and compatibility with iOS VoiceOver image descriptions. This may require testing different markup approaches on-device.

See: https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Le_Bistro/28_octobre_2025#c-Handisport_marmotte-20251028031000-EBlackorby-WMF-20251027192500

Additional considerations

• Ensure carousel images have appropriate alt text
• Keyboard focusability and navigation within the carousel
• Sufficient touch target sizes for interactive elements
• Behavior when carousel is empty or has only a few images

Open questions

• Does the carousel need visible next/prev buttons, or can they be screen-reader-only? (Likely needs design input from @JScherer-WMF)
• See T408831 for a related VoiceOver issue with image markup that may also apply to carousel thumbnails

Related

• Prototype accessibility audit: T404743
• Detail view accessibility will be tracked separately