Vector 2022’s language button is inaccessible
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	stjn
	Feb 5 2022, 10:20 PM

Description

This is the code that renders a ‘button’ for language switching in new Vector:

<nav id="p-lang-btn" class="mw-portlet mw-portlet-lang vector-menu vector-menu-dropdown" aria-labelledby="p-lang-btn-label" role="navigation">
	<input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="mw-interlanguage-selector vector-menu-checkbox selector-open" aria-labelledby="p-lang-btn-label" data-uls-loaded="true" aria-expanded="false">
	<h3 id="p-lang-btn-label" aria-label="Aller à un article dans une autre langue. Disponible en 322 langues." class=" vector-menu-heading mw-ui-button mw-ui-quiet mw-ui-progressive" aria-hidden="true">

It has multiple issues:

aria-hidden="true" on an element that is used throughout the interface as an accessible description (in aria-labelledby).
Long aria-label on the same element that does not seem to function correctly (not announced to screen reader software, at least as can be checked from Firefox’s Accessibility tools).
In combination, this seems nonsensical, as the whole landmark should not be labelled by such a long label, and it seems really probable that aria-label / aria-hidden combo does nothing, or might cause problems with what gets read out in different screen readers.

Seems to be introduced by T289523: Add an accessible label to ULS and language variant buttons. https://github.com/w3c/aria-practices/issues/1136 says that combining aria-labelledby with elements with aria-hidden="true" ‘seems like a bad pattern that should never be used’ (i. e. anti-pattern).

Old Vector also has a related issue, as well (aria-label="" should not be set by the skin on all portlets):

<h3 id="p-lang-label" aria-label="" class="vector-menu-heading">
	<span class="vector-menu-heading-label">На других языках</span>
</h3>

AC

~~[] Language button label (#p-lang-btn-label) doesn't have aria-hidden attribute~~

Reading the language button (#p-lang-btn-checkbox) with a screenreader should read out the aria-label. In english, this should sound something like "Go to an article in another language. Available in 250 languages"

Details

Subject	Repo	Branch	Lines +/-
Follow-up: Update menu label elements	mediawiki/skins/Vector	master	+17 -11
Handle accessible labels differently for dropdown and portal menus	mediawiki/skins/Vector	master	+24 -7
Remove nav element from Vector menus and only render label elements in Vector menus when needed. Add new nav landmarks corresponding to user links, main site nav, and article editing tools. Split out legacy Menu template.	mediawiki/skins/Vector	master	+70 -28
Replace h2 in TOC with p and remove aria-hidden	mediawiki/skins/Vector	master	+3 -3

Customize query in gerrit

Related Objects

Mentioned In: T304462: Split Menu template into more specific templates
T291304: Simplify and remove extraneous navigation landmark regions from modern Vector
Mentioned Here: T291304: Simplify and remove extraneous navigation landmark regions from modern Vector
T304462: Split Menu template into more specific templates
T289523: Add an accessible label to ULS and language variant buttons

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 5 2022, 10:20 PM

stjn renamed this task from Vector 2020’s language button is inaccessible to Vector 2022’s language button is inaccessible.Feb 5 2022, 10:20 PM

Rexogamer subscribed.Feb 5 2022, 10:23 PM

stjn updated the task description. (Show Details)Feb 5 2022, 10:26 PM

Bebiezaza subscribed.Feb 6 2022, 5:27 PM

Jdlrobson added a project: Web-Team-Backlog.Feb 7 2022, 4:46 PM

ovasileva moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog board.Feb 8 2022, 3:12 PM

Jdlrobson moved this task from Incoming to Language Switching on the Desktop Improvements (Vector 2022) board.Feb 8 2022, 5:21 PM

ovasileva triaged this task as Medium priority.Feb 10 2022, 2:43 PM

ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog.

Could you collect some thoughts on this (no rush)?

@stjn Thanks for filing this. This is a valid problem that's a result of limitations and technical debt around Vector menus, which are used by the language button.

The aria-hidden was originally added to prevent the label from being repeated, as it's also used to give the nav landmark an accessible name (existing behavior from legacy Vector). This was supposed to be a temporary solution that could be removed with T291304, when nav landmarks could be removed from the menu template altogether.

However you are correct that this does break the aria-label, and it's not a good precedent, especially in dropdown menus like the language button.
The simplest solution is to remove the aria-hidden attribute from only dropdown menus. A more robust solution would involve completing T291304 or T304462, so that we don't have to handle duplicate labels to begin with

Jdlrobson removed bwang as the assignee of this task.Mar 25 2022, 5:09 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson added a subscriber: bwang.

Suggesting we do T291304 which should fix this.

Change 784291 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Replace h2 in TOC with p and remove aria-hidden

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

gerritbot added a project: Patch-For-Review.Apr 19 2022, 4:57 PM

Jdlrobson assigned this task to bwang.Apr 19 2022, 5:38 PM

Volker_E subscribed.Apr 19 2022, 6:09 PM

Change 784291 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Replace h2 in TOC with p and remove aria-hidden

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

Maintenance_bot removed a project: Patch-For-Review.Apr 19 2022, 9:32 PM

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.9; 2022-04-25).Apr 19 2022, 10:00 PM

Jdlrobson reassigned this task from bwang to Edtadros.Apr 19 2022, 10:35 PM

Jdlrobson moved this task from Blocked on Others to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson moved this task from Needs triage to Vector 2022 (tracking) on the Vector (legacy skin) board.Apr 25 2022, 9:39 PM

@bwang I'm not sure what to verify here. Please add some QA steps or ping me.

I realized the gerrit patch linked is incorrect, this is still in code review. I'll fix this by linking the right task

bwang moved this task from QA to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 27 2022, 4:50 PM

Change 783876 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove nav element from Vector menus and only render label elements in Vector menus when needed. Add new nav landmarks corresponding to user links, main site nav, and article editing tools. Split out legacy Menu template.

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

gerritbot added a project: Patch-For-Review.Apr 27 2022, 4:52 PM

bwang removed bwang as the assignee of this task.Apr 27 2022, 5:40 PM

bwang assigned this task to Jdrewniak.

bwang moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Hey @Jdrewniak hope its ok I assigned to you, since this task is fixed by the same patch

Jdrewniak updated the task description. (Show Details)May 3 2022, 3:27 PM

Changes look good, here's a screenshot of what I see after the patch. The languages button doesn't have an aria-label, instead it has an aria-labelledby that points to the <label> element next to it. That label element, (somewhat unconventionally) has an aria-label attribute that should be read by screen-readers. This makes sense because text of the aria-label is more explicit than the it's text content. i.e. whereas visually the languages button says "250 languages", screen readers will hear "Go to an article in another language. Available in 250 languages". 👍

Screen Shot 2022-05-03 at 11.28.51 AM.png (241×901 px, 111 KB)

Jdrewniak moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.May 3 2022, 3:36 PM

Change 783876 merged by jenkins-bot:

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

Jdrewniak reassigned this task from Jdrewniak to Edtadros.May 3 2022, 3:42 PM

Jdrewniak subscribed.

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.12; 2022-05-16); removed MW-1.39-notes (1.39.0-wmf.9; 2022-04-25).May 3 2022, 4:00 PM

Maintenance_bot removed a project: Patch-For-Review.May 3 2022, 4:32 PM

Test Result - Beta

Status: ❓
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Language button label (#p-lang-btn-label) doesn't have aria-hidden attribute

Screen Shot 2022-05-04 at 2.32.45 PM.png (910×2 px, 956 KB)

❓ AC2: Reading the language button (#p-lang-btn-checkbox) with a screenreader should read out the aria-label. In english, this should sound something like "Go to an article in another language. Available in 250 languages"

Screen Recording 2022-05-04 at 2.41.47 PM.mov.gif (630×1 px, 745 KB)

@Jdrewniak I was unable to highlight just the label so I couldn't get the expected voiceover text. Also, it appears that voiceover says that the button is expanded when it is collapsed, and collapsed when it is expanded,

Thanks for bringing this up @Edtadros , I can't replicate the expanded/collapsed being in the wrong state, but the missing label I'm going to call a browser bug.

It looks like the new menu structure works for the most part, but the aria-label isn't read for just the language button, just on Chrome, with VoiceOver.

Chrome, VoiceOver, language button:	Safari, VoiceOver, language button:	Firefox, VoiceOver, language button:

"menu popup, button, main"	"Go to an article in another language. Available in 1 language, menu pop up, button, banner"	"Go to an article in another language. Available in 1 language, collapsed, menu button, main"

The More menu, and Personal Tools menu labels are read in Chrome, so I don't know why just the languages menu is not labeled.

@Bernard should we open a new ticket investigating this? Or just leave it as is?
From some preliminary tinkering, it seems that putting the label on the input seems to fix it... 🤷‍♂️

Thanks for the thorough review and investigation @Edtadros and @Jdrewniak! I agree it does seem like an issue with browser inconsistency. The issue occurs because we are using aria-labelledby on the checkbox, which is pointing to an element using aria-label. It is a bit of an edge case, and I can imagine it could cause problems in other browser/screenreader combos. Considering it's not hard to move aria-label to the checkbox, I don't mind making that change and simplifying the case for screenreaders.

Change 791458 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Apply aria-label to checkbox hack checkbox instead of using aria-labelledby + aria-label

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

gerritbot added a project: Patch-For-Review.May 12 2022, 9:30 PM

bwang updated the task description. (Show Details)May 12 2022, 10:13 PM

bwang mentioned this in T304462: Split Menu template into more specific templates .

Jdlrobson removed bwang as the assignee of this task.May 16 2022, 5:12 PM

Jdlrobson moved this task from QA to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdrewniak claimed this task.May 16 2022, 5:13 PM

Jdrewniak moved this task from Unsorted to ARIA on the Accessibility board.

Jdlrobson removed Jdrewniak as the assignee of this task.May 18 2022, 9:38 PM

Jdlrobson assigned this task to Jdrewniak.May 23 2022, 5:26 PM

Jdrewniak reassigned this task from Jdrewniak to Edtadros.May 24 2022, 3:04 PM

Jdrewniak claimed this task.

Jdrewniak moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 791458 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Handle accessible labels differently for dropdown and portal menus

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

Maintenance_bot removed a project: Patch-For-Review.May 24 2022, 3:30 PM

It looks like the patch above provides a more consistent experience using VoiceOver:


Chrome	Firefox	Safari

I think it can be signed off once it's verified in production.

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.14; 2022-05-30); removed MW-1.39-notes (1.39.0-wmf.12; 2022-05-16).May 24 2022, 4:00 PM

Change 803357 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Update menu label elements

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

gerritbot added a project: Patch-For-Review.Jun 6 2022, 10:06 PM

Change 803357 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Follow-up: Update menu label elements

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.16; 2022-06-13); removed MW-1.39-notes (1.39.0-wmf.14; 2022-05-30).Jun 13 2022, 3:00 PM

Maintenance_bot removed a project: Patch-For-Review.Jun 13 2022, 3:30 PM

Jdrewniak closed this task as Resolved.Jun 28 2022, 5:02 PM

	F35173264: Screen Shot 2022-05-24 at 11.35.25 AM.png
	May 24 2022, 3:40 PM

	F35173266: Screen Shot 2022-05-24 at 11.36.36 AM.png
	May 24 2022, 3:40 PM

	F35173260: Screen Shot 2022-05-24 at 11.34.18 AM.png
	May 24 2022, 3:40 PM

	F35135520: Screen Shot 2022-05-12 at 11.11.23 AM.png
	May 12 2022, 3:31 PM

	F35135533: Screen Shot 2022-05-12 at 11.13.50 AM.png
	May 12 2022, 3:31 PM

	F35135525: Screen Shot 2022-05-12 at 11.12.41 AM.png
	May 12 2022, 3:31 PM

	F35103714: Screen Recording 2022-05-04 at 2.41.47 PM.mov.gif
	May 4 2022, 9:50 PM

	F35103699: Screen Shot 2022-05-04 at 2.32.45 PM.png
	May 4 2022, 9:50 PM

Vector 2022’s language button is inaccessibleClosed, ResolvedPublicBUG REPORTActions