This content originally appeared on DEV Community and was authored by Calin Baenen
How can I make sure screenreaders always read the right thing?
As example, if I have:
<p>I want a cheeseburger w/ tomato and lettuce.</p>
the screenreader may say "I want a cheeseburger W slash tomato and lettuce."
.
On a bigger scale, you might wright some text as a bunch of symbols, but a screenreader may be confused, and read the symbols, instead of what the intended meaning is.
Such as, if I head this JSON:
{
"code": "tLk5902cqC1583r",
"expiration": "03/03/2022"
}
How could I have it read off "JSON that reads a code of T capital L k 5 9 0 2 c q capital C 1 5 8 3 r, and an expiration date of March third, twenty twenty-two."
instead of the possibility of reading "Opening brace, code, colon, tLk5902cqC1583r, expiration, ..."
?
Going back to earlier, how can I do something in this fashion?:
<p>I want a cheeseburger <annotation readas="with">w/</annotation> tomato and lettuce.</p>
...I know, the realistic thing to do would be to design a the webpage better, use "with"
instead of "w/"
, etc... and same for the other example.
Though, there may be cases where this isn't possible, which is when I'm thinking of using this.
I know <img/>
has alt
, but what do other elements have, in terms of capabilities for helping screenreaders? Can alt
be used on anything to help screenreaders read it? If not, how do I do what I said I wanted to achieve? ${Etc...}?
Cheers!
This content originally appeared on DEV Community and was authored by Calin Baenen

Calin Baenen | Sciencx (2021-05-09T02:37:30+00:00) Website Accessibility: How can I make sure screenreaders interpret the text in the way I intend?. Retrieved from https://www.scien.cx/2021/05/09/website-accessibility-how-can-i-make-sure-screenreaders-interpret-the-text-in-the-way-i-intend/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.