What is causing the .sr-only class to malfunction in Bootstrap 5?

Currently, I am working on creating a one-page form using Bootstrap 5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="573538382324232536271762796479677a363b273f3664">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

    <title>Document</title>
</head>
<body>
    <form class="form-inline">
        <div class="form-group mb-2">
          <label for="staticEmail2" class="sr-only">Email</label>
          <input type="text" readonly class="form-control" id="staticEmail2" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67020a060e0b27021f060a170b024904080a">[email protected]</a>">
        </div>
        <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
    </form>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01636e6e75727573607141342f322f312c606d71696032">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

However, when I view the webpage in Edge or Chrome, despite giving the email label an sr-only class, it is still visible.

webpage displayed in Edge

I have extensively searched for a solution but have not been able to find one.

htmlcsstwitter-bootstrapaccessibilitybootstrap-5

Answer №1

One of the significant changes introduced in version 5 can be found here:

[Breaking] Classes previously labeled as "screen reader" are now referred to as "visually hidden" classes.

  • The .sr-only and .sr-only-focusable classes have been renamed to .visually-hidden and .visually-hidden-focusable

Therefore, replace class="sr-only" with 

class="visually-hidden"
:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e693889588968bc7cad6cec795">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="visually-hidden">Email</label>
    <!--                      ^^^^^^^^^^^^^^^^^^^^^^^           -->
    <input type="text" readonly class="form-control" id="staticEmail2" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56333b373f3a16332e373b263a337835393b">[email protected]</a>">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

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

Item that was chosen is not visible in the dropdown menu

Here is a snippet of HTML code: <div class="col-lg-7 col-md-7 col-sm-7"> <select class="tblselect2 "> <option value="">Item 1</option> <option value="">Item 1</option> </select> </div> T ...

htmlcss

Check for the presence of a horizontal scrollbar on the page for both computer and mobile devices

Is there a way to determine if a web page has a horizontal scrollbar using jQuery or pure JavaScript? I need this information to dynamically change the css of another element. I initially tried function isHorizontalScrollbarEnabled() { return $(docum ...

javascriptjqueryhtmlcross-browserscrollbar

Selenium is throwing an error indicating that a list object does not have the attribute to find an element

In my quest to extract nutritional data from a website through web scraping, everything was going smoothly until I encountered pages with slightly different formatting. When using selenium and a specific line of code, I noticed that it returned an empty l ...

pythonhtmlseleniumxpathweb-scraping

What could be the reason for box-shadows not appearing properly on Safari browsers?

Why are box shadows with decimals sometimes not displayed in Safari? Is there a solution to this issue? Here's an example of the code: div { width: 200px; height: 200px; box-shadow: 0px 0.0351725rem 0.0351725rem 0px, 0px 0px 0px 0.0175862re ...

htmlcsssafaribox-shadow

``Is there a way to retrieve the file path from an input field without having to submit the form

Currently, I am looking for a way to allow the user to select a file and then store the path location in a JavaScript string. After validation, I plan to make an AJAX call to the server using PHP to upload the file without submitting the form directly. Thi ...

phpjavascripthtmlformsfile-upload

Displaying information in a drop-down list based on the selection made in a previous drop

Hey fellow developers, I could really use your expertise on a project I'm working on for attendance management. I've hit a roadblock with a specific feature - my goal is to dynamically display departments based on the selected block without requi ...

phpjquerycssajaxhtml

What is the method for rotating a map using JavaScript?

My map built with Leaflet displays a route and a moving car marker. Now, I am looking to implement a feature where the map rotates based on the direction of the car. I have access to both the current coordinates of the car and the target coordinates. ...

javascriptjquerycssleaflet

What are the steps to implementing Sass for creating hover button colors?

After attempting to implement this code in my editor, I have found that it is not functioning properly. It appears that this code may be better suited for older versions of Bootstrap. .button { &:hover { background-color: black; color: w ...

buttonsasscolorsbootstrap-5

Empty Media Viewer

I am encountering an issue with setting up a code, as it only displays a blank white page. Any suggestions on what might be causing this problem in the setup and assistance in resolving it would be greatly appreciated. <script type="text/javascript ...

javascripthtmljqueryjwplayer

"Designing with Vue.js for a seamless and adaptive user experience

I'm looking to customize the display of my data in Vuejs by arranging each property vertically. Instead of appearing on the same line, I want every item in conversationHistory to be displayed vertically. How can I achieve this in Vuejs? Can anyone off ...

cssvue.jsresponsive

Refresh choices for the user interface selection menu

I've successfully mastered the art of redefining options for Webix ui.richselect/ui.combo. The technique involves: richselect.getList().clearAll(); richselect.getList().parse(options_data) Now, I'm facing a challenge with changing options fo ...

javascripthtmlhtml-selectwebix

Elements that are fixed are not visible on the browser's screen

Currently, I am facing an issue with two divs that have a position: fixed; property. Everything functions properly until I zoom in on the page. Typically, when you zoom in on a page, two sliders appear to allow you to view content beyond your screen. Howev ...

htmlcss

What could be causing Vuejs to not update elements promptly?

Currently, I am encountering a scenario where I am adding options to a select element using Vue.js when the @change event of that specific element is triggered. An issue arises where the new option is not 'registered' until I exit the function. ...

javascripthtmlvue.js

"Need guidance with jQuery and CSS layout alignment on the

So here's the scenario I'm dealing with: <div id="tabs"> <div id="tab_one"> Content for tab one </div> <div id="tab_two"> Content for tab two </div> <div id="tab_three"> ...

jquerycsstabsposition

Design a custom cover page before printing using the window.print() method

When it comes to printing, I have a header and footer displayed on each page. However, I want the first page to be clean with just a picture or title, without the header and footer that appear on subsequent pages. I've attempted to use CSS like this ...

htmlcss

What is the best way to retrieve the textbox value when its associated checkboxes have been selected?

Upon selecting a checkbox and entering data into the linked textbox, upon submission I aim to reveal a form showcasing both the entered text and which checkboxes were selected. ...

phphtml

Embed a video clip into an HTML webpage

I attempted to embed a video using HTML. I followed the player script instructions and added the necessary paths and scripts, but unfortunately, the video is not visible on the webpage. Instead, when clicking on the area where the video should be, it opens ...

htmlcssvideo

Three responsive images neatly arranged within separate div containers

Looking to have these 3 divs align horizontally with responsive images. Having trouble maintaining the layout when setting max-width. Any suggestions? .fl { display: flex; flex-wrap: no-wrap; height: 35%; flex-direction: row; } .pic { width: ...

htmlcss

What is the best way to show a default option in a loop while hiding the others without causing an infinite loop to occur?

Currently, I am working on a way to have a default item displayed in a loop while hiding the rest. I would like the hidden items to only display when called upon. The current issue I am facing is that the loop seems to be infinite. I am open to suggestio ...

phphtmlmysqlcss

The hamburger icon is not visible on smaller screens when using the Bootstrap 5 navbar

'The stylesheets for Bootstrap CSS and JS have been included in the file. The content shows up fine with default colors, but not when I customize them.' ''' <li class="nav-item"> <a class= ...

htmlcssbootstrap-5