テーブルがあります。そして、以下でわかるように、私は多くの重複する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>
画像が純粋に装飾的な場合、alt属性が空白になるのは 完全に有効 です。
それ以外の場合、sameイメージを何度も出力する場合、それらのすべてでalt属性が同じであることは理にかなっています。それに対する否定的なSEOの利点はなく、クロス/ティック画像は画像検索でランク付けされることはまずありません。
特に画像が装飾的な場合、1つの代替ソリューションは、Martijnが示唆するようにCSSの「スプライト」を使用することです。
まず、より良い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
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
とまったく同じ方法で行うことができます
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は、スクリーンリーダーを使用する視覚障害者や、ブラウザで画像を無効にしているユーザー向けの画像を記述するためのものです。