How do I use the visually-hidden class correctly for accessibility?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I use the visually-hidden class correctly for accessibility?

Asked on Jul 29, 2025

Answer

The `visually-hidden` class in Bootstrap is used to hide elements visually while keeping them accessible to screen readers. This is useful for providing additional context to screen reader users without displaying the content on the screen.

<!-- BEGIN COPY / PASTE -->
        <span class="visually-hidden">This text is hidden visually but accessible to screen readers.</span>
        <!-- END COPY / PASTE -->

Additional Comment:

The `visually-hidden` class ensures that the content is not visible on the screen but remains accessible to assistive technologies.
This class is often used for accessibility purposes, such as providing additional instructions or context for screen reader users.
Ensure that the content hidden with `visually-hidden` is meaningful and necessary for understanding the page when using a screen reader.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I use the visually-hidden class correctly for accessibility?

Asked on Jul 29, 2025

Answer

The Q&A Network