WCAG1.1.1 非テキストコンテンツ　#webアクセシビリティ

達成基準 1.1.1 を理解する | WCAG 2.0解説書

◆概要

1.1.1 非テキストコンテンツ: 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。ただし、次の場合は除く: (レベル A)

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

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

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

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

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

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

引用：Web Content Accessibility Guidelines (WCAG) 2.0

◆意図

画像や動画などの非テキストコンテンツの内容・情報を、
テキストによる代替を用いることで、その内容を理解しやすくする。

◆利点

テキストにする
→写真を見れないユーザー：合成音声を用いたテキストの読み上げができる
→音声が聞けないユーザー：点字に置き換えて内容を理解することができる
→写真・図面・グラフィックデザイン・絵画・3D表現・グラフ・アニメーションなどの意味を理解するのが困難なユーザー
　：テキストで理解するのに役に立つ
→非テキストコンテンツの検索する能力を支援する。（SEO対策）

◆実際にやってみた

・画像の見え方
下記のHTMLコード（cssで少しレイアウト変更あり）で書いたものが

<section class="section">
  <div class="grape1">
    <img src="img/紫のブドウ.png" alt="紫のブドウ">
  </div>
  <div class="txt">
    <p>このブドウは何色ですか？</p>
    <input type="text">
  </div>
</section>

こちら。
通常の画面で紫のブドウであると画像でもわかります。
コントラストやカラースケールを変更したものもスクリーンショットで撮ったのですが、まさかの変更した通りに撮られず…。
スクショって適応されないんだ…
ぜひ設定でカラースケールを変えたりコントラストを高くしたりして
見てみてほしいです。スマホでもできます！
ハイコントラストで色が上手く見えなくても、
グレースケールで全部灰色でも、黒の文字はしっかり見えるので、
紫のブドウであることがわかります。
（脳トレじゃなければ…）

・そもそも画像を見ることができない人は…？
次はこのHTMLコードで

  <section class="section">
   <div class="grape2">
     <img src="img/青のブドウ.png" alt="ブドウの絵">
   </div>
   <div class="txt">
     <p>このブドウは何色ですか？</p>
     <input type="text">
   </div>
 </section>

（支援技術は実際に使わずに、無い画像を指定してalt属性に宣言した文字が出るようにしています。）

こうなります。

わかりません！！
画像を見ないとわからない重要な情報はテキスト化しないと、
重要な情報が伝わりません。
ブドウの絵があることを伝えたいだけならこれでいいのですが、
ブドウの色を聞かれているので今回はブドウの色を
伝えなければいけませんでした。

わかるわかる😄

これはHTMLのimgタグで指定したからalt属性でテキスト化できました。
しかし、cssのbackground-imageだったらテキスト化できません。
重要な情報を含む画像を載せる場合はHTMLのimgタグなどで表示するのが良いのですね！

◆まとめ

今は全然理解できないようなところもあって、
今すぐ実行できそうなところをアウトプットしました。
webアクセシビリティに興味があるので、少しずつ勉強して
アウトプットしていきます。
より良いwebコンテンツを作っていけるように！！