What Is Sr-Only in Bootstrap 3

What is sr-only in Bootstrap 3?

According to bootstrap's documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

Here is an example styling used:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Is it important or can I remove it? Works fine without.

It's important, don't remove it.

You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn't see a visual difference.

If you're interested in reading about accessibility:

Web Accessibility Initiative (WAI)
MDN Accessibility documentation

Accessibility: sr-only or aria-label

In the MDN example, a screen reader will just speak just the word "close" since aria-label overrides the text in the button. This will work even if you re-use the code without Bootstrap.

In your example, a screen reader will speak "close x" since you are doing nothing to hide the "x" from screen readers. You are also adding a text node to then hiding it with a class.

I would use the example from MDN.

Bootstrap 3 push/pull and accessibility

Your Q is a little general.

Accessibility concerns:

Avoid using tabindex values greater than 0. Doing so makes it
difficult for people who rely on assistive technology to navigate and
operate page content. Instead, write the document with the elements in
a logical sequence.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#Accessibility_concerns

`Interactive_content` (interactive focusable by keyboard)

Some HTML elements are focusable by default (buttons/links/Form inputs, and so on).

The tab order of this

 <a href="#" tabindex="0">First in tab order</a>
 <a href="#" tabindex="0">Second in tab order</a>

Bootstrap 3 Upgrade to Bootstrap 5 NavBar Issue

You can emulate the behavior using the hover selector only for the nav-link class and forgetting the nav-item to simplify what style applies when hovered.
This way nav-link should have color: #ff6633 when not hovered and color: #ffffff when hovered:

.navbar .navbar-collapse>.navbar-text,
.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link {
  color: #ff6633;
}

.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link:hover {
  color: #ffffff;
  background: rgb(255, 119, 0);
}

Also, remove the ** margin-bottom ** property for the .navbar.

The markup for the ul would be:

<ul class="navbar-nav">
  <li class="nav-item active mx-2">
    <a class="nav-link py-3 px-3">Java</a>
  </li>
  <li class="nav-item ms-2">
    <a class="nav-link py-3 px-3">PHP</a>
  </li>
</ul>

Working example:

body {
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.image-header-logo {
  height: 2.5rem;
}

.navbar {
  padding: 0 1rem;
  /* override default 0.5rem 1rem */
  /* box-shadow: 0px 0px 6px rgb(255, 100, 0); */
  /* TODO: placed in #header instead */
  margin-bottom: 6px;
  /* reserve space for the box-shadow */
}

.custom-navbar {
  box-shadow: 0px 0px 6px rgb(255 100 0);
}

/* to create sadow on the bottom */
.nav-item {
  cursor: pointer;
}

.navbar .navbar-collapse .navbar-nav .nav-item.active>.nav-link {
  box-shadow: inset 0px -5px 0px 0px rgba(255, 119, 0, 0.68);
  cursor: pointer;
}


/* to show orange in color on the line */
/* need to specify for so long, so that it can win without use of !important... == */
.navbar .navbar-collapse>.navbar-text,
.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link {
  color: #ff6633;
}

/* FIXME:  need to add this, but in the outskirt it does not work */
.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link:hover {
  color: #ffffff;
  background: rgb(255, 119, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

<nav class="navbar navbar-expand navbar-light custom-navbar py-0">
  <a class="navbar-brand" href="/i/trade">
    <img class="image-header-logo" src="https://www.gravatar.com/avatar/e8bf61002bf07be4ca6085c301f990c0?s=64" />
  </a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="myNavbar">
    <span class="navbar-text ms-auto">Welcome</span>
    <ul class="navbar-nav">
      <li class="nav-item active mx-2">
        <a class="nav-link py-3 px-3">Java</a>
      </li>
      <li class="nav-item ms-2">
        <a class="nav-link py-3 px-3">PHP</a>
      </li>
    </ul>
  </div>
</nav>

What Is Sr-Only in Bootstrap 3