Reputation: 201

Web accessibility language detection with Voiceover

How does Voiceover detect language and how can I make it "speak" the same language throughout a website?

My computer is in English, I am working on a website that offers various localizations. Voiceover can very well read <p> or <span> elements in that current local (not English) but when I focus on a <button> element, it doesn't detect the language and reads everything in English, which doesn't make sense because the text is not in English. I have the lang attribute set in <html> but it doesn't seem to help. I've even added the lang attribute to the button, but still nothing.

I have tried adding a <p> element inside of a <button> but it still does the same thing.

Is that just how Voiceover works or am I doing something wrong?

Upvotes: 5

Answers (3)

neiya

Reputation: 3162

Although some screen readers can automatically detect the language of text, this can be unreliable. To ensure proper language identification for user agents, it's recommended to use the lang attribute.

In VoiceOver on MacOS, for the text of a button to be read in a language different from that of the page, add the lang attribute to the button:

<html lang="en">
  <head></head>
  <body>
    This is a page in English
    <button lang="fr">Le texte de ce bouton est en français</button>
  </body>
</html>

Additionally the voice for the target language needs to be installed in VoiceOver utility > Speech > Voices.

Upvotes: 0