Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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>
share|improve this question
5  
Bit of a pet peeve of mine, but attributes are not tags. –  Mr Lister Apr 17 at 13:51
    
I just noticed you have a`<tfoot>` before the body, not really the correct order –  Martijn Apr 17 at 14:28
1  
@Martijn Wrong; that is the correct order. –  Mr Lister Apr 17 at 15:18
    
It indeed is in the correct order. –  Kid Diamond Apr 17 at 16:15
1  
I stand corrected: stackoverflow.com/questions/2053925/… –  Martijn Apr 17 at 16:33
add comment

4 Answers 4

up vote 10 down vote accepted

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.

share|improve this answer
add comment

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
share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
2  
Okay, I will consider this. Isn't the downside that screen readers will not display anything this way? –  Kid Diamond Apr 17 at 10:15
1  
I did not take that into account, but do you want screenreaders to say "cross" a hundred times? Also, are screenreaders your target audiance? –  Martijn Apr 17 at 10:16
3  
This is very bad advice, as it reduces accessibility. There is no way to specify alternate text for a background image. –  Jukka K. Korpela Apr 17 at 12:18
    
I agree, hence the note above the line. However, when you check out the code, you'll see it's not the image that has any value, nor SEO value. You don't need any alt for this, at all. So it's not bad advice in this case –  Martijn Apr 17 at 13:01
3  
The images do have value in this case. The whole point of the table is to show 'yes' or 'no' values as part of a package comparison. With no images or alt text the content won't make any sense. –  Tim Fountain Apr 17 at 13:08
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.