Web Accessibility Academy · レッスン

データテーブルによるフォールバック

元データをアクセシブルなテーブルで提供します。

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

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

When Words Are Not Enough

A one-line summary tells the story, but some users want the numbers. A data table gives them the raw values behind the chart.

The Table Is the Source of Truth

Think of the chart as a visualization of a table. Offer that same table in real markup and every assistive tech can read it perfectly.

Use a Real table Element

Screen readers understand the native table element deeply: rows, columns, and headers all announce correctly with no extra ARIA.

<table>
  <tr><th>Month</th><th>Sales</th></tr>
  <tr><td>Jan</td><td>120</td></tr>
</table>

Give the Table a caption

A caption names the table so a listener knows what data they entered. It reads out the moment focus lands on the table.

<table><caption>Monthly sales in 2024</caption> ... </table>

Header Cells With th and scope

Mark labels as th with a scope, so each value announces with its column and row. That context is everything in a table.

<th scope="col">Sales</th>
<th scope="row">January</th>

Place It Right by the Chart

Put the fallback table next to the chart, not on a separate page. Users should reach the data without hunting for it.

Optionally Hide It Visually

If the table clutters the design, hide it visually but keep it for screen readers using a visually-hidden class, never display none.

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; }

Never display none the Data

Watch out: display: none removes content from the accessibility tree entirely. Hidden that way, your fallback helps nobody.

A details Toggle Works Too

Wrap the table in a details element so sighted users can expand the numbers on demand while it stays fully accessible.

<details><summary>View data table</summary>
  <table>...</table>
</details>

Keep Table and Chart in Sync

If the chart updates, the table must update too. Stale numbers behind a fresh chart quietly mislead the people relying on them.

One Source, Two Views

Ideally both the chart and table render from the same data. That keeps them honest and saves you maintaining two truths. 🔗

Quick Check

How should you hide a data table that you still want screen readers to read?

Recap: The Numbers Behind the Picture

You learned to back any chart with a real table: captioned, header-scoped, kept in sync, and hidden safely if needed, never with display none. 📋

よくある質問

「データテーブルによるフォールバック」レッスンは無料ですか？

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

「データテーブルによるフォールバック」で何を学びますか？

元データをアクセシブルなテーブルで提供します。ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「データテーブルによるフォールバック」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Web Accessibility Academyに戻る