A new blog, and how to hide text with CSS

February 8th, 2009

What’s this, another blog? Just what the Internet needs! Please forgive me while I create a decent theme.

In the mean time here’s something that’s useful: How to hide text using CSS while maintaining accessibility . This is something I come across quite frequently: a design specifies that there should be a lovely header image with a bit of fantastically inaccessible text. So the text goes in the markup and we use CSS backgrounds to replace it. The words need to go somewhere, and we can’t <span> and display:none it, or screen readers ignore it, leaving us back where we started! We need to use some other CSS properties.

There are several ways to move the text off the bounds of a page (and probably many more than this):

These all push the text outside of the viewing area. The only problem is if used within a link, the browsers’ default styles draw a dotted line all the way around the link element, making the dotted box extend off the page. A small price to pay for accessibility in my opinion.


Leave a Comment

Comments

Leave a Reply