Change #1290786 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/extensions/MultimediaViewer@master] Image Browsing: add URL param to enable carousel for testing

https://gerrit.wikimedia.org/r/1290786

[WIP] Notes

• Regarding issues with prototype wrapping images in <button> tags, the scaled version wraps the images in anchor tags (<a>). To ensure the images inside an anchor tag are accessible, the links must have an accessible name so screen readers know their destination. The image's alt text acts as an accessible name for the link surrounding it. Reference: https://www.w3.org/WAI/WCAG22/Techniques/html/H30
  • Current code: carousel is an unordered list, and each carousel item is a list item with a link wrapping an image element.
  • For images with alt text, the screen reader announces: "link, image, [alt text]".
  • For images without alt text, the screen reader announces: "link, "File:[Filename]".
  • Consider adding an aria-label to the anchor tag for images without alt text. The screen reader announces: "link, [label/descriptive text]". This approach allows us to strip file extensions and underscores from the file name.
  • Ensure proper semantics and label for carousel and consider landmark roles https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/

Lighthouse audit

Note: Chrome DevTools provides the auditing tool. The scores are out of 100, and we aim for 90 or better.

Baseline audit report: 89 Accessibility / 54 Best Practices
Issue: Links do not have a discernible name

• Addressed the issue by providing accessible names to the links/anchor tags.
• Ran the audit again and confirmed improvements in scores: 93 Accessibility / 73 Best Practices
• Remaining issues are outside of the scope of the carousel, for example, 1) Minerva's menu bar (Form elements do not have associated labels) and 2) blue links in the article (Links rely on color to be distinguishable).

Keyboard navigation

Navigation between carousel items using Tab/Shift+Tab.

Carousel widget naming

Considering that our carousel uses native scroll, not the ARIA carousel pattern. The carousel name could be misleading to screen readers, as it could set incorrect interaction expectations, such as arrow-key navigation between slides. The name is pending/to be determined.

Screen reader

Desktop (macOS)

• Testing on macOS with VoiceOver based on patchset 1:
  
  
  

Mobile (iOS)

Test on mobile device via patchdemo with URL params to enable the carousel. Example: https://fafde56dd0.catalyst.wmcloud.org/wiki/Mona_lisa?useformat=mobile&mobileCarousel=1

• Navigation to next/previous carousel image via swipe with VoiceOver.
• The carousel label, "Images in [article name]", is announced.
• The images are announced as link images ("Link, image") when alt text is present.
• The active list item number of total items is announced when the link has an accessible label.
• Next step: Explore adding an accessible label to the links unconditionally.

Mona Lisa article with screen reader caption:
[video too large to upload]

my ideal proposal for the widget label would be:  "list: Images in [article name], XX items"

• if article name adds nontrivial work, we can just say "article"
• if number of images adds nontrivial work, then skip altogether

@JScherer-WMF feel free to adjust too

with respect to:

Ensure carousel images have appropriate alt text

scope for launch should be just testing that carousel images inherit existing alt text. if editors haven't added alt text for an image currently showing in the article, the image can also show in the carousel still.

and with respect to:

Does the carousel need visible next/prev buttons, or can they be screen-reader-only?

@JScherer-WMF confirmed during standup that they'll be screen-reader-only

Change #1290939 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/extensions/MultimediaViewer@master] Image Browsing: add accessible labels to carousel elements

https://gerrit.wikimedia.org/r/1290939

Test wiki created on Patch demo by LWatson-WMF using patch(es) linked to this task:
https://c4c4738cbd.catalyst.wmcloud.org/wiki/Main Page

Test wiki created on Patch demo by LWatson-WMF using patch(es) linked to this task:
https://e675019bcc.catalyst.wmcloud.org/wiki/Main Page

Test wiki created on Patch demo by LWatson-WMF using patch(es) linked to this task:
https://fafde56dd0.catalyst.wmcloud.org/wiki/Main Page

Test wiki on Patch demo by LWatson-WMF using patch(es) linked to this task was deleted:

https://e675019bcc.catalyst.wmcloud.org/wiki/Main Page

Test wiki on Patch demo by LWatson-WMF using patch(es) linked to this task was deleted:

https://c4c4738cbd.catalyst.wmcloud.org/wiki/Main Page

Test wiki created on Patch demo by KSarabia-WMF using patch(es) linked to this task:
https://9f3a44f650.catalyst.wmcloud.org/w/

QA Instructions

Patch Demo: https://9f3a44f650.catalyst.wmcloud.org/wiki/Paris?useskin=minerva&mobileCarousel=1

Turn on VoiceOver

1. Navigate to the carousel by swiping, not tapping
2. Use one-finger swipe right/left to move through elements.
3. Do not rely only on tapping visually, because the accessibility question is whether a screen-reader user can discover and operate the carousel through the accessibility tree.
4. You want to hear something like:

“Images in Mona Lisa”
“list”
“23 items”
“link, image, [description/alt text]”
“Image 1 of 23”

Exact phrasing may vary, but the important parts are

1. The carousel/list has a meaningful label.
2. The user knows these are article images.
3. Each image/link has an accessible name.
4. The current item position is announced, ideally like “1 of 23.”
5. Images with alt text announce useful alt text.
6. Images without alt text still announce something usable, likely a cleaned-up filename or fallback label.

Change #1296578 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/MultimediaViewer@master] A11y improvements

https://gerrit.wikimedia.org/r/1296578

Change #1296578 abandoned by Matthias Mullie:

[mediawiki/extensions/MultimediaViewer@master] A11y improvements

https://gerrit.wikimedia.org/r/1296578

Change #1296632 had a related patch set uploaded (by Matthias Mullie; author: LWatson):

[mediawiki/extensions/MultimediaViewer@wmf/1.47.0-wmf.5] Image Browsing: add accessible labels to carousel elements

https://gerrit.wikimedia.org/r/1296632

Change #1290939 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Image Browsing: add accessible labels to carousel elements

https://gerrit.wikimedia.org/r/1290939

Change #1296632 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@wmf/1.47.0-wmf.5] Image Browsing: add accessible labels to carousel elements

https://gerrit.wikimedia.org/r/1296632

Mentioned in SAL (#wikimedia-operations) [2026-06-03T08:05:32Z] <mszwarc@deploy1003> Started scap sync-world: Backport for [[gerrit:1296632|Image Browsing: add accessible labels to carousel elements (T407793)]]

Mentioned in SAL (#wikimedia-operations) [2026-06-03T08:22:45Z] <mszwarc@deploy1003> mlitn, mszwarc: Backport for [[gerrit:1296632|Image Browsing: add accessible labels to carousel elements (T407793)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2026-06-03T08:37:43Z] <mszwarc@deploy1003> Finished scap sync-world: Backport for [[gerrit:1296632|Image Browsing: add accessible labels to carousel elements (T407793)]] (duration: 32m 11s)

QAed on test wiki with Android's TalkBack: seems to work fine ✅

Assuming this task is about the MediaViewer code project, hence adding that project tag so other people who don't know or don't care about team tags can also find this task when searching via projects or looking at workboards. Please set appropriate project tags when possible. Thanks.

Change #1290786 abandoned by LWatson:

[mediawiki/extensions/MultimediaViewer@master] Image Browsing: add URL param to enable carousel for testing

Reason:

the URL param is no longer needed

https://gerrit.wikimedia.org/r/1290786

Test wiki on Patch demo by KSarabia-WMF using patch(es) linked to this task was deleted:

https://9f3a44f650.catalyst.wmcloud.org/w/

Test wiki on Patch demo by LWatson-WMF using patch(es) linked to this task was deleted:

https://fafde56dd0.catalyst.wmcloud.org/wiki/Main Page