Bootstrap - Visually Hidden

Ethan D. -

Bootstrap's Visually Hidden Class

Bootstrap provides a class called .visually-hidden that lets you hide content visually while keeping it accessible to assistive technologies like screen readers. This class improves the accessibility of your web pages by providing important information to users who rely on assistive technologies, even if that information is not visually displayed on the screen.

When you apply the .visually-hidden class to an element, Bootstrap uses CSS to position the element off-screen, outside the visible area of the webpage. The element will not be visible to sighted users, but it will still be present in the DOM (Document Object Model) and accessible to assistive technologies.

Example

.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;
}

The class uses a combination of CSS properties to visually hide the element while ensuring it remains accessible:

Property Description
position: absolute Removes the element from the normal document flow and positions it relative to its closest positioned ancestor or the initial containing block.
width: 1px and height: 1px Sets the element's dimensions to a single pixel, making it virtually invisible.
padding: 0 and margin: -1px Removes any additional spacing around the element.
overflow: hidden Ensures that any content within the element that exceeds its dimensions is clipped and not visible.
clip: rect(0, 0, 0, 0) Defines a clipping region with zero dimensions, further hiding the element visually.
white-space: nowrap Prevents line breaks within the element's content.
border: 0 Removes any border around the element.

By applying the .visually-hidden class to an element, you can provide additional context or information that is not visually necessary but is important for users relying on assistive technologies. This helps create a more inclusive and accessible user experience.

Tip

While the .visually-hidden class hides content visually, the content is still accessible to assistive technologies. Screen readers will still read out the content as if it were visible on the page. This allows you to provide extra context, labels, or instructions specifically for users who require assistive technologies, without cluttering the visual design for sighted users.

Implementing Visually Hidden Content

Using the .visually-hidden class

To apply the .visually-hidden class to an element, add it to the element's class attribute.

Example: Applying the .visually-hidden class

<span class="visually-hidden">This text is visually hidden but accessible to assistive technologies.</span>

Elements that can benefit from being visually hidden include:

  • Labels for form inputs that are clear from the input's context
  • Explanatory text for icons or images that convey meaning
  • Table headers that are obvious from the table's structure
  • Additional context for links or buttons

Example: Using the .visually-hidden class to provide additional context for an icon button

<button class="btn btn-primary">
  <i class="fas fa-edit"></i>
  <span class="visually-hidden">Edit profile</span>
</button>

Combining with other classes

The .visually-hidden class can be used with other Bootstrap classes to create more complex components while maintaining accessibility. This allows you to use Bootstrap's existing styles and layouts while selectively hiding certain elements visually.

Example: Using the .visually-hidden class with Bootstrap's grid system

<div class="row">
  <div class="col-md-6">
    <h2>Section Title</h2>
    <p>Visible content goes here.</p>
  </div>
  <div class="col-md-6 visually-hidden d-md-block">
    <p>Additional content that is hidden on small screens but visible on larger screens.</p>
  </div>
</div>

Another common combination is using .visually-hidden with Bootstrap's form classes to provide additional instructions or context for form inputs:

Example: Using .visually-hidden with Bootstrap's form classes

<div class="mb-3">
  <label for="password" class="form-label">Password</label>
  <input type="password" class="form-control" id="password">
  <div class="form-text visually-hidden">Password must be at least 8 characters long and include a mix of uppercase and lowercase letters, numbers, and symbols.</div>
</div>

By combining the .visually-hidden class with other Bootstrap classes, you can create rich, accessible components that cater to the needs of all users.

Customizing Visually Hidden Styles

While Bootstrap's .visually-hidden class hides content visually while keeping it accessible, you may need to change the default styles or create custom visually hidden classes for specific use cases.

To change the default styles of the .visually-hidden class, you can override the class's CSS properties in your project's stylesheet. This lets you change the positioning, dimensions, or other aspects of the visually hidden elements.

Example

.visually-hidden {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  clip: rect(0, 0, 0, 0) !important;
  padding: 0.5rem !important;
  margin: 0 !important;
  border: 0 !important;
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

The changed .visually-hidden class has these changes:

  • The width and height properties are set to auto, letting the element adjust its size based on the content.
  • The padding property is set to 0.5rem, adding some inner spacing to the element.
  • The margin property is set to 0, removing any outer spacing.
  • The background-color and color properties match Bootstrap's light theme, providing a visually appealing style when the element becomes visible (e.g., when focused).

You can further customize the styles based on your project's design system and accessibility requirements.

You can also create custom visually hidden classes for specific use cases. This is helpful when you need different variations of visually hidden content or want to apply extra styles to certain elements.

Example

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  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;
}

The .visually-hidden-focusable class hides content visually but makes it visible when the element receives focus. This is useful for elements like skip navigation links, which should be hidden by default but become visible when focused using keyboard navigation.

The :not(:focus):not(:focus-within) selector makes sure the styles are applied only when the element and its descendants are not focused. When the element receives focus, the default visibility styles will be applied, making the element visible.

By creating custom visually hidden classes, you can handle specific accessibility scenarios and provide a tailored experience for your users.

Remember to test your visually hidden styles with different assistive technologies and browsers to make sure they work as intended and provide a good user experience for all users.