Member Avatar for kyllle 
<ul id="main_nav">
  <li><a href=""><img src="link_1.jpg">This is link 1</a></li>
</ul>

Basically link_1.jpg is a button that I want to use to replace 'This is link 1' but what css command do I give to 'This is link 1' to make it disappear from the webpage im designing?

  • 3 Contributors
  • 4 Replies
  • 78 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: keep a real textual label for accessibility and hide it visually instead of removing it. correctly named image-replacement techniques, but using display:none (or visibility:hidden) will also hide the text from screen readers. 's suggestion to use an <img> with a proper alt is also valid — the alt text is the canonical accessible name for an image link. Avoid color-matching hacks (making text the same color as the background); they are brittle and fail many accessibility checks.

A simple, robust pattern is to give the anchor an accessible name (either a visible child or an aria-label) and use CSS to visually hide the text while leaving it in the accessibility tree. Example visually-hidden class to reuse site-wide:

.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;
}

You can then present the graphic (background-image or inline SVG) for sighted users while preserving the readable text for assistive tech via an aria-label or a hidden child element. Use alt on real <img> elements when the image conveys the link text. Do not use display:none to hide the label.

Authoritative references: guidance on the alt attribute (MDN: img@alt) and on CSS techniques for hiding content accessibly (WebAIM: Hiding Content).

Recommended Answers

All 4 Replies

Member Avatar for omol

There are many ways of image replacement. My favorite way:

Your html with a couple of bits added / removed.

<ul id="main_nav">
<li><a href="#"  class="link1"><span>This is link 1</span></a></li>
</ul>

And the css to put in your css file or between style tags.

#main_nav .link1 { 
background-image("link_1.jpg"); 
no-repeat; 
width: 80px; // Replace with image width
height: 50px; // Replace with image height
}

#main_nav span {
display: none;
}

This is the Fahrner Image Replacement method. (FIR)

Although beware of accessibilty issues this may cause, screen readers will not pick up the text so if your designing with a potetial audiance of blind / sight impared viewers in mind do not use this method.

Member Avatar for MidiMagic

It's easy, even with accessibility:

<ul id="main_nav">
  <li>
    <a href=""><img src="link_1.jpg" alt="This is link 1" /></a>
  </li>
</ul>
Member Avatar for omol

Not many screen readers actually use the alt tag because the alt tag was at one point massivly missused for seo.

Member Avatar for MidiMagic

That is NOT a good reason to disable a function. The W3C Requires the alt attribute for accessibility.

The only other thing I can think of is a kludge:

Make the color of the text and the background the same color.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.