In HTML, you can use the <abbr> tag to specify abbreviations and acronyms, using the title attribute to specify what the abbreviation/acronym stands for:
<p>I want a cheeseburger <abbr title="with">w/</abbr> tomato and lettuce.</p>
Unfortunately, screen readers won't read the title and will try to read the text as is ("w slash" instead of "with"). You can fix that by adding an aria-label with what you want the screen readers to read. This would be equivalent to the "readas" attribute that you mentioned:
<p>I want a cheeseburger <abbr aria-label="with" title="with">w/</abbr> tomato and lettuce.</p>
With that, some screen readers read it as desired (Chromevox) but others still read "w slash" and broke the sentence in parts (VoiceOver). Adding a role="text" to the paragraph helped with this:
<p role="text">I want a cheeseburger <abbr aria-label="with" title="with">w/</abbr> tomato and lettuce.</p>
After that, VoiceOver and Chromevox read it the same way: "I want a cheeseburger with tomato and lettuce." But I recall some a11y experts mentioning role="text" not having full support (would need to look into it), so I don't know how good of an idea it is to use it.
It is funny because sometimes screen readers are smart enough to interpret this type of acronyms correctly, and some other times they need a little help.
Sometimes they may "need help" since they're trying to be "accurate", instead of being "correct". At least, that's why I think it happens.
But, I had a question about <abbr>, is title required for the example that included aria-label?
I know title also adds a tooltip to the element, and I don't want that.
title is not required. With the tooltip, you'd be providing the same information to screen reader users and sighted users, which is important. But we could say that "w/" is a commonly known/used abbreviation and there's no real need for the title/tooltip. So it should be ok without it.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
In HTML, you can use the
<abbr>tag to specify abbreviations and acronyms, using thetitleattribute to specify what the abbreviation/acronym stands for:Unfortunately, screen readers won't read the title and will try to read the text as is ("w slash" instead of "with"). You can fix that by adding an aria-label with what you want the screen readers to read. This would be equivalent to the "readas" attribute that you mentioned:
With that, some screen readers read it as desired (Chromevox) but others still read "w slash" and broke the sentence in parts (VoiceOver). Adding a
role="text"to the paragraph helped with this:After that, VoiceOver and Chromevox read it the same way: "I want a cheeseburger with tomato and lettuce." But I recall some a11y experts mentioning
role="text"not having full support (would need to look into it), so I don't know how good of an idea it is to use it.It is funny because sometimes screen readers are smart enough to interpret this type of acronyms correctly, and some other times they need a little help.
Sometimes they may "need help" since they're trying to be "accurate", instead of being "correct". At least, that's why I think it happens.
But, I had a question about
<abbr>, istitlerequired for the example that includedaria-label?I know
titlealso adds a tooltip to the element, and I don't want that.titleis not required. With the tooltip, you'd be providing the same information to screen reader users and sighted users, which is important. But we could say that "w/" is a commonly known/used abbreviation and there's no real need for the title/tooltip. So it should be ok without it.