Free tools Windows power users keep installed
One-click scans. No signup required.
If a rendered title should disappear completely, set display: none. If it should be invisible but keep its layout space, use visibility: hidden. If sighted users should not see the title while screen-reader users still need it, use a visually-hidden utility instead. These choices produce different layout and accessibility results.
First, identify what “title” means
This answer concerns visible text such as an h1, heading, or element whose class is title. CSS can hide that rendered element. An HTML title attribute is different metadata; CSS does not remove the attribute itself. Change or remove that attribute in the HTML or application code when that is the target.
As an Amazon Associate I earn from qualifying purchases.
Hide the title completely with display: none
.title {
display: none;
}display: none removes the element from layout, so surrounding content closes the gap. In documented behavior it also removes the element and its descendants from the accessibility tree, so screen-reading technology generally will not announce it. An exception can apply when hidden content is referenced by a visible element through aria-describedby or aria-labelledby.
Use this when the title is genuinely unnecessary for every user, not merely inconvenient to see.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Hide it while preserving its space with visibility: hidden
.title {
visibility: hidden;
}This makes the title invisible but leaves its layout space in place. MDN documents that the hidden element and its descendants are also removed from the accessibility tree. Choose it only when retaining the blank space is part of the design.
Keep the title for screen readers with a visually-hidden pattern
A meaningful heading can communicate page structure to screen-reader users even when a visual design does not show it. Do not use display: none or visibility: hidden for that goal. If the project already has a .visually-hidden or .sr-only utility, use that established class. A common pattern is:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}Apply it to meaningful text that should remain available to assistive technology:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →<h1 class="visually-hidden">Account settings</h1>Keep the implementation consistent with your project’s accessibility utilities, and ensure that focusable controls are not made impossible to see when they receive focus. W3C’s C7 technique likewise avoids display: none and visibility: hidden when text must remain available to assistive technology, while cautioning that hidden link text can become overly verbose for some screen-reader users.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Which method should you use?
| Method | Visible? | Layout space? | Available to screen readers? | Best fit |
|---|---|---|---|---|
display: none |
No | No | Generally no | The title is not needed by anyone |
visibility: hidden |
No | Yes | No | The title is hidden but its space must remain |
| Visually-hidden CSS | No | Usually no visible space | Yes, when correctly implemented | The title supports structure or context for assistive-technology users |
Headings need special care
Non-empty headings help screen-reader users understand page structure. If an h1 or other heading conveys the page’s structure, hiding it with display: none or aria-hidden="true" removes that benefit. Prefer a visible heading, or a properly implemented visually-hidden heading when the design requires no visible text.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
