HTMLの画像にALT属性を使用する方法

Alt属性は、画像の代替テキストを提供し、アクセシビリティ、SEO、および画像読み込みフォールバックを支援します。 2。「Image123.jpg」のような曖昧な用語ではなく、「カフェでコーヒーを持っている笑顔の女性」など、画像の内容または機能を伝える、説明的で簡潔なAltテキストを書きます。 3.ボタンやリンクなどの機能画像については、拡大ガラスアイコンの「検索」などのアクションを説明してください。 4。装飾的な画像に空のaltテキスト（alt = ""）を使用して、スクリーンリーダーがスキップします。 5.スクリーンリーダーがすでに画像として発表しているため、「イメージ」のような冗長なフレーズを避けてください。 6. CSSの背景画像を除き、アクセシビリティコンプライアンスと有効なHTMLのすべての<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175537626378684.jpeg" class="lazy" alt="HTMLの画像にALT属性を使用する方法" >タグにALT属性を常に含めてください。 7。チャートのような複雑な画像には、Aria-DescribedByまたは近くのキャプションを介して、短いALTテキストと拡張された説明が必要です。 8。例を示しています：ロゴの「会社XYZロゴ」、「白いソールを備えた青いアスレチックスニーカー」、製品の「ショッピングカートの表示」、すべてのユーザーがコンテンツに効果的にアクセスできるようにします。

HTMLのalt属性は、 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175537626378684.jpeg" class="lazy" alt="HTMLの画像にALT属性を使用する方法" >タグ内で使用され、画像を説明する代替テキストを提供します。アクセシビリティ、SEO、および画像がロードできない状況に不可欠です。効果的に使用する方法は次のとおりです。

Alt属性が何をするか

alt属性は、画像のテキストの代替品を指定します。このテキストは、画像がロードされず、視覚障害のあるユーザーのスクリーンリーダーで声を出して読み上げられ、検索エンジンが画像コンテンツを理解するために使用した場合に表示されます。

例：

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175537626648438.jpeg"  class="lazy"  src = "cat.jpg" alt = "窓辺に座っている黒い猫">

この場合、画像がロードされない場合、ユーザーは画像の代わりに「窓辺に座っている黒い猫」（ブラウザに応じて）に表示され、スクリーンリーダーはその説明を発表します。

効果的なALTテキストを書く方法

• 記述的だが簡潔である
  過度に言葉遣いなくては、画像をはっきりと説明してください。コンテキストで画像の目的に焦点を当てます。

  

  良い： alt="A smiling woman holding a cup of coffee in a café"
  悪い： alt="image123.jpg"またはalt="woman coffee"

• 画像の関数を伝えます
  画像がボタンまたはリンクである場合、ALTテキストは、クリックしたときに何が起こるかを説明する必要があります。

  例：

   <a href = "/search">
    <img src = "magnifice-glass.png" alt = "search">
  </a>

  ここで、「検索」は、外観だけでなく、アクションを示します。

• 装飾的な画像には空のaltを使用します
  画像が純粋に装飾的な場合（たとえば、仕切りや背景グラフィック）、 alt=""を使用して、スクリーンリーダーがスキップします。

  例：

   <img src = "divider-line.png" alt = "">

  空のままにしておくと、画像を無視するための支援技術がわかります。

• 「…」や「写真の画像」から始めないでください
  スクリーンリーダーは、それが画像であることをすでに発表しています。それが示すものを説明してください。

  代わりに： alt="Image of a red bicycle"
  使用： alt="A red bicycle leaning against a wall"

ALTテキストをいつ含めるか

• すべての<img alt="HTMLの画像にALT属性を使用する方法" >タグにalt属性を常に含めてください。アクセシビリティコンプライアンス（WCAGなど）および有効なHTMLに必要です。
• 何を書くべきかわからない場合は、尋ねてください：この画像はどのような情報を伝えますか？削除された場合、何が失われますか？

例外：

• CSSを介して追加された背景画像は、HTMLコンテンツに含まれていないため、ALTテキストは必要ありません。
• チャートやグラフのような複雑な画像はaria-describedbyまたは画像の近くのキャプションを使用して長い説明が必要になる場合がありますが、それでも短いaltが必要です。

実際の例

コンテキスト付きのシンプルな画像：

 <img src = "logo.png" alt = "company xyz logo">

オンラインストアの製品画像：

 <img src = "sneakers-blue.jpg" alt = "白いsoleと青いアスレチックスニーカー">

関数画像（リンクとしてのアイコン）：

 <a href = "/cart">
  <img src = "Shopping-Cart-Icon.png" alt = "ショッピングカートを見る">
</a>

装飾的なイメージ：

 <img src = "Fancy-Corner-decoration.png" alt = "">

基本的に、 alt属性は、有益、機能的、または装飾的であろうと、画像の目的を反映する必要があります。それを正しくすることで、誰もがあなたのコンテンツにアクセスするのに役立ちます。

以上がHTMLの画像にALT属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。