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/
QA checks:
[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
[ ] Ensure buttons and interactive elements are properly labeled
[X] clickable images in carousel have meaningful aria label - "Select an image"
[ ] clickable images in visual toc have meaningful aria label - missing!
[ ] clickable images in other-wikis have meaningful aria label - missing!
[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
[ ] 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
[ ] The Overlay component should include the `aria-modal` attribute ([[ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-modal | link ]])
[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
[ ] Ensure that buttons that scroll elements into view have proper labels
* Question: Does this ask for the label to have a particular mention of scrolling? Or just a clear label?
[ ] Ensure that keyboard navigation is consistent -- blocked on T404155
[X] tabbing through the carousel should work as expected
[ ] tabbing through the detail view and vtoc and work as expected
[X] 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?
[ ] enter in the share dialog should copy the URL (FAILS: closes the dialog)
[ ] tabbing in the share dialog should start into the text field, continuing to tab should go to the copy button, tabbing again should get you back around to share dialog. (FAILS: closes the dialog)
[ ] esc should close the share dialog (FAILS: closes entire overlay)
[ ] enter while the download dialog is open and nothing is selected should download default resolution (FAILS: closes dialog)
[ ] tabbing in the download dialog should get you to the resolution selector (FAILS: closes entire overlay)
[ ] up/down then space/enter should select resolution (FAILS: up/down works but space/enter does nothing)
[] space/enter while the resolution is selected should download (FAILS: does nothing)
[X] enter while the download button is selected should download
[ ] esc should close the download dialog (FAILS: closes entire overlay)
[ ] Ensure the entire UI works well with assistive technology; this will require manual testing using something like JAWS or VoiceOver
[ ] test all interactions with VoiceOver on Mac/desktop Safari in mobile view
[ ] test all interactions with VoiceOver on iPhone/mobile Safari
[ ] labels and alt text should be voiced as expected
[ ] navigation should be as expected