Hide element's text with CSS

Question

Im trying to hide text (that I use for screenreaders) in an a tag and instead use a background icon.

HTML

<a href="#"><span>Search</span></a>

CSS

span {
    display: none;
}
a {
    display: inline-block;
    width: 17px;
    height: 16px;
    background: url(https://i.stack.imgur.com/5c3zk.png);
}

Is there a way to do the same without span?

I guess you add title to your anchor tag and your screen reader would read the same. For almost all the elements you can add this attribute and make it readable. — Akshay Khandelwal, Feb 26 '13 at 17:49

score 3 · Accepted Answer · answered Feb 26 '13 at 17:44

3

You can indent the text so it's completely off the screen:

text-indent:-5000px;

answered Feb 26 '13 at 17:44

Tom Walters

15,366
7
57
74

score 2 · Answer 2 · answered Feb 26 '13 at 17:44

I don't have a screenreader software but if I guess right this should work:

<a href="#"><img src="https://i.stack.imgur.com/5c3zk.png" alt="Search" /></a>

With this css rule:

a img {
    border:0;
}

Basically the alt attribute is the alternative text, which should be used in case of a screen reader.

score 2 · Answer 3 · edited May 23 '17 at 12:06

You should check: Hide text using css

But it goes like this:

HTML:

<a href="#">Search</a>

CSS:

a {
    text-indent: -9999px;
    white-space: nowrap;  
    outline: none;

    display: inline-block;
    width: 17px;
    height: 16px;
    background: url(https://i.stack.imgur.com/5c3zk.png);
}

Here is the jsFiddle (i added background-color:red; because the image wasn't loading.)

Hope it helps.
Cheers.

score 1 · Answer 4 · answered Feb 26 '13 at 17:50

html

<a class="my-title" href="#">Search</a>

css

a.my-title { text-indent:-9999px }

or

html

<a class="my-title" title="Search" href="#"></a>

css

a.my-title { display:block;width:123px; all-your-styling:...; }

Screen reader will catch the title attribute from your anchor.

Hide element's text with CSS

4 Answers4