What is a good aria-label for a button that opens a modal to pick a region and/or language for the webpage?

Question

I have a <button> element that opens a modal to change the webpage region and/or language. The <button> element needs an aria-label that gives the user information about what the modal does. The button text is the current selected language.

My current code:

<button id="languageButton" aria-label="Change Region and/or Language">
  Norway (English)
</button>

According to this article: https://dequeuniversity.com/rules/axe/4.7/label-content-name-mismatch

The following examples pass the Label and name from content mismatch rule:

Full visible label is contained in the accessible name.

<button name="link" aria-label="Next Page in the list">Next Page</button>

The following examples fail the Label and name from content mismatch rule:

Visible label doesn’t match accessible name.

<div role="link" aria-label="OK">Next</div>

Not all of visible label is included in accessible name.

<button name="link" aria-label="the full">The full label</button>

So based on this article, what would be the optimal button text and aria-label for a button that opens a modal to change the language in regards to WCAG?

If i set both the button text and aria-label to "Change region and/or language from Norway (English)" where "Norway (English)" is dynamically set to the current selected region and language, it would be valid, but ugly.

<button id="languageButton" aria-label="Change region and/or language from Norway (English)">
  Change region and/or language from Norway (English)
</button>

Any suggestions for a better way?

Answer 1

If i set both the button text and aria-label to "Change region and/or language from Norway (English)" where "Norway (English)" is dynamically set to the current selected region and language, it would be valid, but ugly.

"Ugly" is relative. I assume you mean you don't want your button to have such a long label. It's ok for the button to visibly display "Norway (English)" but the aria-label be "Change region and/or language from Norway (English)".

Only assistive technology will have access to the aria-label. Screen readers are the most commonly thought of assistive tech so a screen reader user would hear:

"Change region and/or language from Norway (English), button",

which doesn't sound ugly (to me). It's about as succinct as you can get and still convey what the button is going to do. In fact, it's probably more clear for the assistive tech user than for some sighted users, especially if the sighted user has some cognitive issues. When they see "Norway (English)" on the button, they might not know that clicking on it will bring up a dialog, but that's more of a usability issue for you to research.

A braille user would read

A speech interface user could say something like "click Norway" or "click English". ("Click" plus some visible text they see on the button.) They could also say "click region" or "click change" or "click change region" or "click language" or "click" plus any part of the aria-label, although as mentioned above, a sighted user will not see the aria-label so they won't know what words they can associate with the "click" command.

As you noted in the article, WCAG 2.5.3 Label in Name comes into play. That guideline says the visible text on the button must be in the aria-label but you can also have other stuff in the aria-label that is not displayed. So this is perfectly valid:

<button id="languageButton" aria-label="Change region and/or language from Norway (English)">
  Norway (English)
</button>

(Note that the word "Name" in "Label in Name" means the accessible name, which is the string that is announced for screen reader users or read by braille users.)

And not to get too technical or programmy, since that should be reserved for Stackoverflow.com, but your button should probably use aria-haspopup to indicate that the button is going to display a modal, although I like the simple disclosure pattern better.