Visually Hidden
Visually hidden text is invisible on screen but still read by screen readers, so icon-only controls, badges and charts get a meaningful description. visually-hidden-focusable shows the element again when it receives keyboard focus. Each example lists what assistive technology announces.
1Icon-only buttons
Hidden text gives icon buttons a name for assistive technology.
Screen reader hears: "Edit profile, button", "Print invoice, button", "Delete item, button"
<div class="d-flex gap-2">
<button type="button" class="btn btn-light"><i class="bi bi-pencil" aria-hidden="true"></i><span class="visually-hidden">Edit profile</span></button>
<button type="button" class="btn btn-light"><i class="bi bi-printer" aria-hidden="true"></i><span class="visually-hidden">Print invoice</span></button>
<button type="button" class="btn btn-light text-danger"><i class="bi bi-trash" aria-hidden="true"></i><span class="visually-hidden">Delete item</span></button>
</div>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Edit profile, button", "Print invoice, button", "Delete item, button"</p>2Skip to content link
visually-hidden-focusable hides the link until a keyboard user tabs to it.
Skip to main content
Press Tab inside this box to reveal the skip link.
Screen reader hears: "Skip to main content, link" as the first stop on the page
<div class="border rounded p-3 position-relative">
<a class="visually-hidden-focusable btn btn-primary btn-sm" href="#">Skip to main content</a>
<p class="small text-body-secondary mb-0">Press Tab inside this box to reveal the skip link.</p>
</div>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Skip to main content, link" as the first stop on the page</p>3Hidden search label
The search field keeps a real label for screen readers while the design shows only an icon.
Screen reader hears: "Search the help centre, search field"
<form class="input-group" role="search" style="max-width:22rem">
<label class="visually-hidden" for="hp-q-1244">Search the help centre</label>
<span class="input-group-text"><i class="bi bi-search" aria-hidden="true"></i></span><input class="form-control" id="hp-q-1244" type="search" placeholder="Search">
</form>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Search the help centre, search field"</p>4Action column header
An empty-looking column header still names the column for screen readers.
| Name | Role | Actions |
|---|---|---|
| Maya Ortega | Content Writer | |
| Nora Mensah | Marketing Lead |
Screen reader hears: Column header "Actions"; each button: "More actions for <name>"
<table class="table align-middle mb-0">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col"><span class="visually-hidden">Actions</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Maya Ortega</td>
<td>Content Writer</td>
<td class="text-end"><button type="button" class="btn btn-sm btn-light"><i class="bi bi-three-dots" aria-hidden="true"></i><span class="visually-hidden">More actions for Maya Ortega</span></button></td>
</tr>
<tr>
<td>Nora Mensah</td>
<td>Marketing Lead</td>
<td class="text-end"><button type="button" class="btn btn-sm btn-light"><i class="bi bi-three-dots" aria-hidden="true"></i><span class="visually-hidden">More actions for Nora Mensah</span></button></td>
</tr>
</tbody>
</table>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> Column header "Actions"; each button: "More actions for <name>"</p>5Badge counts
A counter badge says what it counts only to assistive technology.
Screen reader hears: "Inbox 13 unread messages, button"
<button type="button" class="btn btn-primary position-relative"><i class="bi bi-envelope" aria-hidden="true"></i> Inbox <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">13<span class="visually-hidden"> unread messages</span></span></button>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Inbox 13 unread messages, button"</p>6Current page in pagination
Mark the active page in words, not only by colour.
Screen reader hears: "2 (current page)"
<nav aria-label="Search results pages">
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><span class="page-link">2 <span class="visually-hidden">(current page)</span></span></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "2 (current page)"</p>7Star rating
The stars are decorative; the hidden text states the score.
Rated 4 out of 5
Screen reader hears: "Rated 4 out of 5"
<div class="text-warning fs-5">
<i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star" aria-hidden="true"></i><span class="visually-hidden">Rated 4 out of 5</span>
</div>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Rated 4 out of 5"</p>8Loading spinner
Spinners need a text alternative so people know something is happening.
Loading your orders
Screen reader hears: "Loading your orders, status"
<div class="d-flex align-items-center gap-2">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading your orders</span>
</div>
<span class="small text-body-secondary" aria-hidden="true">Please wait</span>
</div>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Loading your orders, status"</p>9Required field marker
The red asterisk is hidden from screen readers and replaced by the word required.
Screen reader hears: "Full name (required), edit text, required"
<div style="max-width:20rem">
<label class="form-label" for="hp-name-1245">Full name <span class="text-danger" aria-hidden="true">*</span><span class="visually-hidden">(required)</span></label>
<input class="form-control" id="hp-name-1245" type="text" required>
</div>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Full name (required), edit text, required"</p>10Old and new price
Struck-through prices need words to explain which price is which.
Original price: $265.19Sale price: $203.99
Screen reader hears: "Original price: $265.19 Sale price: $203.99"
<p class="fs-5 mb-0"><del class="text-body-secondary me-2"><span class="visually-hidden">Original price: </span>$265.19</del><strong><span class="visually-hidden">Sale price: </span>$203.99</strong></p>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Original price: $265.19 Sale price: $203.99"</p>11Descriptive read more links
Hidden context turns many identical "Read more" links into distinct ones.
A guide to rental management Read more about A guide to rental management
Honest ways to improve your team Read more about Honest ways to improve your team
Screen reader hears: "Read more about A guide to rental management, link"
<div class="vstack gap-2">
<div>
<strong>A guide to rental management</strong> <a href="#">Read more<span class="visually-hidden"> about A guide to rental management</span></a>
</div>
<div>
<strong>Honest ways to improve your team</strong> <a href="#">Read more<span class="visually-hidden"> about Honest ways to improve your team</span></a>
</div>
</div>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Read more about A guide to rental management, link"</p>12Progress with a hidden label
A progress bar that also announces its purpose and value.
Profile completion
Screen reader hears: "Profile completion, progress bar, 52%"
<div class="progress" role="progressbar" aria-labelledby="hp-name-1245-p" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width:52%">
</div>
</div>
<span class="visually-hidden" id="hp-name-1245-p">Profile completion</span>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Profile completion, progress bar, 52%"</p>13Custom close button
A close button drawn with an icon gets its name from hidden text.
A flexible idea helps decisions quicker and clearer with friendly support.
Screen reader hears: "Dismiss message, button"
<div class="alert alert-info d-flex align-items-center mb-0">
<span class="me-auto">A flexible idea helps decisions quicker and clearer with friendly support.</span>
<button type="button" class="btn btn-sm btn-link text-info-emphasis" data-bs-dismiss="alert"><i class="bi bi-x-lg" aria-hidden="true"></i><span class="visually-hidden">Dismiss message</span></button>
</div>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Dismiss message, button"</p>14Status dots
Colour alone is not enough: the dot gets a hidden status word.
- Online:Samir Alvarez
- Away:Owen Harlow
- Offline:Jonah Harlow
Screen reader hears: "Online: name", "Away: name", "Offline: name"
<ul class="list-unstyled vstack gap-2 mb-0">
<li class="d-flex align-items-center gap-2"><span class="d-inline-block rounded-circle bg-success" style="width:.6rem;height:.6rem"></span><span class="visually-hidden">Online:</span>Samir Alvarez</li>
<li class="d-flex align-items-center gap-2"><span class="d-inline-block rounded-circle bg-warning" style="width:.6rem;height:.6rem"></span><span class="visually-hidden">Away:</span>Owen Harlow</li>
<li class="d-flex align-items-center gap-2"><span class="d-inline-block rounded-circle bg-secondary" style="width:.6rem;height:.6rem"></span><span class="visually-hidden">Offline:</span>Jonah Harlow</li>
</ul>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Online: name", "Away: name", "Offline: name"</p>15Chart summary
A visual chart is hidden from screen readers and summarised in text instead.
Screen reader hears: "Sales grew from 25 to 87 units over three months."
<figure class="mb-0">
<div class="d-flex align-items-end gap-2 border-bottom" style="height:7rem" aria-hidden="true">
<div class="bg-primary rounded-top flex-fill" style="height:25%">
</div>
<div class="bg-primary rounded-top flex-fill" style="height:74%">
</div>
<div class="bg-primary rounded-top flex-fill" style="height:87%">
</div>
</div>
<figcaption class="visually-hidden">Sales grew from 25 to 87 units over three months.</figcaption>
</figure>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Sales grew from 25 to 87 units over three months."</p>16Social icon links
Each icon link carries the network or channel name as hidden text.
Screen reader hears: "Join our community chat, link", "Subscribe to the blog feed, link", "Email the team, link"
<div class="d-flex gap-3 fs-4">
<a href="#" class="link-secondary"><i class="bi bi-chat-dots" aria-hidden="true"></i><span class="visually-hidden">Join our community chat</span></a><a href="#" class="link-secondary"><i class="bi bi-rss" aria-hidden="true"></i><span class="visually-hidden">Subscribe to the blog feed</span></a><a href="#" class="link-secondary"><i class="bi bi-envelope" aria-hidden="true"></i><span class="visually-hidden">Email the team</span></a>
</div>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Join our community chat, link", "Subscribe to the blog feed, link", "Email the team, link"</p>17Hidden section heading
A heading that only screen readers see keeps the page outline complete.
Featured products
City loft
Family house
Studio apartment
Screen reader hears: "Featured products, heading level 2" and the section is listed as a landmark
<section aria-labelledby="hp-name-1245-h">
<h2 class="visually-hidden" id="hp-name-1245-h">Featured products</h2>
<div class="row g-2">
<div class="col-4">
<img src="../assets/img/product-1.svg" alt="City loft" class="img-fluid rounded">
<div class="small text-truncate">
City loft
</div>
</div>
<div class="col-4">
<img src="../assets/img/product-2.svg" alt="Family house" class="img-fluid rounded">
<div class="small text-truncate">
Family house
</div>
</div>
<div class="col-4">
<img src="../assets/img/product-3.svg" alt="Studio apartment" class="img-fluid rounded">
<div class="small text-truncate">
Studio apartment
</div>
</div>
</div>
</section>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Featured products, heading level 2" and the section is listed as a landmark</p>18Sortable column state
Arrows show sorting visually; hidden text states it in words.
| Date (sorted ascending) | Amount (sortable) |
|---|---|
| Apr 13, 2026 | $24.07 |
Screen reader hears: "Date (sorted ascending), link", "Amount (sortable), link"
<table class="table mb-0">
<thead>
<tr>
<th scope="col" aria-sort="ascending"><a href="#" class="link-body-emphasis text-decoration-none">Date <i class="bi bi-sort-up" aria-hidden="true"></i><span class="visually-hidden"> (sorted ascending)</span></a></th>
<th scope="col"><a href="#" class="link-body-emphasis text-decoration-none">Amount<span class="visually-hidden"> (sortable)</span></a></th>
</tr>
</thead>
<tbody>
<tr>
<td>Apr 13, 2026</td>
<td>$24.07</td>
</tr>
</tbody>
</table>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Date (sorted ascending), link", "Amount (sortable), link"</p>19Colour swatches
Swatch radio buttons show only colour; the label text is visually hidden.
Screen reader hears: "Colour, group. Midnight black, radio button, checked, 1 of 4"
<fieldset>
<legend class="small fw-semibold">Colour</legend>
<div class="d-flex gap-2">
<input type="radio" class="btn-check" name="hp-colour-1246" id="hp-colour-1246-0" checked>
<label class="btn border rounded-circle p-0 bg-dark" style="width:2rem;height:2rem" for="hp-colour-1246-0"><span class="visually-hidden">Midnight black</span></label>
<input type="radio" class="btn-check" name="hp-colour-1246" id="hp-colour-1246-1">
<label class="btn border rounded-circle p-0 bg-primary" style="width:2rem;height:2rem" for="hp-colour-1246-1"><span class="visually-hidden">Brand blue</span></label>
<input type="radio" class="btn-check" name="hp-colour-1246" id="hp-colour-1246-2">
<label class="btn border rounded-circle p-0 bg-danger" style="width:2rem;height:2rem" for="hp-colour-1246-2"><span class="visually-hidden">Ruby red</span></label>
<input type="radio" class="btn-check" name="hp-colour-1246" id="hp-colour-1246-3">
<label class="btn border rounded-circle p-0 bg-light" style="width:2rem;height:2rem" for="hp-colour-1246-3"><span class="visually-hidden">Snow white</span></label>
</div>
</fieldset>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Colour, group. Midnight black, radio button, checked, 1 of 4"</p>20Step indicator
Each step announces whether it is completed, current or still to come.
- Details (completed)
- 2Shipping (current step)
- 3Payment (not started)
Screen reader hears: "Details (completed)", "Shipping (current step)", "Payment (not started)"
<ol class="list-unstyled d-flex gap-3 mb-0">
<li class="d-flex align-items-center gap-2"><span class="badge rounded-pill text-bg-success"><i class="bi bi-check-lg" aria-hidden="true"></i></span><span>Details<span class="visually-hidden"> (completed)</span></span></li>
<li aria-current="step" class="d-flex align-items-center gap-2"><span class="badge rounded-pill text-bg-primary">2</span><span>Shipping<span class="visually-hidden"> (current step)</span></span></li>
<li class="d-flex align-items-center gap-2"><span class="badge rounded-pill text-bg-secondary">3</span><span>Payment<span class="visually-hidden"> (not started)</span></span></li>
</ol>
<p class="hp-sr small mt-3 mb-0"><i class="bi bi-ear" aria-hidden="true"></i> <strong>Screen reader hears:</strong> "Details (completed)", "Shipping (current step)", "Payment (not started)"</p>