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
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):
position: absolutea tag containing the text off the page
text-indentto a very negative number
line-heightto a very big number
These all push the text outside of the viewing area. The only problem is if used within a link, the browsers’ default styles draw aall 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