0Pricing
Web Accessibility Academy · レッスン

ピクセルではなく目的を伝えるaltを書く

文脈における画像の意味を説明します。

「ピクセルではなく目的を伝えるaltを書く」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Describe Meaning, Not Looks

Good alt text describes what an image means in context, not a pixel-by-pixel account of every color and shape.

Purpose Over Pixels

Ask why the image is here. The answer is its purpose, and your alt text should deliver exactly that, nothing more.

Skip Image of

Do not start with image of or photo of. Screen readers already announce it is an image, so those words just waste time.

<img src="cat.jpg" alt="A tabby cat asleep on a keyboard">

Keep It Tight

Aim for a short, complete phrase, usually under about 125 characters. If you need more, the image may be complex.

Context Changes Everything

The same dog photo might be a breed example or a happy-customer story. Let the surrounding context shape your words.

Images That Are Links

When an image is the only thing inside a link, its alt must describe the link destination, not just the picture.

<a href="/home"><img src="logo.svg" alt="Acme home"></a>

Images of Text

If a graphic contains words, your alt text must include all of that text so nothing is lost to non-sighted users.

Do Not Repeat Nearby Text

If a caption right next to the image already says it, an empty alt avoids making screen readers hear it twice.

Write for Equivalence

Imagine reading your alt text aloud to someone on the phone. If they get the same point, you achieved true equivalence.

Avoid Keyword Stuffing

Alt text is not an SEO dumping ground. Cramming in keywords hurts real users and is exactly what good alt avoids.

Punctuation Helps Pacing

End alt text with a period. That small punctuation gives the screen reader a natural pause before moving on.

Quick Check

Pick the strongest alt text below.

Recap

Great progress! Strong alt text captures purpose in a tight phrase, skips image of, respects context, and never stuffs keywords.

よくある質問

「ピクセルではなく目的を伝えるaltを書く」レッスンは無料ですか?

はい。「ピクセルではなく目的を伝えるaltを書く」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「ピクセルではなく目的を伝えるaltを書く」で何を学びますか?

文脈における画像の意味を説明します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「ピクセルではなく目的を伝えるaltを書く」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか?

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 情報提供用か装飾用か:最初の判断
  2. ピクセルではなく目的を伝えるaltを書く
  3. 空のaltと非表示にする装飾画像
  4. 複雑な画像:グラフ、地図、長い説明
← Web Accessibility Academyに戻る