Are there any alternatives similar to the reverse sr-only feature in Bootstrap 4?

I implemented the use of .sr-only to ensure compatibility with text-based browsers such as Lynx. This allows for the display of an ASCII logo in the header for those using standart GUI browsers like Firefox, while displaying the normal graphical logo for others.

However, on the contact page, there is an OpenStreetMap iframe with an ASCII map. Unfortunately, when viewed in Lynx, the OSM embed is loaded with a lengthy URL and error messages.

My dilemma lies in making the OSM embed visible only when using a screen reader or text-based browser - essentially a reverse sr-only approach.

csshtmltwitter-bootstrapbootstrap-4

Answer №1

It might be a bit late, but here's a helpful tip on how to display full dates to screen readers while hiding the abbreviated format for sighted viewers.
To achieve this, you can use aria-hidden to hide text meant for sighted viewers from the screen reader, and utilize aria-label for the screen reader to read the full dates:

<span aria-label="Beginning April 25 2017 until December 31 2035">
    <span aria-hidden="true">2017/04/25 - 2035/12/31</span>
</span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Footer not positioned at the bottom of the page

I have been experimenting with different ways to keep my footer at the bottom of the page. Initially, I tried using position: static, but the footer ended up above the bottom of the page and the background was visible (similar to the image below). Then, I ...

htmlcssfooter

What exactly do discrete animations entail?

In the MDN animation documentation, it mentions a type of animation known as "discrete". Can you explain what this term signifies? ...

cssanimationcss-animations

Prevent the Scrolling on a Dynamic Web Page Using Selenium in Python

Hey there! I'm currently working on using Selenium and Scrapy to scrape some data from I've been experimenting with different methods, such as using Selenium and configuring PhantomJs as the driver. To scroll down the page, which is an infinite ...

javascriptpythonhtmlseleniuminfinite-scroll

What causes immediately invoked functions within event handlers to be executed before the event is triggered?

let b = (function maria() { alert("ee"); })(); * this code runs as soon as the page loads * <button onclick="b">Click me</button> * this code only runs when button is clicked * <button onclick="alert('ee')">Click m ...

javascripthtml

Avoiding using ID selectors when working with a checkbox hack

I've shared about my project previously. Twice, actually. While the responses have given me better insight into my situation, they haven't been directly applicable. I take responsibility for this as I was posting an incomplete version of the fina ...

htmlcsscheckboxcss-selectors

What is the best way to center my items vertically in a material-UI Grid row?

Struggling to vertically align three items in a row using Material UI's Grid component. Despite setting "justifyContent: 'center'," it only horizontally centers the items. Here are my styles: const styles = (theme) => ({ root: { te ...

cssreactjsgridmaterial-uivertical-alignment

Adjust the checkmark color of MUI Checkbox

When using Material UI's MUI library for React, I encountered an issue with the checkbox checkmark color. By default, the checkmark takes on the background color of the container element, which is great for light backgrounds but not ideal for dark one ...

cssreactjscheckboxmaterial-ui

The functionality of the disabled button is malfunctioning in the Angular 6 framework

Just starting out with angular 6 and I'm using formControl instead of FormGroup for business reasons. app.component.html <button class="col-sm-12" [disabled]="comittee_Member_Name.invalid && comittee_Member_Number.invalid && c ...

htmlangulartypescriptangular6

Plotly Express Unleashes the Power of Subplots

After spending countless hours scouring the internet, I am feeling utterly frustrated and perplexed about how to deal with subplots using plotly express in Python. The concept is to create a line plot alongside a scatter plot and another line plot, where ...

pythonhtmlplotlysubplotplotly-python

The value of the checkbox with the `on` attribute is not being passed to the Action class. Should I retrieve the parameter directly from

When submitting a form to my action class using the classic getter/setter method with Struts 2, all fields receive their values except for a boolean field which remains false even after checking the corresponding checkbox. Here is an example of the checkb ...

htmlcheckboxstruts2struts2-interceptorsstruts-tags

Issues with IE6 hover state not properly resetting

Tutorial This particular issue has been isolated in the test case provided above. It is easily noticeable when viewed in IE6. Description of the Issue In Internet Explorer 6, when hovering over the link, all child elements that are supposed to be visibl ...

cssinternet-explorer-6

What is the best way to have the sidebar of a webpage slide out over the main body content that is being displayed?

Issue Summary I am experiencing an issue with the positioning of my sidebar, which is initially located 66% offscreen using -translate-x-2/3. The sidebar is meant to be pulled into view onmouseover, however, the main body content remains stuck in place. I ...

javascripthtmltailwind-css

How about connecting functions in JavaScript?

I'm looking to create a custom function that will add an item to my localStorage object. For example: alert(localStorage.getItem('names').addItem('Bill').getItem('names')); The initial method is getItem, which retrieves ...

javascripthtmlchaininglocal-storage

Looping through required fields in jQuery based on a CSS class

Is there a way to loop through required fields marked with <input class="required">? Currently, only the first input in the loop is being evaluated. How can I traverse the DOM using a loop to check all input boxes? Thank you for your help. While I ...

javascriptjquerycssloops

Storing dynamic content on a server and retrieving it for future use

I'm working on a webpage that allows users to create elements dynamically and I want to save those elements to the server. When someone else visits the page, I want them to see those saved elements as well. I'm not too familiar with web programm ...

javascriptjqueryhtmlajaxjson

Examining website design on an IOS device from a Windows computer

Is there a way for me to test HTML files from Windows on iOS8 (Local Files)? I have tried Adobe Edge Inspect, but it only works with servers. Are there any free cloud hosts that allow for HTML, CSS, and JS files? Edit: I apologize if my question was not c ...

htmlioscsscloud

Ways to make ionic slides adhere to column width

I've been immersing myself in learning the latest versions of AngularJS and Ionic through practical application. I am currently working on a page that uses ionic rows and columns to display JSON data. The layout includes a 50/50 column setup, with a t ...

cssangularjsionic-framework

Troubleshooting a Dynamic Navigation Bar Problem with jQuery Integration

Having developed a responsive navbar, an issue arises during iPad breakpoints where attempting to close the active navbar by clicking the hamburger icon triggers the jQuery script to also perform .removeClass(".active").slideToggle() on two buttons, causin ...

htmljquerycssresponsive-nav

Hover your mouse over the menu to activate a timeout feature

Having an issue with my multi-level menu - when I hover over a main menu item, the sub-menu items are supposed to display. However, if I move the mouse too quickly from the main item to the sub-item and it goes off the path, the sub-menu disappears and I h ...

jqueryhtmlcssmenu

Steps for adding a delete icon to a text input field and enabling the functionality to delete text

In the code snippet below, I am creating a text input field: <input type="text" class="signup-input text-value" name="" placeholder="e.g. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48554c405d41486d">[email pro ...

javascriptjqueryhtmlcss