CODEWITHSUNDEEP
htmlaccessibilitywai-aria
baiju thomas
baiju thomas

Reputation: 186

The HTML element is also read by aria-label in Chrome

The HTML element is also read by aria-label in Chrome

  <div  [attr.aria-label]=“translations.content | translate"></div>
    
    translations.content = “<span>How are you</span>"

In Chrome, the voice-over reads span tag as well,

Would it be possible to have the voice-over read only the content?

Upvotes: 0

Views: 474

Answers (1)

brennanyoung
brennanyoung

Reputation: 6514

If I understand your code correctly, and translations.content is not null, you'll end up with:

<div aria-label="<span>How are you</span>"></div>

i.e., it looks like you are inserting a span element into an attribute value (which is not valid html), and chrome is guessing (wrongly) what you intended.

FWIW VoiceOver & Chrome is a combination which is known to misbehave at times. I think there have been some improvements, but anecdotally, VoiceOver plays better with Safari (or Firefox).

BTW aria-label is not supported on div unless an operable or landmark ARIA role has been added.

Upvotes: 1

Related Questions