I'm using .sr-only for compatibility with text based browsers like Lynx. For example, I put an ASCII logo on header, so if somebody browses the website with standart GUI browsers like Firefox, it shows the normal graphical logo. Else, it shows ASCII text logo.
But on the contact page, there is an OpenStreetMap iframe. I put an ASCII map to there too, but when I opened the page in Lynx, OSM embed is there with a long URL and error messages.
This is my problem: I want to make OSM embed to be visible only if using a screen reader/text browser. It's like reverse sr-only.
Quite late, and not sure if it will help exactly, but this is how I show full dates to the screenreader while hiding the abbreviated format, and doing the opposite for sighted
viewers.
I hide the text intended for sighted viewers from the screenreader with aria-hidden
, and use aria-label
for the screenreader to find and read:
<span aria-label="Beginning April 25 2017 until December 31 2035">
<span aria-hidden="true">2017/04/25 - 2035/12/31</span>
</span>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With