: Too many duplicate image alt attributes. What to do? I've got a table. And as you can see below I've got a lot of duplicate alt attributes going on. What is the best way to prevent this

@Rambettina238

First of all, use better alt attributes.

Seriously, "Cross" and "Checkmark" are horrible alt attributes. To see why, try viewing your page in a text-only browser. With your HTML as it is, you'll see something like:

Unregistered Basic Premium
-------------------------------------------------------------------
Complete ad-free experience Cross Cross Checkmark
Unlimited parallel downloads Cross Cross Checkmark
Direct downloads Cross Cross Checkmark
Maximum file size 100 MB 1 GB 10 GB
Your files never expire Cross Cross Checkmark
Intuitive file manager Cross Cross Checkmark
Personal storage Cross 10 GB 1 TB
Password protect your files Checkmark Checkmark Checkmark
No reCAPTCHA codes Cross Checkmark Checkmark
-------------------------------------------------------------------
Free Free .99/mo


That's awful, right? Now imagine you're blind, and have to listen to that table being read aloud to you by a screen reader: "cross... cross... checkmark... cross... cross... checkmark..."

The real purpose of an alt attribute is to serve as a text-only alternative to the image, not to describe the image. In this particular case, fixing it is actually rather simple: just think a bit about what your icons actually mean. That's right; the cross icon means "No", and the checkmark means "Yes". So just change your HTML to:

<td class="center"><img src="/images/cross.png" alt="No" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Yes" height="15"></td>


and your table suddenly looks a lot better as text:

Unregistered Basic Premium
----------------------------------------------------------------
Complete ad-free experience No No Yes
Unlimited parallel downloads No No Yes
Direct downloads No No Yes
Maximum file size 100 MB 1 GB 10 GB
Your files never expire No No Yes
Intuitive file manager No No Yes
Personal storage No 10 GB 1 TB
Password protect your files Yes Yes Yes
No reCAPTCHA codes No Yes Yes
-----------------------------------------------------------------
Free Free .99/mo

Vote Up Vote Down

@Cofer257

It is perfectly valid for the alt attribute to be blank, if the images are purely decorational.

Otherwise, if you are outputting the same image over and over then it makes sense that the alt attribute be the same for all of them. There is no negative SEO benefit to that, and your cross/tick images are unlikely to rank in image searches anyway.

One alternate solution, especially if the images are decorational, is to use CSS 'sprites' as Martijn suggests.

Vote Up Vote Down

@Smith883

There is nothing wrong with having duplicate alt tags as its job is to describe the images for screen readers and users who have images disabled. So if you have the images on the page many times then it is likely you will have duplicate alt tags - it is semantically correct.

Saying all that you could however describe your images differently for each one e.g.

<td>Your files never expire</td>
<td class="center"><img src="/images/cross.png" alt="Cross for files expired 1" height="15"></td>
<td class="center"><img src="/images/cross.png" alt="Cross for files expired 2" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark for files expired" height="15"></td>


Hope that makes sense, the key thing is that alt-tags are for describing images for users who may be blind people who use screen readers or those who have images disabled on their browsers among others.

Vote Up Vote Down

@YK1175434

You can remove the image from the td and just add it to the td instead. In your example you don't actually need the image, it has no content value, or SEO value. Because of that, you can do this:

<td class="center Crossed" title="Cross"></td>
.Cross{
background: url('/images/cross.png') no-repeat center center;
height: 15px;
}


This has another advantage, you decrease the amount of elements in a page, which could make it a tiny bit faster. Also, if you want it to change to cross2.png, all you have to do is change 1 CSS value.

I've remove the image, if you persé want an element to click on (the td works fine for that), you could always change it to a span with the class, same priciple.

Note: This trick can be done here, because the images have no SEO value. By replacing the images, you drop the tiny amount of SEO the alt and title give, so this can not be done for SEO-important images. You only need this to indicate wether your packages have or haven't got that feature included



Offtopic:
#benefits td{
text-align: center;
} #benefits td:nth-child(1){
text-align: left;
}


That would remove the need to add a class in each td, thus cleaning your code.
- Does not work in IE8 and below.
- You might need to change it to #benefits tr>td:nth-child(1) for the nth-child
- You can do the 'cross' the exact same way as the text-align

Vote Up Vote Down