7月20日（水）に渋谷のTフラッグスで行われたCocktailzさん主催の
「alt night nippon 代替テキストで2時間」に参加してきました。
JIS規格が改定された去年は「アクセシビリティ元年？」のため、
アクセシビリティのセミナーが多かったのですが、
今年に入っては久しぶりのアクセシビリティセミナーの受講になりました。
本セミナーでは、ご自身も視覚障害である伊敷さんから、
実際の体験により得られた知見を学ばせていただくことができました。
パーソナリティ
伊敷政英さん
ウェブアクセシリビリティ基盤委員会 WG2委員
左目にコンタクトを入れて0.03ぐらい。
色については正常に判断できる。
数回、角膜移植を受けている。
普段は画面拡大ソフトを使っている。
白背景だと眩しいので、色を反転して使っている。
2001年ぐらいから、
アクセシビリティの仕事の関わっている。
代替テキストの基本
▼代替テキスト(alternative text)とは。
→画像やイメージマップ、動画、入力フォームのボタンなど、
テキスト以外の視覚コンテンツの代替のなるテキスト
▼代替テキストを付与できる要素
・画像 img要素
・イメージマップ area要素
・動画、Flash embed要素（独自要素）
・Javaアプレット applet要素（非推奨）
※object要素にはalt属性はない
▼ブラウザの挙動
・IE
デフォルトでは何も起こらない。
インターネットオプションでツールチップの表示を設定
・Firefox
デフォルトでは何も起こらない。
アドオンをインストールすれば表示できる。
（Web Developer）
・Opera
デフォルトでは何も起こらない。
ツールチップで表示されるのはtitle属性
（Web Developer）
※画像の上を右クリック、「画像のプロパティ」で
代替テキストとlongdesc属性を見ることができる。
▼スクリーンリーダーの挙動
・PC-Talker
| 読み上げの状況 | 問題点 | |
| alt属性なし | 何も読み上げない | 画像の存在に気付かない |
| alt=”” | 何も読み上げない | 画像の存在に気付かない |
| alt属性あり | altの内容を読み上げる | 問題なし |
| alt属性、 title属性あり | titleの内容だけを読む。 altの内容は読み上げない | 代替テキストの内容が 伝わらない。 |
・Focus Talk
PC-Talkerとほぼ一緒。
※読みにくい画像テキストもあるので、ツールチップが表示されるということは、
視覚障害者にとってはありがたい。
※alt属性とtitle属性に両方とも同じ内容があることが理想。
とはいえ、alt属性とtitle属性は似て非なるものなので、考慮も必要。
▼携帯電話やスマートフォンの挙動
・らくらくフォン
視覚障害者のほとんどが使っている。
| 読み上げの状況 | 問題点 | |
| alt属性なし | 「画像」とだけ読み上げる | 画像の存在はわかるが、 どんな画像かはわからない |
| alt=”” | 何も読み上げない | 画像の存在に気付かない |
| alt属性あり | altの内容を読み上げる | 問題なし |
| alt属性、 title属性あり | altの内容だけを読む。 titleの内容は読み上げない | 問題なし |
・iPad2
音声読み上げソフトの「Voice Over」が標準搭載されている。
| 読み上げの状況 | 問題点 | |
| alt属性なし | 「ファイル名 イメージ」と読み上げる | 画像の存在はわかるが、 どんな画像かはわからない |
| alt=”” | 何も読み上げない | 画像の存在に気付かない |
| alt属性あり | altの内容を読み上げる | 問題なし |
| alt属性、 title属性あり | titleの内容だけを読む。 altの内容は読み上げない | 代替テキストの内容が伝わらない。 |
代替テキストのケーススタディ
・写真
→写真であることを明示する。
たとえ写真の内容がわからなくても、他の人に聞くなどすることができる。
・画像テキスト
→画像に入っている文字をそのまま入れる。
・イメージマップ画像
→area要素だけでなく、img要素にも代替デキストを入れる。
▼基本的な例
JIS X 8341 3:2010 達成基準7-1-1-1 非テキストコンテンツに関する達成基準
利用者に提示されるすべての非テキストコンテンツには､
同等の目的を果たす代替テキストを提供する｡
ただし､次の場合は除く：（レベルA）
コントロール､入力：
非テキストコンテンツが､コントロール又は利用者の入力を受け付けるものであるとき、
その目的を説明する識別名を提供している。
（コントロール及びユーザの入力を受け入れるコンテンツに関するその他の要件は､
ガイドライン４１を参照のこと｡）
時間の経過に伴って変化するメディア：
非テキストコンテンツが､時間の経過に伴って変化するメディアであるとき､
代替テキストは､少なくとも､その非テキストコンテンツを識別できる説明を提供している。
(メディアに関するその他の要件は､ガイドライン１２を参照のこと｡）
試験：
非テキストコンテンツが､テキストで提示されると無効になる試験又は演習のとき､
代替テキストは、少なくともその非テキストコンテンツを識別できる説明を提供している。
感覚的：
非テキストコンテンツが､特定の感覚的体験を創り出すことを主に意図しているとき、
代替テキストは､少なくともその非テキストコンテンツを識別できる説明を提供している。
CAPTCHA：
非テキストコンテンツが､コンピュータではなく人間がコンテンツにアクセスしていることを
確認する目的で用いられているとき､代替テキストは､その非テキストコンテンツの目的を
特定し、説明している｡なおかつ､他の感覚による知覚に対応して出力するCAPTCHAの
代替形式を提供することで､様々な障害に対応している。
装飾､整形､非表示：
非テキストコンテンツが､装飾だけを目的にしている､見た目の整形のためだけに
用いられている､又は利用者に提供されるものではないとき､
支援技術が無視できるように実装されている。
▼リンク画像への代替テキスト
★リンク画像に代替テキストがないと、
・PC-Talker → リンク先を読み上げる。
・FocusTalk → リンク先を読み上げる。
※「えいちてぃーてぃーぴー」と読まれても、
リンク先がどんなページかわからない、
不安すぎてリンクをクリックできない。
★リンク画像への代替テキストは、
リンク先ページの内容がわかるようなものとする。
・リンクテキスト（リンク画像への代替テキスト）
・リンク先ページのページタイトル
・リンク先ページのh1要素
※この3つは同じ内容にすることが最も理想的
★リンク画像への代替テキストに「〜へのリンク」は必要ですか？
→いらない。
スクリーンリーダーはリンクを読み上げる際、
リンクテキストやリンク画像の代替テキストの前後に
｢リンク｣という言葉を付け加えています。
｢〜へのリンク｣を代替テキストにつけてしまうと､
2重に読まれることになります。
例：http://www.astellas.com/jp/art/
▼アイコン類
→どこで、なんの目的で使うかによってかわってくる。
▼alt=””が適切となる例
・リンクの中に画像とテキストが入っている場合
→2度読みは避ける。
・イメージだけを伝える場合
→cssでマークアップ
例：トヨヤの右ナビ http://www.toyota.co.jp/jpn/company/message/
・失敗事例
ITmedia http://www.itmedia.co.jp/
→代替テキストが「ICON」になっている。
■longdesc属性
→なかなか使われない。
ほとんどのブラウザ、スクリーンリーダーが対応していない。
longdesc属性を使わない、画像をあらわしている内容をテキストで説明する。
★対応状況
ウェブアクセシビリティ基盤委員会(WAIC)
「アクセシビリティサポーテッド検証結果」
http://www.ciaj.or.jp/access/web/docs/jis2010/as.html
■代替テキストの悪用例
・鳥取県のサイト
http://www.pref.tottori.lg.jp/
→透明画像を区切りに使っている。
「〜はここまで。」
これはやりすぎ
スクリーンリーダーの利用者に偏ったコーディングになっている。
■HTML5と代替テキスト
HTML5ではimg要素のalt属性の仕様が精緻化され、役割が大きく変わります。
・alt属性には、画像を削除しても全く同じ情報が伝わるような詳細な代替テキストを
指定する。
・代替テキストの情報量がぐっと増える
・条件を満たせば、alt属性を省略することができる。
※大変だからという理由での省略はダメ。
★参考資料
・W3C Working Draft
4.8.1.1 Requirements for providing text to act as an alternative for images
http://www.w3.org/TR/html5/embedded-content-1.html#alt
・4.8.2.1 イメージの代替として作用するテキストを提供するための要件
http://www.html5.jp/tag/elements/img.html#alt
・WHATWG – 『Alt属性をなぜ省略しても良いのか』日本語訳
http://www.html5.jp/trans/whatwg_omit_alt.html
■複雑な画像への代替テキスト
▼グラフ
alt属性
・グラフの種類を明示する（棒グラフ、円グラフ、折れ線グラフなど）
・何を表すグラフなのかを完結に書く。
テキスト、表など。
・グラフがあらわしている内容はテキストや表にして示す。
例1：棒グラフ
総務省の例
例2：折れ線グラフ
折れ線グラフでは数値の変化が重要
説明のための表には「体重変化」の列を追加している
例3：円グラフ
円グラフでは構成比が重要
説明のための表には「構成比」の列を追加している。
▼組織図
成功事例：首相官邸ホームページのリンク集
http://www.kantei.go.jp/jp/link/server_j.html
省庁や訪問委員会へのリンクを組織図とともに表現しています。
組織図がイメージマップになっていて、
各エリアごとに代替テキストが付与されています。
▼地図
・「○○駅から徒歩5分」では不十分
・Googleマップだけでも不十分
・alt属性には「○○の周辺地図」など簡潔にする。
・道順を説明することが一番大事。
・目印は音やにおいでわかるようなものをチョイス
（パチンコ屋、ガソリンスタンド、マクドナルド、カレー屋、靴屋）
★印刷できることは重要
→自分で見ることはできないが、周りに人に聞くことができる。
★地図の目的は「目的地へたどり着けること」
まとめ
→どんな代替テキストを入れるか迷ったら・・・
・なぜこの非テキストコンテンツがここにあるのか？
・どんな情報が提示されているのか？
・どんな目的を果たしているのか？
・もし非テキストコンテンツを使うことができないとき、
同じ機能または、情報を伝えるためにはどのような言葉を使えばよいか？
※例えば、円グラフの内容を電話で上司に伝えることを考えて見る。
ALT対応というと、「どんなテキストを入れればいいんだろうか？」という点ばかりに着目しがちですが、そもそもの目的を考えれば、ALTに頼らない方法を選択することも重要だということを学ぶことができました。8月にもアクセシビリティのセミナーを開催するそうなので、また参加したいと思います。
コメント