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 |
|---|---|---|
| Amara Varga | Project Manager | |
| Tariq Brennan | Project Manager |
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>Amara Varga</td>
<td>Project Manager</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 Amara Varga</span></button></td>
</tr>
<tr>
<td>Tariq Brennan</td>
<td>Project Manager</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 Tariq Brennan</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 16 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">16<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 16 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: $31.20Sale price: $24.00
Screen reader hears: "Original price: $31.20 Sale price: $24.00"
<p class="fs-5 mb-0"><del class="text-body-secondary me-2"><span class="visually-hidden">Original price: </span>$31.20</del><strong><span class="visually-hidden">Sale price: </span>$24.00</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: $31.20 Sale price: $24.00"</p>11Descriptive read more links
Hidden context turns many identical "Read more" links into distinct ones.
What our customers asked us most Read more about What our customers asked us most
Looking back at a busy season Read more about Looking back at a busy season
Screen reader hears: "Read more about What our customers asked us most, link"
<div class="vstack gap-2">
<div>
<strong>What our customers asked us most</strong> <a href="#">Read more<span class="visually-hidden"> about What our customers asked us most</span></a>
</div>
<div>
<strong>Looking back at a busy season</strong> <a href="#">Read more<span class="visually-hidden"> about Looking back at a busy season</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 What our customers asked us most, 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, 61%"
<div class="progress" role="progressbar" aria-labelledby="hp-name-1245-p" aria-valuenow="61" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width:61%">
</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, 61%"</p>13Custom close button
A close button drawn with an icon gets its name from hidden text.
Start free, upgrade when you grow and cancel any time with one click.
Screen reader hears: "Dismiss message, button"
<div class="alert alert-info d-flex align-items-center mb-0">
<span class="me-auto">Start free, upgrade when you grow and cancel any time with one click.</span>
<button type="button" class="btn btn-sm btn-link text-info-emphasis" data-ui-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:Theo Duarte
- Away:Noah Ashford
- Offline:Jonah Sato
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>Theo Duarte</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>Noah Ashford</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 Sato</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 44 to 85 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:44%">
</div>
<div class="bg-primary rounded-top flex-fill" style="height:65%">
</div>
<div class="bg-primary rounded-top flex-fill" style="height:85%">
</div>
</div>
<figcaption class="visually-hidden">Sales grew from 44 to 85 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 44 to 85 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
Priority support
Sales pipeline add-on
Enterprise suite
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-7.svg" alt="Priority support" class="img-fluid rounded">
<div class="small text-truncate">
Priority support
</div>
</div>
<div class="col-4">
<img src="../assets/img/product-10.svg" alt="Sales pipeline add-on" class="img-fluid rounded">
<div class="small text-truncate">
Sales pipeline add-on
</div>
</div>
<div class="col-4">
<img src="../assets/img/product-4.svg" alt="Enterprise suite" class="img-fluid rounded">
<div class="small text-truncate">
Enterprise suite
</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) |
|---|---|
| Nov 14, 2025 | $302.95 |
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>Nov 14, 2025</td>
<td>$302.95</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>