Change Details

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: [X] 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) [X] carousel images must have alt text [X] detail image must have alt text [X] visual toc images must have alt text [X] other-wikis images must have alt text [X] Ensure buttons and interactive elements are properly labeled [X] clickable images in carousel must be clickable under VoiceOver - FIXED [X] clickable images in carousel have meaningful aria label - "Select an image" - FIXED [X] clickable images in visual toc have meaningful aria label - missing! - FIXED [X] clickable images in other-wikis have meaningful aria label - missing! - FIXED [X] icon on detail view placeholder must have meaningful alt text or label - "Loading" on the covering placeholder div [X] overlay and detail view icons must have meaningful alt text or labels - "Close", "Toggle full, uncropped, image", "Share", "View on Commons", "Download" [X] widgets and icons in "share" mini-dialog should be clear [X] widgets and icons in "download" mini-dialog should be clear [X] announceable region on the image carousel - FIXED [X] announceable region on the overlay - FIXED [X] Ensure elements have appropriate ARIA attributes. We should pay special attention to the following: [X] The DetailView component should be treated as an `aria-live` region since the content here can dynamically update ([[ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions | link ]]) * done in patch. includes aria-select on the active carousel image button, like recommended for a tab bar [X] The Overlay component should include the `aria-modal` attribute ([[ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-modal | link ]]) - FIXED [X] Check visual contrast in things like the overlay component backdrop and text which appears above the color background in the DetailViewCaption component [X] Ensure the UI works properly in dark mode [X] background of carousel should be dark in dark mode [X] background of overlay scroll view should be dark in dark mode [X] icons on overlay/detail view should use dark mode theme in dark mode [X] text caption in detail view should remain dark or light based on the background color calculation, and should *not* change with dark/light mode [X] other text on standard backgrounds should use the appropriate text color [X] Ensure that buttons that scroll elements into view have proper labels [ ] Ensure that keyboard navigation is consistent [X] tabbing through the carousel should work as expected [X] tabbing through the detail view and vtoc and work as expected - FIXED [X] esc should close the overlay when overlay is open and current context [X] closing the overlay should put the focus back on the image that most recently selected in the carousel? (also mentioned in {T404155}) - FIXED [X] 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 [X] accessibility select, space, or enter while the resolution picker is focused should open it [X] 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? [X] enter while the download button is selected should download [X] 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 [X] test all interactions with keyboard on Chrome in dev tools testing - FIXED except for the broken form fields [X] 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

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: [X] 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) [X] carousel images must have alt text [X] detail image must have alt text [X] visual toc images must have alt text [X] other-wikis images must have alt text [X] Ensure buttons and interactive elements are properly labeled [X] clickable images in carousel must be clickable under VoiceOver - FIXED [X] clickable images in carousel have meaningful aria label - "Select an image" - FIXED [X] clickable images in visual toc have meaningful aria label - missing! - FIXED [X] clickable images in other-wikis have meaningful aria label - missing! - FIXED [X] icon on detail view placeholder must have meaningful alt text or label - "Loading" on the covering placeholder div [X] overlay and detail view icons must have meaningful alt text or labels - "Close", "Toggle full, uncropped, image", "Share", "View on Commons", "Download" [X] widgets and icons in "share" mini-dialog should be clear [X] widgets and icons in "download" mini-dialog should be clear [X] announceable region on the image carousel - FIXED [X] announceable region on the overlay - FIXED [X] Ensure elements have appropriate ARIA attributes. We should pay special attention to the following: [X] The DetailView component should be treated as an `aria-live` region since the content here can dynamically update ([[ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions | link ]]) * done in patch. includes aria-select on the active carousel image button, like recommended for a tab bar [X] The Overlay component should include the `aria-modal` attribute ([[ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-modal | link ]]) - FIXED [X] Check visual contrast in things like the overlay component backdrop and text which appears above the color background in the DetailViewCaption component [X] Ensure the UI works properly in dark mode [X] background of carousel should be dark in dark mode [X] background of overlay scroll view should be dark in dark mode [X] icons on overlay/detail view should use dark mode theme in dark mode [X] text caption in detail view should remain dark or light based on the background color calculation, and should *not* change with dark/light mode [X] other text on standard backgrounds should use the appropriate text color [X] Ensure that buttons that scroll elements into view have proper labels [ ] Ensure that keyboard navigation is consistent [X] tabbing through the carousel should work as expected [X] tabbing through the detail view and vtoc and work as expected - FIXED [X] esc should close the overlay when overlay is open and current context [X] closing the overlay should put the focus back on the image that most recently selected in the carousel? (also mentioned in {T404155}) - FIXED [X] 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 [X] accessibility select, space, or enter while the resolution picker is focused should open it [X] 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? [X] enter while the download button is selected should download [X] 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 [X] test all interactions with keyboard on Chrome in dev tools testing - FIXED except for the broken form fields [X] 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 | **AC** | **Status** | **Details** | | ----- | ----- | ----- | | 1 - 18 | ✅ | T404743#11305132 | | 19 | ⬜ | T404743#11305132 | | 20-23 | ✅ | T404743#11305132 |

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: [X] 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) [X] carousel images must have alt text [X] detail image must have alt text [X] visual toc images must have alt text [X] other-wikis images must have alt text [X] Ensure buttons and interactive elements are properly labeled [X] clickable images in carousel must be clickable under VoiceOver - FIXED [X] clickable images in carousel have meaningful aria label - "Select an image" - FIXED [X] clickable images in visual toc have meaningful aria label - missing! - FIXED [X] clickable images in other-wikis have meaningful aria label - missing! - FIXED [X] icon on detail view placeholder must have meaningful alt text or label - "Loading" on the covering placeholder div [X] overlay and detail view icons must have meaningful alt text or labels - "Close", "Toggle full, uncropped, image", "Share", "View on Commons", "Download" [X] widgets and icons in "share" mini-dialog should be clear [X] widgets and icons in "download" mini-dialog should be clear [X] announceable region on the image carousel - FIXED [X] announceable region on the overlay - FIXED [X] Ensure elements have appropriate ARIA attributes. We should pay special attention to the following: [X] The DetailView component should be treated as an `aria-live` region since the content here can dynamically update ([[ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions | link ]]) * done in patch. includes aria-select on the active carousel image button, like recommended for a tab bar [X] The Overlay component should include the `aria-modal` attribute ([[ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-modal | link ]]) - FIXED [X] Check visual contrast in things like the overlay component backdrop and text which appears above the color background in the DetailViewCaption component [X] Ensure the UI works properly in dark mode [X] background of carousel should be dark in dark mode [X] background of overlay scroll view should be dark in dark mode [X] icons on overlay/detail view should use dark mode theme in dark mode [X] text caption in detail view should remain dark or light based on the background color calculation, and should *not* change with dark/light mode [X] other text on standard backgrounds should use the appropriate text color [X] Ensure that buttons that scroll elements into view have proper labels [ ] Ensure that keyboard navigation is consistent [X] tabbing through the carousel should work as expected [X] tabbing through the detail view and vtoc and work as expected - FIXED [X] esc should close the overlay when overlay is open and current context [X] closing the overlay should put the focus back on the image that most recently selected in the carousel? (also mentioned in {T404155}) - FIXED [X] 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 [X] accessibility select, space, or enter while the resolution picker is focused should open it [X] 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? [X] enter while the download button is selected should download [X] 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 [X] test all interactions with keyboard on Chrome in dev tools testing - FIXED except for the broken form fields [X] 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 | **AC** | **Status** | **Details** | | ----- | ----- | ----- | | 1 - 18 | ✅ | T404743#11305132 | | 19 | ⬜ | T404743#11305132 | | 20-23 | ✅ | T404743#11305132 |