Page MenuHomePhabricator

Make language button label match the visible label, and move supplementary label to aria-description
Open, HighPublic

Description

Background

The language button has dynamic aria-labels that that provide more context on the buttons (i.e. "Go to an article in another language. Available in 54 languages"). While the intent of these accessible labels is good, they introduce additional issues with assistive tech using voice control/input, and are very verbose.

More info:
https://ashleemboyer.com/blog/don-t-overwrite-visual-labels-with-aria-label

Requirements

Make the accessible label for the language button match the visible label. This can easily be accomplished by replacing the usage of aria-label with aria-description. This means the accessible and visible label will be the same (i.e. "14 languages"), and the long form description will be read out after as supplementary info (i.e. "Go to an article in another language. Available in 14 languages")

User story

As a user of assistive tech (i.e. voice navigation), I expect the label for the language button to be the same as the visible text.

    1. AC
  • Language button doesnt have 'aria-label'
  • Language button has 'aria-description'
  • Using a screenreader the language button should be read out the same as the visual text

Communication criteria - does this need an announcement or discussion?

no

Event Timeline

bwang triaged this task as Low priority.Feb 22 2023, 8:41 PM
bwang updated the task description. (Show Details)
bwang renamed this task from Remove language button's aria-label in favor of aria-description to Remove language button usage of aria-label in favor of aria-description.Feb 22 2023, 8:45 PM
deepchauhan18 changed the task status from Open to In Progress.Feb 27 2023, 10:39 AM
deepchauhan18 claimed this task.

can somebody explain what to achieve in this task?

deepchauhan18 reopened this task as Open.

Small refinement, I think a slightly short long form like “Go to an article in one of the other 14 available languages." might be better.

Nikerabbit subscribed.

This is not a good first task as the scope is not clear and wording changes should have product manager input.

bwang raised the priority of this task from Low to Medium.May 29 2024, 7:55 PM
bwang updated the task description. (Show Details)
bwang updated the task description. (Show Details)
bwang renamed this task from Remove language button usage of aria-label in favor of aria-description to Make language button label match the visible label, and move supplementary label to aria-description.Oct 10 2024, 8:59 PM
bwang added a project: good first task.
bwang updated the task description. (Show Details)

Thank you for tagging this task with good first task for Wikimedia newcomers!

Newcomers often may not be aware of things that may seem obvious to seasoned contributors, so please take a moment to reflect on how this task might look to somebody who has never contributed to Wikimedia projects.

A good first task is a self-contained, non-controversial task with a clear approach. It should be well-described with pointers to help a completely new contributor, for example it should clearly pointed to the codebase URL and provide clear steps to help a contributor get setup for success. We've included some guidelines at https://phabricator.wikimedia.org/tag/good_first_task/ !

Thank you for helping us drive new contributions to our projects <3

https://phabricator.wikimedia.org/T330334#8655385

I've updated the task description to hopefully clarify things. I dont believe its necessary to get product input, this doesnt result in any visual changes, nor are we changing any of the copy. We are simply changing how the copy is read out to screen reader users in a more accessible way.

@bwang, could you assign me that issue and tell me how to get started with it?

bwang raised the priority of this task from Medium to High.Mar 13 2026, 3:52 PM
Pppery added a subscriber: Hemmanttt.