Hiding Labels and Sub-Headers
[Editor’s note: see more recent article by Dennis, When and How to Visually Hide Content]
There are certain instances when a label or header should be used, but wouldn’t necessarily need to be seen in the layout, such as a label for a phone number and a header for a menu. Dennis discusses when and how this would be done.
Download Web Axe Episode 22 (Hiding Labels and Sub-Headers)
The CSS:
.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
The XHTML:
Links:
- Invisible Content Just for Screen Reader Users (WebAIM)
- Creating Invisible labels for form elements (WCAG 2.0)
- Advanced accessibility techniques – Hidden Text (WebCredible)
2 comments