web-dev-qa-db-ja.com

重複する画像alt属性が多すぎます。何をすべきか？

テーブルがあります。そして、以下でわかるように、私は多くの重複するalt属性を実行しています。

これを防ぐための最良の方法は何ですか？

<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>
seohtmlimageshtml5penalty
6
Kid Diamond

画像が純粋に装飾的な場合、alt属性が空白になるのは 完全に有効 です。

それ以外の場合、sameイメージを何度も出力する場合、それらのすべてでalt属性が同じであることは理にかなっています。それに対する否定的なSEOの利点はなく、クロス/ティック画像は画像検索でランク付けされることはまずありません。

特に画像が装飾的な場合、1つの代替ソリューションは、Martijnが示唆するようにCSSの「スプライト」を使用することです。

10
DisgruntledGoat

まず、より良いalt属性を使用してください。

真剣に、「クロス」と「チェックマーク」はhorriblealt属性です。理由を確認するには、テキスト専用ブラウザでページを表示してみてください。 HTMLをそのまま使用すると、次のように表示されます。

                              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

ひどいですよね？今、あなたが盲目で、スクリーンリーダーによって読み上げられるそのテーブルを聞く必要があると想像してください：「cross ... cross ... checkmark ... cross ... cross ... checkmark ...」

alt属性の本当の目的は、テキストのみalternativeとしてではなく、describe画像ではないことです。この特定のケースでは、修正は実際にはかなり簡単です。アイコンが実際に何であるかを少し考えてみてくださいmean。そのとおり;十字アイコンは"No"を意味し、チェックマークは"Yes"を意味します。したがって、HTMLを次のように変更するだけです。

<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>

そして、あなたのテーブルは突然テキストとしてより良く見えます：

                              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
10
Ilmari Karonen

tdから画像を削除し、代わりにtdに追加するだけです。この例では、実際に画像は必要ありません。コンテンツ値やSEO値はありません。そのため、これを行うことができます：

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

これには別の利点があります。ページ内の要素の量を減らすことで、ページを少し速くすることができます。また、cross2.pngに変更する場合は、1つのCSS値を変更するだけです。

要素をクリックすることを望んでいる場合は画像を削除しました（tdは問題なく動作します）、spanを使用して常にclassに変更できます。原則。

注：このトリックは、画像にSEO値がないため、ここで行うことができます。画像を置き換えることにより、altとタイトルが与えるわずかなSEOをドロップするため、SEOが重要な画像に対してこれを行うことはできませんこれは、パッケージにその機能が含まれているかどうかを示すためにのみ必要です

オフトピック：

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

これにより、各tdにクラスを追加する必要がなくなり、コードがクリーンになります。
-IE8以下では動作しません。
-nth-childの場合は、#benefits tr>td:nth-child(1)に変更する必要がある場合があります
-「クロス」はtext-alignとまったく同じ方法で行うことができます

6
Martijn

Altタグが重複していても問題はありません。スクリーンリーダーや画像を無効にしているユーザー向けに画像を説明するのが仕事です。したがって、ページ上に何度も画像がある場合は、altタグが重複している可能性があります-意味的には正しいです。

ただし、画像ごとに異なる方法で説明できることをすべて言ってください。

<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>

理にかなっていることを願っています。重要なことは、alt-tagsは、スクリーンリーダーを使用する視覚障害者や、ブラウザで画像を無効にしているユーザー向けの画像を記述するためのものです。

6
Abu Nooh