Zenn
🤖

【WCAG2.1の達成基準を咀嚼する】1.1.1: 非テキストコンテンツ

2023/03/22に公開
#
a11y
#
wcag
アクセシビリティ
tech

これは何？

WCAG2.1のガイドライン中で示されている達成基準を、フロントエンドエンジニア視点でざっくりと噛み砕いてまとめたものです。
この記事では、達成基準 1.1.1 非テキストコンテンツ について記載しています。

参考

「達成できている」と言える状態

利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。

※非テキストコンテンツ = 画像/動画/音声/グラフ etc...

テキストによって提供された情報は、

  • 画像の内容をスクリーンリーダーで読み上げることができる
  • 音声ファイルをテキストに書き下ろすことで、音を出せない状況でも内容を把握できる

というように、ユーザーニーズに合わせて加工/提供できる。つまり、ユーザーの属性や利用状況に左右されにくくなる。

「次の場合を除く」について

達成基準1.1.1には「次の場合を除く」という記載があるが、これは「次の場合は無視しても良い」という意味ではない。各シチュエーションにおいて適切な代替テキストを提供する必要があるため、例外とされている状況と必要な対応について下記にまとめている。

コントロール、入力

非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する名前 (name) を提供している。(コントロール及び利用者の入力を受け入れるコンテンツに関するその他の要件は、達成基準 4.1.2 を参照。)

要するにボタンや入力フォームに識別可能な名前を付けれていればOK（多分）。
例）送信ボタンに画像を利用している場合、ボタンテキストで「送信」と記載があれば、アイコンのalt属性は空文字でも良い

時間依存メディア

非テキストコンテンツが、時間に依存したメディアであるとき、テキストによる代替は、少なくとも、その非テキストコンテンツを識別できる説明を提供している。(メディアに関するその他の要件は、ガイドライン 1.2 を参照。)

※ 時間依存メディア = 時間の経過に伴って変化するコンテンツ。ライブであるか収録済みであるかに関わらず、音声や映像コンテンツのことを指す。

ここはちょっと理解が怪しい。
「時間依存メディアだとしても、その内容の代替テキストは必要だよな...？」という疑問があり、解説書内の補足情報を読んでもいまいち把握しづらかったものの、原文を読む限りだと以下のような趣旨に思える。

  • 時間依存メディア自体はガイドライン1.2によってアクセシブルになる。
  • しかし、ユーザーがページ上でそれらのコンテンツを発見した時には、「それが何であるか」を知る必要がある。
    • そのコンテンツを再生するかどうかを判断するため
  • そのため、時間依存メディアのタイトルや説明をテキストとして提供する必要がある

この項目に限らず、理解が難しい箇所は原文に当たった方が良さそう。

テスト

非テキストコンテンツが、テキストで提示されると無効になるテスト又は演習のとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。

ヒアリングテストや視覚能力に対するテストなど、テキストを準備すると破綻する or 提供自体が不可能なものもある。
それらに対しては、非テキストコンテンツの目的を説明するような代替テキストを準備すれば良い

感覚的

非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。

交響楽団の演奏や視覚的な芸術作品など、感覚に訴えかけるコンテンツは言葉では表現しきれない場合もある。
その場合、少なくともそのコンテンツのラベル等を提供し、可能であればさらに説明的なテキストを追加することで、代替テキストとすることができる。
そのコンテンツをページに含める理由がわかっていて、説明できるのであれば、それを含めるとなお良い。

CAPTCHA

非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを確認する目的で用いられているとき、テキストによる代替は、その非テキストコンテンツの目的を特定し、説明している。なおかつ、他の感覚による知覚に対応して出力する CAPTCHA の代替形式を提供することで、様々な障害に対応している。

CAPTCHA に対してテキストによる代替を提供すると、ロボットでも操作可能になってしまう。
そのため、「認証が必要とされている」と理解できるようなテキスト + 代替となる認証手段を提供することで、様々なユーザーに対応する必要がある。

装飾、整形、非表示

非テキストコンテンツが、純粋な装飾である、見た目の整形のためだけに用いられている、又は利用者に提供されるものではないとき、支援技術が無視できるように実装されている。

ボーダーや背景画像など、そのコンテンツ自体が情報を持たず、視覚的な効果のためだけに利用されるものがある。
これらに対して代替テキストを設定すると、スクリーンリーダーの利用者が混乱してしまう。
そのため、支援技術がこれらを無視するように実装する必要がある

具体的な達成方法

解説書には達成方法へのリンクも記載されているが、非常に多岐に及ぶため、気になった点のみ抜粋している。

Discussion