Welcome to WebmasterWorld Guest from 100.25.214.89

Forum Moderators: phranque

Sprite Empty Link Error

     
12:54 am on May 21, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


I’m receiving four errors from Wave (web accessibility evaluation tool) for my four sprites that link to different social pages. The errors say that the link is empty because it contains no text. Each link has a title. For example:

<a href=“example.com” title=“Example"><span class="spriteexample-32"></span></a>&nbsp;

How can I fix this? Thanks!
1:29 am on May 21, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15646
votes: 797


The errors say that the link is empty because it contains no text.
Well, it's empty because it contains nothing, whether text or image. Sprites don't count as images; they're background.

A title isn't sufficient, because that only shows up in response to a targeted action on the user's part. They probably want an alt--which is a bit tricky since there's nothing to attach the alt to.

It's better to approach the issue from the other side. How would your visually impaired users find, let alone interact with, the link? No use putting in invisible text, since screen readers very properly ignore "display: none". I don't know if text with color set to "transparent" would work. Another option worth trying is an image consisting purely of a single-pixel transparent gif, inside the span (which I assume has a size, defined elsewhere). It won't look any different to sighted viewers, but it gives you something to attach an alt to.
6:57 am on May 27, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1096
votes: 103


It's been awhile since I messed with this, but I THINK that what I did was insert a "loading" image. It cached after the first time so it showed up on every load, then was overwritten by the background sprite.

Something like:

<span class="spriteexample-32">
<img src="loading.gif">
</span>


My apologies if I got that backwards, it's been awhile since I did it.
3:20 pm on June 3, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


I tried this for each sprite:

<a href="https://example" title="Example"><span class="spriteblogger-32"><img alt="Blogger" src="../javascripts/images/catalog/grey-sprite.png"></span>

grey-sprite.png is a 1px x 1px transparent png that overlays the sprite background images.

It looks/works fine when previewed in a local host but when published I see the first three letters of the alt text (in this case “Blo”) and and a picture of a page on each sprite.

Sorry for the delay, I haven’t been able to get back to this. Thanks for your help!
3:33 pm on June 3, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4299
votes: 290


Is the image path the same on your local views as it is on your domain? Is the path shown the actual path?
4:02 pm on June 3, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


Yes.
4:56 pm on June 3, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4299
votes: 290


Maybe placing a copy of "grey-sprite.png" in root to use a local image to simplify the path and then change to
<img alt="Blogger" src="/grey-sprite.png">
for a test? Seeing the "alt" text indicates that the actual image is not where it is being called for - or at least it is not loading for some reason. Making it local eliminates one possible cause for that.
5:40 pm on June 3, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


Fixed! Your response reminded me that I forgot to publish my images folder. The page now receives 0 errors when tested in Wave. Thanks again!
8:32 pm on June 3, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9766
votes: 935


Whee! I LOVE happy endings! :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members