Member Avatar for Cerberus

I have a navigation system with rollover effects using css. all effects are in the same gif image and depending on the state (mouse over, selected, mouse out) a different section of the image is shown.

Because the image is only referred to in the css file and a reference made to the class for the style rules in the <a> tag in the html script i was wondering how i can implement alternative text for each link.

Any suggestions?

  • 3 Contributors
  • 3 Replies
  • 98 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Cerberus

Dani AI

Generated

asked about providing "alt" text for navigation drawn from a CSS sprite. and suggested using the title attribute, but a better, more reliable approach is to give each link a proper accessible name (visible text or a hidden-but-accessible text node) and to make sure keyboard focus shows the same visual state as hover.

Include the link text in the markup and hide it visually (not with display:none) so assistive tech can read it. Example pattern:

<a class="nav-item" href="/about">
  <span class="sr-only">About</span>
</a>
.nav-item {
  display: inline-block;
  width: 120px;
  height: 40px;
  background: url("nav-sprite.png") 0 0 no-repeat;
  text-decoration: none;
}

.nav-item:hover,
.nav-item:focus { background-position: 0 -40px; outline: none; }

/* accessible hide (screen-reader-only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

If markup cannot contain text (rare), use aria-label as a secondary option, but prefer native text where possible. Also ensure :focus mirrors :hover so keyboard users get the same feedback. The alt attribute applies only to <img>; CSS background images have no alt text and rely on DOM text/ARIA for semantics. For accessibility references and guidance see MDN on the title global attribute and on aria-label, and the W3C accessible name computation documentation (MDN title, MDN aria-label, W3C Accessible Name and Description).

Recommended Answers

All 3 Replies

Member Avatar for srdubey

I think you have to use title tag for alternative text.

e.g. <a href="#" title="Junior Poster"></a>

this is the simple solution.

Member Avatar for cereal

And it's also the only accessible way to do it.

Member Avatar for Cerberus

Thanks you for the replies. I'll add title attributes.

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.