简体   繁体   中英

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.

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>                    

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM