This chapter discusses about classes provided by Bootstrap to visually hide any element, such as .visually-hidden and .visually-hidden-focusable.
- The .visually-hidden class in Bootstrap 5 is used to visually hide an element while keeping it accessible to screen readers and other assistive technologies.
- The .visually-hidden-focusable class is used to visually hide an element by default, but to display it when its focused, for example, on using a keyboard.
- The .visually-hidden-focusable class can also be used within a container :focus-within. The container will be displayed when any child element of the container receives focus.
Test focusability: Use keyboard navigation to test the focusability of elements. Press the Tab key to navigate through the focusable elements and Shift + Tab to move backward.
Let’s see an example on the usage of the classes .visually-hidden and .visually-hidden-focusable:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Visually hidden</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Visually hidden</h4><br><br><h4 class="visually-hidden">Hidden title for screen readers</h4><a class="visually-hidden-focusable" href="#content">Skip to home page</a><div class="visually-hidden-focusable">A container with an <a href="#">element that is focusable</a>.</div></body></html>
Leave a Reply