ウェブサイト画像用の大文字テキストの作成

代替テキストによるアクセシビリティとページコンテンツの改善

今日のWeb上のほとんどのWebサイトを見てみると、彼らが共通して持っているものの1つがイメージであることがわかります。 画像は、視覚的な感覚を加えたり、アイデアを説明したり、ページ全体のコンテンツに追加したりするために、ウェブサイト上で使用できます。 適切な イメージ選択 し、ウェブ配信用に適切に準備することに加えて、サイトのすべてのイメージが適切にALTテキストを使用することは、これらのイメージをWebで適切に使用する上で非常に重要です。

代替テキストとは

代替テキストは、画像を表示できないテキストブラウザやその他のWebユーザーエージェントが使用する代替テキストです。 これは、イメージタグで必要とされる唯一の属性の1つです。 効果的な代替テキストを書くことで、スクリーンリーダーやその他の支援デバイスを使用してサイトにアクセスしているユーザーがWebページにアクセスできるようにすることができます。 何らかの理由(間違った経路、伝送障害など)で読み込まれない場合、画像の代わりに何かが表示されるようにします。 これはAltテキストの本来の目的ですが、このコンテンツは、検索エンジンがあなたに不利な立場にならないようなSEOフレンドリなテキストを追加するための場所を提供します。

Alt Textはイメージ内のテキストを繰り返す必要があります

テキストが入っている画像は、そのテキストを代替テキストとして持つべきです。 あなたは代替テキストに他の言葉を置くことができますが、少なくともそれは画像と同じものを言うべきです。 たとえば、画像のロゴがある場合、Altテキストはグラフィックロゴによって書き出された会社名を繰り返す必要があります。

また、ロゴなどの画像もテキストを意味することを覚えておいてください。たとえば、About.comのWebサイトの赤いボールのアイコンが表示されている場合、「About.com」を意味します。 だから、そのアイコンの代わりのテキストは "会社のロゴ"だけでなく、 "About.com"と言うことができます。

テキストを短く保つ

代替テキストが長くなればなるほど、テキストブラウザで読みにくくなります。 代替テキストの長い文章を書こうと思うかもしれません(通常、これはタグでキーワードを埋めようとしているために行われます)が、Altタグを短くするとページが小さくなり、ページサイズが小さくなります。

代替テキストの経験則は、合計で5〜15語の間にすることです。

あなたのSEOキーワードをAltタグで使用する

多くの場合、代替テキストの目的は検索エンジンのキーワードを置くことであると誤解しています。 はい、それはあなたが使うことができる利点ですが、追加したテキストがaltタグの本当の目的に合っている場合にのみ、人がそれを見ることができないとイメージが何であるかを説明するインテリジェントなテキストを表示する必要があります。

さて、AltのテキストはSEOツールとして意味されていないとは言えませんが、このテキストでキーワードを使用することはできません。 代替テキストは重要で画像に必要なので、検索エンジンは、追加するコンテンツが意味をなさない場合、キーワードを置くことに不利になることはありません。 あなたの最優先事項はあなたの読者にあることを覚えておいてください。 代替テキストのキーワードスパムが検出され、スパマーを防ぐために検索エンジンが常にルールを変更します。

経験則として、検索エンジンのキーワードをイメージの説明に合わせて使用​​し、代替テキストに複数のキーワードを使用しないでください。

あなたのテキストを意味を残す

代替テキストのポイントは、読者のための画像を定義することです。 多くのWeb開発者は、イメージサイズ、イメージファイル名などを含む代替テキストを自分自身で使用しています。 これはあなたにとって役に立つかもしれませんが、あなたの読者には何もしませんので、これらのタグから省略する必要があります。

空白の代替テキストはアイコンと箇条書きにのみ使用する

弾丸やシンプルなアイコンなど、有用な記述テキストを持たない画像を定期的に使用します。 これらの画像を使用する最良の方法は、代替テキストが不要なCSSです。 しかし、絶対にHTMLに入れなければならない場合は、ブランクのalt属性を使用してください。

箇条書きを表すためにアスタリスク(*)のような文字を挿入するのが魅力的かもしれませんが、これを空白のままにしておくともっと混乱することがあります。 また、テキスト「箇条書き」を置くと、テキストブラウザーでさらに奇妙にレンダリングされます。

Jennifer Kryninのオリジナル記事。 ジェレミージラール編集:3/3/17