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

Asked on Aug 10, 2025

1 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.

← Back to All Questions