0Pricing
Web Accessibility Academy · レッスン

複雑な画像:グラフ、地図、長い説明

短いフレーズ以上の説明が必要な画像を扱います。

「複雑な画像:グラフ、地図、長い説明」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

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

When Alt Is Not Enough

Some images carry too much information for a short phrase. Charts, maps, and diagrams need a longer description plan.

Start With a Short Alt

Even a complex image still gets a brief alt that names it, like a bar chart of monthly sales for 2024.

<img src="chart.png" alt="Bar chart of monthly sales for 2024">

Then Add the Detail

The short alt names the image; a nearby long description then conveys the actual data or relationships it shows.

Describe the Insight

A great long description gives the takeaway, like sales peaked in December, not a dry list of every single value.

The Data Table Fallback

For charts, the strongest alternative is often a real HTML table with the same numbers right below the graphic.

Linking to a Description

You can place a long description on the page and connect it with aria-describedby pointing to its element id.

<img src="map.png" alt="Store map" aria-describedby="mapdesc">

Figure and Figcaption

Wrap an image and its visible explanation in figure and figcaption so the pairing is clear to everyone.

<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>

Maps Need Their Data

A map image is useless without the underlying facts, so provide an address, directions, or list as the text equivalent.

Diagrams and Flows

For a flowchart, describe the steps and their order in prose, so the logic survives without the visual layout.

Keep It Discoverable

Make sure the long description is easy to find. A hidden text equivalent users cannot reach is no help at all.

Match Effort to Complexity

The richer the image, the more your text equivalent must do. Let the image's complexity set how much you write.

Quick Check

Choose the best plan for a complex chart.

Recap

You did it! Complex images get a short alt plus a real text equivalent, a data table, figcaption, or aria-describedby that conveys the insight.

よくある質問

「複雑な画像:グラフ、地図、長い説明」レッスンは無料ですか?

はい。「複雑な画像:グラフ、地図、長い説明」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「複雑な画像:グラフ、地図、長い説明」で何を学びますか?

短いフレーズ以上の説明が必要な画像を扱います。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「複雑な画像:グラフ、地図、長い説明」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

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