This was added in T314966: Add ARIA to Phonos elements where semantic HTML is not suitable, and it turns out I was incorrect in my comment ref (descriptive) name calculation (T314966#8184755) — which screenreader did you test with? aria-description is supposedly mostly-supported in the major screenreader applications (even if not supported natively in many browsers)

unhelpful sidenote: that adoption matrix is really poor, and disappointing to see

Change 863468 had a related patch set uploaded (by Samtar; author: Samtar):

[mediawiki/extensions/Phonos@master] PhonosButton.js: Add aria-label

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

Opted to add aria-label in addition to aria-description, along with a TODO to remove when aria-description is more widely adopted

If aria-label is supported everywhere but aria-description isn't, does it make sense to just have that and leave out aria-description altogether? Might it be confusing to have both set to be the same? it seems like it doesn't add much (but I might not be understanding everything).

In T321436#8441121, @Samwilson wrote:

If aria-label is supported everywhere but aria-description isn't, does it make sense to just have that and leave out aria-description altogether? Might it be confusing to have both set to be the same? it seems like it doesn't add much (but I might not be understanding everything).

Nope, you're right! I was imagining a situation where something supported -description but not -label — I've modified the patch

Change 863468 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] PhonosButton.js: Add aria-label

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

@TheresNoTime I turned on VoiceOver as seen in the screenshot and went to a phonos test site. Not really sure how VoiceOver works but are you saying once I go to the phonos test site, it's supposed to automatically speak? Just because nothing happened when I went to the site. It only talks when I click on a IPA word.

Test site: https://en.wikipedia.beta.wmflabs.org/wiki/Phonos
OS: Ventura 13.0.1
Browser: Safari

FYI, the aria-label is constructed using the text parameter of the phonos tag. So <phonos text="foo" /> generates an aria-label=Listen to the IPA pronunciation of foo.

Bear in mind that the text parameter is not always required in a phonos tag. For example, <phonos file="foo.ogg" /> will generate an aria-label that is just Listen to the IPA pronunciation of .

In T321436#8449742, @dom_walden wrote:

FYI, the aria-label is constructed using the text parameter of the phonos tag. So <phonos text="foo" /> generates an aria-label=Listen to the IPA pronunciation of foo.

Bear in mind that the text parameter is not always required in a phonos tag. For example, <phonos file="foo.ogg" /> will generate an aria-label that is just Listen to the IPA pronunciation of .

That makes me think, should text param always be required and the documentation be amended in this way?
Not that we're ending up in a similar problematic situation as with missing alt text on images, as people didn't start adding it from the beginning making the elements inclusive to vision-enabled users only.

I cannot get VoiceOver to read the aria-label in a language other than English. Is it possible? Perhaps a question for @TheDJ or @Volker_E

For example, https://en.wikipedia.beta.wmflabs.org/wiki/Qwerty?uselang=he the Phonos button is read by VoiceOver as "and quot", because I guess &quot; are the only characters it understands out of the aria-label האזנה להגיית יפ&quot;א של עמוד ראשי.

Other Hebrew text on that page is read in Hebrew (I assume correctly, although I don't speak it myself).

FYI, I am testing VoiceOver via Browserstack as I don't have access to a Mac.

(As an aside, I wonder if the he.json needs to be changed to remove the \")

I cannot get VoiceOver to read the aria-label in a language other than English.

This is a VoiceOver bug if I remember correctly. I'll see if I can find the relevant ticket in webkit.org.

But just a note, that there isn't a hint for the screenreader to know that this label is Hebrew. You are in an English content area, in which you place Hebrew labels, for an audio fragment that is in English, which is featuring a IPA English text area. But even if you would set it correctly, most screenreader probably can't handle this level of complexity yet.

aria-label great job!

I've created this to follow up on what to do text is empty: T325796: Fix aria-label for when 'text' is empty