Some initial accessibility review of the Carousel component was performed in T400182. That work dealt mostly with alt text for images and keyboard navigation support.

As we approach the A/B test of this feature, we should perform a more in-depth accessibility review for the entire Image Browsing feature. This audit should include checking for the things listed at bottom:

More requirements may need to be added here as we discover them.

In general, any custom UI components we have introduced should follow the ARIA patterns guidelines as closely as possible:

https://www.w3.org/WAI/ARIA/apg/patterns/

Test steps:

• Ensure all images throughout the UI include whatever meaningful alt text we can procure (we cannot add alt text which is not present in the source Wiki article, but whatever does exist we should make use of)
  • carousel images must have alt text
  • detail image must have alt text
  • visual toc images must have alt text
  • other-wikis images must have alt text
• Ensure buttons and interactive elements are properly labeled
  • clickable images in carousel must be clickable under VoiceOver - FIXED
  • clickable images in carousel have meaningful aria label - "Select an image" - FIXED
  • clickable images in visual toc have meaningful aria label - missing! - FIXED
  • clickable images in other-wikis have meaningful aria label - missing! - FIXED
  • icon on detail view placeholder must have meaningful alt text or label - "Loading" on the covering placeholder div
  • overlay and detail view icons must have meaningful alt text or labels - "Close", "Toggle full, uncropped, image", "Share", "View on Commons", "Download"
  • widgets and icons in "share" mini-dialog should be clear
  • widgets and icons in "download" mini-dialog should be clear
  • announceable region on the image carousel - FIXED
  • announceable region on the overlay - FIXED
• Ensure elements have appropriate ARIA attributes. We should pay special attention to the following:
  • The DetailView component should be treated as an aria-live region since the content here can dynamically update (link)
    • done in patch. includes aria-select on the active carousel image button, like recommended for a tab bar
  • The Overlay component should include the aria-modal attribute (link) - FIXED
  • Check visual contrast in things like the overlay component backdrop and text which appears above the color background in the DetailViewCaption component
  • Ensure the UI works properly in dark mode
    • background of carousel should be dark in dark mode
    • background of overlay scroll view should be dark in dark mode
    • icons on overlay/detail view should use dark mode theme in dark mode
    • text caption in detail view should remain dark or light based on the background color calculation, and should *not* change with dark/light mode
    • other text on standard backgrounds should use the appropriate text color
  • Ensure that buttons that scroll elements into view have proper labels
• Ensure that keyboard navigation is consistent
  • tabbing through the carousel should work as expected
  • tabbing through the detail view and vtoc and work as expected - FIXED
  • esc should close the overlay when overlay is open and current context
  • closing the overlay should put the focus back on the image that most recently selected in the carousel? (also mentioned in T404155: Improve keyboard navigation) - FIXED
  • opening the share popover then tabbing/swiping fwd should select the text field, continuing to tab should go to the copy button, tabbing again should close the popover - FIXED
  • accessibility select, space or enter in the share popover's copy button should copy the URL - FAILS (does nothing, as does clicking in it!) - this doesn't seem to be an accessibility bug but just needs fixing
  • accessibility select, space, or enter while the resolution picker is focused should open it
  • tabbing in the download popover should get you to the resolution selector - FIXED
  • up/down then accessibility select/space/enter should select resolution (FAILS: up/down works but space/enter does nothing) -- this is not an accessibility bug, there's a problem with the controls! this is giving me a vue warning about read-only properties?
  • enter while the download button is selected should download
  • switching images with the overlay open should set focus so you can reach the controls - FAILS leaves focus on the button - FIXED setting focus manually for this case
• Ensure the entire UI works well with assistive technology; this will require manual testing using something like JAWS or VoiceOver
  • test all interactions with keyboard on Chrome in dev tools testing - FIXED except for the broken form fields
  • test all interactions with VoiceOver on Mac/desktop Safari in mobile view - FIXED except for the broken form fields
  • test all interactions with VoiceOver on iPhone/mobile Safari

Requirement

Conduct a full accessibility audit of the Image Browsing feature, validating compliance with WCAG 2.1 AA standards and ARIA Authoring Practices. The audit must confirm correct alt text usage, proper labeling and roles, color contrast and dark mode behavior, consistent keyboard navigation, and assistive technology compatibility. All custom UI components (carousel, overlay, popovers, download/share widgets, and visual TOC) must meet accessibility expectations for both desktop and mobile environments.

BDD

Feature: Full accessibility compliance for Image Browsing feature

  Scenario: Verify Image Browsing components meet accessibility guidelines
    Given the Image Browsing feature is enabled on beta
    When a user navigates using assistive technologies or keyboard
    Then all images and interactive elements must have meaningful labels
    And contrast, ARIA roles, and keyboard focus must comply with WCAG and WAI-ARIA guidelines
    And the UI must function correctly in both light and dark modes across desktop and mobile

Test Steps

Test Case 1: Ensure all images include meaningful alt text

1. Inspect all image contexts (carousel, detail view, visual TOC, and other-wikis)
2. AC1: Carousel images have meaningful alt text from source or alt="" if decorative
3. AC2: Detail image includes appropriate alt text
4. AC3: Visual TOC images have descriptive alt text
5. AC4: Other-wikis images have descriptive alt text
6. AC5: Placeholder and icon-only elements in DetailView have meaningful aria-label (e.g., “Loading”, “Close”, “Toggle full image”, “Share”, “View on Commons”, “Download”)

Test Case 2: Ensure buttons and interactive elements are properly labeled

7. Inspect all clickable images and buttons
8. AC6: Clickable carousel images have aria-label="Select an image"
9. AC7: Clickable images in visual TOC and other-wikis have descriptive ARIA labels
10. AC8: Overlay and mini-dialog widgets (share/download) have labeled buttons and controls
11. AC9: Popover buttons include accessible name and role attributes (copy/download actions operable via keyboard)

Test Case 3: Ensure visual contrast and dark mode behavior

12. Test all visual contexts in both light and dark mode
13. AC10: Overlay backdrops and text meet 4.5:1 contrast ratio
14. AC11: Carousel and overlay backgrounds adapt to dark mode (darkened background, themed icons)
15. AC12: Text captions remain legible (contrast calculated dynamically, not inverted incorrectly)
16. AC13: All text on standard backgrounds uses correct theme color tokens

Test Case 4: Ensure keyboard navigation and focus behavior

17. Navigate through the feature using Tab, Shift+Tab, Arrow keys, Enter, and Escape
18. AC14: Tabbing through carousel, detail view, and visual TOC works sequentially
19. AC15: Escape closes the overlay and restores focus to last selected carousel image
20. AC16: Tab navigation in share popover cycles between text field → copy button → closes popover
21. AC17: Resolution picker in download popover is focusable and operable via up/down + Enter/Space
22. AC18: Focus correctly shifts when switching images inside overlay

Test Case 5: Ensure compatibility with assistive technologies

23. Test the full feature using VoiceOver (macOS/iOS) and keyboard-only navigation
24. AC19: All dynamic content updates announced via aria-live or equivalent region
25. AC20: Overlay includes aria-modal="true" attribute
26. AC21: Keyboard interaction fully supported in Chrome DevTools accessibility mode
27. AC22: VoiceOver correctly reads all focusable elements and form controls on desktop and mobile Safari
28. AC23: No blocking or silent failures when using assistive technology to interact with image controls

QA Results - Beta