Description
Implement a horizontally scrollable image gallery for the entry point experiment, ensuring baseline WCAG compliance.
WCAG Compliance Checklist: Horizontal Scroll Gallery
- All images have meaningful alt text or alt="" if decorative
- Fully keyboard navigable (left/right arrows, tab/shift+tab)
- Visible, high-contrast focus state on all interactive elements
- Logical DOM order for sequential screen reader navigation
-
Responsive layout: gallery reflows at 320px (no horizontal scroll for text or UI) -
All overlaid text/icons meet 4.5:1 contrast ratio against background -
Swipe gestures have keyboard-accessible alternatives - ARIA roles and labels applied to all interactive elements
Context
- Subticket of T400078: Build images entry point for experiment on Minerva — Entry point experiment kickoff.
- Depends on T402222: Image Browsing: Refine the UI design for Carousel component
Requirement
Implement a horizontally scrollable image gallery for the entry point experiment that meets baseline WCAG compliance. Accessibility must cover alt text, keyboard navigation (where applicable), focus visibility, logical DOM order, responsive layout at 320px, contrast ratios, ARIA roles/labels, and swipe gesture alternatives. The scope applies to horizontal scroll functionality on mobile, but must still account for accessible roles and labels on interactive elements. Missing alt text must be flagged, and captions or filenames may be used as fallback, translated to the page language.
BDD
Feature: Accessibility compliance for horizontal scroll image gallery
Scenario: Images in the gallery provide meaningful alternative text
Given an image is displayed in the horizontal scroll gallery
When assistive technologies query the image
Then the image must have a meaningful alt attribute or alt="" if decorative
Scenario: Interactive elements support keyboard navigation
Given a user navigates the gallery with a keyboard
When tab, shift+tab, or arrow keys are pressed
Then focus moves logically between interactive elements
And focus state is visibly indicated with high contrast
Scenario: Gallery reflows responsively at 320px width
Given the viewport is resized to 320px
When the gallery is rendered
Then the layout must reflow without introducing horizontal scroll for text or UI
Scenario: Overlay text and icons have sufficient contrast
Given overlay text or icons are displayed in the gallery
When contrast ratio is calculated against the background
Then it must be at least 4.5:1
Scenario: Swipe gestures have alternatives
Given a user navigates using swipe gestures
When the same action is attempted with a keyboard
Then an equivalent keyboard-accessible interaction must existTest Steps
Test Case 1: Verify alt text compliance for gallery images
- Load the horizontal scroll image gallery on mobile
- Inspect each image element for alt attributes or role="none"/"presentation"
- AC1: Each non-decorative image has a meaningful alt attribute
- AC2: Decorative images use alt="" or appropriate ARIA role
- AC3: Alt text is derived from caption or file name if otherwise missing, and matches page language
Test Case 2: Verify keyboard accessibility of gallery navigation
- Navigate the gallery using Tab, Shift+Tab, and arrow keys
- Observe focus and interaction
- AC4: Focus moves logically between interactive elements in DOM order
- AC5: Focus state is visible and has a high-contrast indicator
- AC6: Carousel items are implemented as focusable <button> elements with accessible labels
Test Case 3: Verify responsive layout at 320px
- Resize viewport to 320px width
- Observe gallery layout
- AC7: Gallery reflows without horizontal scroll for text or UI
Test Case 4: Verify overlay text and icons contrast ratio
- Inspect any overlaid text/icons in gallery images
- Calculate contrast ratio against background
- AC8: Contrast ratio is ≥ 4.5:1
Test Case 5: Verify swipe gesture alternatives
- Attempt to navigate the gallery using swipe gestures
- Attempt the same navigation with keyboard
- AC9: Equivalent keyboard-accessible interaction exists for swipe gesture actions
https://phabricator.wikimedia.org/T400182#11183501
QA Results - Patchdemo
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T400182#11183501 |
| 2 | ✅ | T400182#11183501 |
| 3 | ❓ | T400182#11183501 |
| 4 | ✅ | T400182#11183501 |
| 5 | ✅ | T400182#11183501 |
| 6 | ✅ | T400182#11183501 |
| 7 | ❓ | T400182#11183501 |
| 8 | ❓ | T400182#11183501 |
| 9 | ✅ | T400182#11183501 |
