Too many duplicate image alt attributes. What to do?

Question

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 but still have valid HTML5 code?

<table id="benefits">
    <thead>
        <tr>
            <th></th>
            <th>Unregistered</th>
            <th><b>Basic</b></th>
            <th><b style="color: #a2cb47">Premium</b></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td class="center">Free</td>
            <td class="center">Free</td>
            <td class="center"><b>$9.99/mo</b></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Complete ad-free experience</td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
        </tr>
        <tr>
            <td>Unlimited parallel downloads</td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
        </tr>
        <tr>
            <td>Direct downloads</td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
        </tr>
        <tr>
            <td>Maximum file size</td>
            <td class="center">100 MB</td>
            <td class="center">1 GB</td>
            <td class="center">10 GB</td>
        </tr>
        <tr>
            <td>Your files never expire</td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
        </tr>
        <tr>
            <td>Intuitive file manager</td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/tick.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
        </tr>
        <tr>
            <td>Personal storage</td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center">10 GB</td>
            <td class="center">1 TB</td>
        </tr>
        <tr>
            <td>Password protect your files</td>
            <td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
            <td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
            <td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
        </tr>
        <tr>
            <td>No reCAPTCHA codes</td>
            <td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
            <td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
            <td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
        </tr>
    </tbody>
</table>

Answer 1

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.

Answer 2

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       $9.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     $9.99/mo

Answer 3

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.

Answer 4

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