トピックを検索
CSSだけで描かれ、テキストのないアイコンと画像
料金プランの比較表で、チェックとダッシュを空のセルにCSSの背景画像として描いているため、スクリーンリーダーではすべてのセルが「空白」と読まれ、どのプランに何が含まれるのか分かりません。
<td class="no"></td> 問題
比較表のすべてのセルが「空白」と読まれるため、スクリーンリーダー利用者は、どのプランにどの機能が含まれるのかが分かりません。
あるネットショップ作成サービスは、スターター、ショップ、プロの3つのプランを表で比べています。行は機能で、カード決済、独自ドメイン、ギフトカードと並びます。各セルには、プランにその機能が含まれていれば緑のチェック、含まれていなければ灰色のダッシュが表示されます。見える人は、ショップで独自ドメインが加わり、ギフトカードはプロだけだと一目で分かります。スクリーンリーダーの利用者がショップの列を下へ移動すると、「カード決済、空白」「独自ドメイン、空白」「ギフトカード、空白」と聞こえます。表のどのセルも同じように読まれます。見出しはすべてそろっているのに、セルが本来伝えるはずの、プランに機能が含まれるかどうかという情報だけが抜け落ちています。
チェックとダッシュは、どれもCSSで描かれています。セルには yes か no のクラスがあり、スタイルシートがそれぞれのクラスに背景画像を指定しています。CSSの背景画像には代替テキストを持たせる方法がなく、支援技術にもまったく伝わらないため、スクリーンリーダーにとってセルは空です。これは1.1.1 非テキストコンテンツを満たしません。チェックは情報を伝える非テキストコンテンツなのに、代替テキストがないからです。W3Cはこれを失敗例F3として挙げています。1.3.1 情報及び関係性は、見た目で示す情報をコードから判別できるか、テキストで得られることを求めています。ユーザースタイルシートに置き換えたときなど、見た目が変わっても情報が残るようにするためです。表の構造は正しく、すべての行と列に見出しがありますが、各セルが伝える内容はクラス名とスタイルシートにしかありません。HTMLのどこにも「含まれる」「含まれない」とは書かれておらず、スタイルを無効にしたり置き換えたりすると、答えは消えます。
ブラウザーは、印刷時に「背景のグラフィック」（Chrome）や「背景画像を印刷する」（Firefox）をオンにしない限り背景画像を印刷しないため、印刷した比較表からもチェックが消えます。リーダー表示、テキストだけのブラウザー、スタイルを無効にしたページでも、同じように空のセルになります。
10グループ中1グループに影響
- 全盲 （影響あり）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響なし）
- 届く範囲・力 （影響なし）
- 認知 （影響なし）
- 光過敏 （影響なし）
- 視覚を使わない スクリーンリーダー利用者には比較表のすべてのセルが「空白」と聞こえるため、プランをまったく比べられないか、価格から推測するしかありません。点字ディスプレイでも、同じようにセルは空のままです。
axe などのツールは表の見出しを確認し、合格にします。背景画像に意味があるかどうかをスタイルシートまで確かめることはないため、空のセルが並ぶ表も合格になります。ANDIは、背景画像のあるページで、それが飾りであることを確認するよう注意を出しますが、どの画像が情報を伝えているかは判断できません。この診断では、リンクやボタンの外にある空の要素がCSSの背景画像やマスク画像、アイコンフォントの文字を表示していると、人が確認する候補として報告します。対象はアイコンほどの大きさの要素と、この表のような表のセルやリストの項目で、表やリストごとに1件にまとめます。AIによる手早い修正では、各 td に aria-label を付けることがありますが、表のセルの aria-label を読まないスクリーンリーダーもあります。title も確実には読まれません。各絵が何を意味するかは、プランを知る人にしか判断できません。
試してみる
表と、スクリーンリーダーの読み上げを比べてください。
下の欄に、ショップの列を下へ移動したときの読み上げが出ます。ショップに独自ドメインは付いていますか？ギフトカードは？
問題あり 修正できますか？
| スターター | ショップ | プロ | |
|---|---|---|---|
| カード決済 | |||
| 独自ドメイン | |||
| ギフトカード |
スクリーンリーダーの読み上げ：
- カード決済、空白
- 独自ドメイン、空白
- ギフトカード、空白
修正方法
チェックとダッシュには、見える形か見えない形でHTMLに言葉を持たせるか、alt のある img にします。
- 1CSSの画像が示す内容は、言葉か alt のある img としてHTMLにも置く。
- 2何かが表示されているデータセルを、空のままにしない。
- 3CSSの画像は、消えても何も失われない飾りにだけ使う。
<table class="plans"> <thead> <tr> <td></td> <th scope="col">スターター</th> <th scope="col">ショップ</th> <th scope="col">プロ</th> </tr> </thead> <tbody> <tr> <th scope="row">カード決済</th> <td class="yes"></td> <td class="yes"></td> <td class="yes"></td> </tr> <tr> <th scope="row">独自ドメイン</th> <td class="no"></td> <td class="yes"></td> <td class="yes"></td> </tr> <tr> <th scope="row">ギフトカード</th> <td class="no"></td> <td class="no"></td> <td class="yes"></td> </tr> </tbody></table>各セルに見えない言葉を入れる
<table class="plans"> <thead> <tr> <td></td> <th scope="col">スターター</th> <th scope="col">ショップ</th> <th scope="col">プロ</th> </tr> </thead> <tbody> <tr> <th scope="row">カード決済</th> <td class="yes"><span class="visually-hidden">含まれる</span></td> <td class="yes"><span class="visually-hidden">含まれる</span></td> <td class="yes"><span class="visually-hidden">含まれる</span></td> </tr> <tr> <th scope="row">独自ドメイン</th> <td class="no"><span class="visually-hidden">含まれない</span></td> <td class="yes"><span class="visually-hidden">含まれる</span></td> <td class="yes"><span class="visually-hidden">含まれる</span></td> </tr> <tr> <th scope="row">ギフトカード</th> <td class="no"><span class="visually-hidden">含まれない</span></td> <td class="no"><span class="visually-hidden">含まれない</span></td> <td class="yes"><span class="visually-hidden">含まれる</span></td> </tr> </tbody></table>HTMLでは、データセルはどれも空です。チェックとダッシュはスタイルシートの中にしかなく、そこには言葉を持たせられません。
絵はそのままで、各セルに同じことを表す言葉が加わります。言葉は切り抜いて見えなくしていますが、アクセシビリティツリーには残っています。スクリーンリーダーは「ギフトカード、含まれない」と読みます。表の見た目はまったく変わりません。言葉はHTMLにあるため、スタイルを無効にしても残り、ページと一緒に翻訳されます。ただし、チェックと同じく印刷はされません。
3つの方法はどれも情報をHTMLに置くため、1.1.1と1.3.1を満たします。見えない言葉を入れる方法は、デザインをそのまま保ち、加えるのは言葉と、多くのサイトにすでにある見えなくするためのクラスだけなので、ほかにCSSを変えられないテーマで描かれた表に向いています。チェックと同じく、言葉は印刷されません。alt のある画像にする方法も見た目を保ち、印刷もされますが、表を描くすべてのテンプレートで、スタイルシートのアイコンを画像に置き換える必要があります。セルに言葉を書く方法はデザインが変わり、見える人が記号を読み解かずに答えを読めるのはこの方法だけです。表の幅が広がるため、スマートフォンの幅で確認してください。テンプレート、スタイルシート、デザインのどれを変えられるかで選びます。
アイコンフォント。 アイコンフォントは、アイコンを ::before で入れる文字として描き、その多くはUnicodeの私用領域の文字です。生成された内容はスクリーンリーダーに読まれることがありますが、こうした文字は何も読まれないか、意味のない文字として読まれ、同じように意味が失われます。その文字は aria-hidden="true" の要素に入れ、セルやラベルには、上の修正のように見えない言葉か見える言葉を持たせます。
content に書いた言葉。 商品カードの content: "New" のように、CSSだけに書いたラベルは、対応が進み、スクリーンリーダーで読まれることも増えましたが、選択、コピー、ページ内検索ができず、スタイルシートの変更で失われやすくなります。情報を伝える言葉はHTMLに置きます。
ロゴとリストの行頭記号。 空のリンクの背景にロゴを置くと、リンクに名前がなくなります。これは名前のないバナーや画像のリンクで扱う問題です。行頭記号が意味のある画像になっているリスト（完了はチェック、未着手はバツなど）も、表と同じように意味が失われます。各項目に言葉で書きます。
セルの aria-label。 td に aria-label で名前を付けるのは近道に見えますが、セルの aria-label を読むかどうかはスクリーンリーダーによって違い、スタイルを無効にすると、やはり言葉はどこにも表示されません。セルの中のテキストなら、どこでも伝わります。
飾りの背景は問題ない。 ヒーローの後ろの写真、質感、区切り線は何も伝えないため、CSSに置くのが適切です。画像がなくなったときに何かが失われるかどうかで判断します。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。
デザインの案
比較表は、すっきりしたまま読めるようにできます。
プランに含まれるものの見せ方をさらに3通りと、答えがスタイルシートにしかない、よく見る2通りを示します。スクリーンリーダーに何が伝わるかは、それぞれの説明に書いています。
デザインファイルで
- 各マークが表す言葉（「含まれる」「含まれない」など）を、ファイルのマークの横に書く。
- どのセルや行にもマークか値を描き、「なし」を表すためにセルを空にしない。
- 含まれない機能は、灰色や取り消し線だけでなく、専用のマークで描く。
- マークはページに対して3:1以上で描き、横にコントラスト比を書く。
合格
ショップ プロ スタッフのアカウント 2 無制限 ストレージ 5 GB 100 GB チェックの代わりに実際の値 量のある機能は、「2」「無制限」のように、セルにそのまま書きます。凡例はいらず、スクリーンリーダーは各値を行と一緒に読みます。ショップ プロ 独自ドメイン ギフトカード 名前を付けた、塗りの丸と白抜きの丸 チェックより控えめなマークです。塗りの緑の丸は#1e7b34で5.33:1、白抜きの灰色の輪は#70757aで4.65:1です。どちらもセルの中の画像で、「含まれる」「含まれない」という名前を持ちます。- 含まれないものに印を付けたプランのカード 料金カードにすべての機能を並べ、それぞれの前にチェックかバツを置き、含まれない機能はやわらかい灰色（#6b7280、4.83:1）にします。マークには言葉があるため、バツは「含まれない」と読まれます。
不合格
- 灰色と取り消し線だけの、含まれない機能WCAG 1.3.1 よく見るカードの形ですが、ギフトカードが含まれないことを示すのは灰色と取り消し線だけで、どちらもスタイルシートによるものです。通常の設定のスクリーンリーダーは、ほかの行と同じように、含まれているかのように読みます。
ショップ プロ サポート 導入の手伝い CSSの星で描いたサポートの段階WCAG 1.1.1 マスク画像で切り抜いた星はどの大きさでもくっきり見えますが、セルの中身は空なので、「サポート」は段階なしで読まれます。行に「優先対応」のような言葉で段階を書くか、星を「3段階中3」という名前の1つの画像にします。
修正の確認
マウスを使わない4つの確認
確認方法： スクリーンリーダー、スタイルを無効化
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。料金表のテンプレートやスタイルシートを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。パス、クラス名、プランは仮のものです。表のセルの読み方はスクリーンリーダーによって少しずつ違うため、利用者が使う支援技術で確認してください。SVGや img のアイコンを同じように使う場合も、同じ決まりに従います。名前がない、または読まれてしまうSVGアイコンと意味ではなく名前で読み上げられる絵文字を参照してください。実際に使用する支援技術で、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。