Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there anything like reverse sr-only in Bootstrap 4?

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.

like image 637
Özcan Oğuz Avatar asked Oct 16 '22 20:10

Özcan Oğuz


1 Answers

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>                    
like image 195
GDP Avatar answered Nov 02 '22 05:11

GDP