Bootstrap - Visually Hidden

Hello there, future web developers! Today, we're going to dive into an exciting and incredibly useful feature of Bootstrap: the visually hidden class. As your friendly neighborhood computer teacher, I'm thrilled to guide you through this journey. So, grab your favorite beverage, get comfy, and let's embark on this adventure together!

What is Visually Hidden?

Before we jump into the nitty-gritty, let's start with the basics. The visually hidden class in Bootstrap is like a magician's trick for your web page. It allows you to hide content visually while still keeping it accessible to screen readers. Isn't that neat?

Imagine you're designing a website for a magical school (let's call it Hogwarts, shall we?). You want to include important information for students with visual impairments, but you don't want this information to clutter the visual layout for other students. That's where the visually hidden class comes to the rescue!

How Does It Work?

The visually hidden class uses CSS to hide content from sighted users while keeping it available for screen readers. It's like having an invisibility cloak for your HTML elements!

Let's take a look at a simple example:

<h1>Welcome to Hogwarts</h1>
<p class="visually-hidden">This content is for screen readers only.</p>

In this example, sighted users will only see "Welcome to Hogwarts", while screen reader users will also hear "This content is for screen readers only."

Implementing Visually Hidden in Bootstrap

Now that we understand the concept, let's see how we can implement it in Bootstrap. Bootstrap provides us with a ready-to-use class called .visually-hidden.

Here's how you can use it:

<div class="visually-hidden">This content is hidden visually but accessible to screen readers.</div>

Simple, right? Just add the class to any element you want to hide visually.

Practical Examples

Let's look at some practical examples where you might use the visually hidden class:

1. Skip Navigation Links:

<a href="#main-content" class="visually-hidden">Skip to main content</a>
<nav>
  <!-- Navigation menu items -->
</nav>
<main id="main-content">
  <!-- Main content -->
</main>

This allows screen reader users to skip directly to the main content, improving their navigation experience.

2. Form Labels:

<label for="search" class="visually-hidden">Search</label>
<input type="text" id="search" placeholder="Search">

Here, we provide a label for screen readers without affecting the visual design of a search input.

3. Additional Context:

<button>
  Delete
  <span class="visually-hidden">this item from your cart</span>
</button>

This provides extra context for screen reader users without cluttering the button text for sighted users.

The Magic Behind Visually Hidden

Now, let's peek behind the curtain and see how Bootstrap implements this magical class. Here's the CSS that makes it work:

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Don't worry if this looks like a spell from an advanced potions class! Let's break it down:

1. position: absolute: This takes the element out of the normal document flow.
2. width: 1px; height: 1px: Makes the element tiny.
3. padding: 0; margin: -1px: Removes any space around the element.
4. overflow: hidden: Hides any content that might overflow.
5. clip: rect(0, 0, 0, 0): Clips the content to a 0x0 rectangle.
6. white-space: nowrap: Prevents text from wrapping.
7. border: 0: Removes any border.

The !important declarations ensure these styles aren't overridden by other CSS rules.

Visually Hidden vs Display None

You might be wondering, "Why not just use display: none?" Well, my curious apprentice, there's a crucial difference:

Property	Visually Hidden	Display None
Visual Appearance	Hidden	Hidden
Screen Reader Access	Accessible	Not Accessible
DOM Presence	Present	Present
Layout Impact	No impact	Affects layout

As you can see, visually-hidden is the way to go when you want to maintain accessibility while hiding content visually.

Responsive Visibility

Bootstrap also provides classes for toggling visibility based on screen size. These classes combine the concept of visually hidden with responsive design:

• .d-none: Hidden for all screen sizes
• .d-{sm,md,lg,xl,xxl}-none: Hidden only on specific screen sizes
• .d-{sm,md,lg,xl,xxl}-block: Visible as a block element on specific screen sizes

For example:

<div class="d-none d-md-block">
  This content is hidden on small screens but visible on medium and larger screens.
</div>

Conclusion

And there you have it, young wizards of the web! We've unraveled the mysteries of Bootstrap's visually hidden class. Remember, with great power comes great responsibility. Use these techniques wisely to create websites that are not only visually appealing but also accessible to all users.

As we wrap up our lesson, I'm reminded of a wise old web developer who once told me, "The true magic of web design lies not in what you can see, but in what you can't." So go forth, experiment, and create web experiences that are magical for everyone!

Until our next adventure in the world of web development, keep coding and stay curious!

Credits: Image by storyset