Webアクセシリビリティの学校ONLINE - 受講メモ
2020.04.25 14:00- 株式会社インフォアクシア 植木真さん
定期的な知識アップデートと忘却防止のために、Webアクセシビリティの学校に参加したので備忘メモ。
パロディCMが楽しすぎてテンション上がる。あれだけを集めた動画とか欲しいｗ
Webアクセシビリティとは？
Webアクセシビリティあるある2019
・画像の代替テキストがテキストではない
・文字色と背景色のコントラスト比が足りていない
・見出しがちゃんとマークアップされていない
・マウスやタッチでは操作できるがキーボードでは操作できない
・キーボード操作時にフォーカスインジケータが表示されない
・フォームコントロールがラベルが関連づけられていない
・現在位置を見た目の変化だけで示している
・リンクテキストからリンク先を推測できない
・フォーカス移動順序に問題がありキーボードで操作しにくい
・色の違いがわからないと情報が伝わらない
なぜ問題なのか？
Webは時と場合によっては見えない／見えづらい、聞こえない／聞こえづらい、理解しづらい、操作できない／操作しづらいということが起こりうる。
→ Webアクセシビリティとは障害のある人がWebを使うことができるようにするという意味。Webは障害の有無に関係なく、誰もが使えることをコンセプトとしている。
→ 海外では「アクセシビリティに問題がある」という理由でWebおよびアプリが提訴される事例が増えており、アクセシビリティへの対応は「知らなかったでは済まされないもの」として考えられるようになってきている。
→ 法律によるアクセシビリティ確保の義務化も
→ アメリカ、カナダ オンタリオ州、韓国、EU各国・・・
→ グローバル展開をすれば当然適用となる
→ 国連の障害者権利条約の趣旨に賛同する形で整備されてきている
→ 日本でも障害者差別解消法が施行されているが、大きな変化が起きていないのが現状。
日本では法律が緩く、動きが遅い。
しかし障害者のインターネット利用率は高く、対応が求められる。
アクセシビリティは誰のためのものか？
誰でも「〜できない」「〜しづらい」ということはありえる。
・さまざまな障害
・年齢からくる衰え
・一時的に普段と異なる状況（室外、移動中など）
→ アクセシビリティは一部の特別な人や高齢者のためだけのものではない。それを使うすべての人の「使いやすさ」が向上する。
UXハニカム
ユーザーエクスペリエンスを構成する7要素
アクセシビリティはすべてのユーザービリティの根底にある
アクセシビリティは「Webコンテンツの品質基準」
ユーザー×利用環境×場面・状況
→ さまざまなユーザーがさまざまな状況で利用することを前提に対応が求められる
キーワードは「マシンリーダブル」
スクリーンリーダー
→ 全盲ではなく、ロービジョンの人も多くの割合で利用している
→ 読み上げのスピードをコントロールでき、使い慣れている方はかなりの高速で聞いている
同じ文字列でもHTMLマークアップが異なると読み上げ方が変わる
→ HTMLのタグ情報が異なっていると意味が違ってきてしまう
→ ちゃんとHTMLを書けば、ちゃんと読み上げられる
キーワードは「マシンリーダブル」
Machine Readable = Machine can read it.
ヒューマンリーダブルとマシンリーダブル、両方が揃ってコンテンツをWebで配信することの意味を十二分に発揮する。
ユーザーエージェントはHTMLを解析して
・ブラウザ：Webページとして画面を表示する
・スクリーンリーダー：合成音声に変換する
・点字ディスプレイ：点字に変換する
・検索ロボット：Webページの情報を取得する
→ 出力は異なるが、HTMLを解析して表現をしている＝マシンリーダブルであることで「正しく」コンテンツを伝えることができる
→ SEOスターターガイドの内容はアクセシビリティガイドラインと近い ＝ アクセシブルにコードを書くということはSEO対策の基本でもある
アクセシビリティガイドライン
WCAG = ISO = JIS X 8341-3:2016
Wenアクセシビリティ確保 基本の「キ」から始めよう
■ページタイトル
・HTMLのtitle要素を用いる
・ページの内容がわかるページタイトルを記述する
[ページタイトル]＋[Webサイト名]
・さまざまな場面で使われることを考慮して「ページタイトル」を前に
→ ブラウザのタブ
→ ブラウザの「お気に入り／ブックマーク」
→ ブラウザの「履歴」
→ 検索結果ページのタイトル一覧
■見出しやリストのマークアップ「見出しは身だしなみ」
・見出しやリストなどの文章構造をマークアップする
・見た目だけではなく、h1〜h6要素で見出しとしてマークアップする
・見出しレベルをスキップしないようにコンテンツを設計する
・PC用スクリーンリーダーの見出しジャンプ機能
→ 初めてのページではすべての見出しを確認する
→ 使い慣れてくると特定の見出しレベルに絞り込んで確認する
→ 見出し要素がマークアップされていないと正しく情報が伝わらない
→ 新聞や雑誌を読むとき見出しだけパッと流し読みをする、あの感覚
・見出しのマークアップはブラウザの拡張機能でも手軽にチェックできる
→ WebDeveloper などで見出しやアウトラインを確認！
・ul要素で順不同リストとしてマークアップ
→ スクリーンリーダーは「リスト●項目」と読み上げるようになる
・番号付きリストならol要素でマークアップ
→ スクリーンリーダーが番号を読み上げる（はず）
・リストを用いるとユーザービリティが向上する
→ ユーザーが文章の読みやすさを高く評価する傾向がある
→ 適切にリストを利用すると「読みやすさ」にも貢献する
箇条書きにすると、ページの右側が余白になりやすいため、視線の動きが左側に固定され、各項目が目立ちやすくなる。通常文よりもユーザビリティが47%も高いという結果もある。
— ヤコブ・ニールセン - ユーザビリティ知見集 (@jakob_usability) September 23, 2011
■リンクテキストは、リンク先が分かる文言にする
・スクリーンリーダーではリンクテキストだけを聴いていることがある
→ 「こちら」や「一覧」だと何に繋がるリンクなのかわからない
・ユーザーがその場でリンク先へ移動するかどうかを判断できるようなリンクテキストにする
・SEOの観点からも意味がある
→ リンク先のキーワードが無意味なものとして設定されてしまうおそれ
・具体的な文言が使いにくい場合は？
→ aria-labelledby属性でリンクテキストを補足する
aria-labelledby属性はaでもbuttonでも利用できる
→ 指定したid属性の内容をスクリーンリーダー側で補完してくれる
■情報を伝えている画像に代替テキストを提供する
・画像にある文字情報を過不足なくalt属性に記述する
・写真であることが伝わるように記述する
→ そこに「写真があること」自体も情報
→ 写真があることがわかれば、他の人に詳細を確認することができる
→ 写真がページ遷移リンクを兼ねている場合は不要
→ 文脈によっては「どんな写真なのか」について詳細な説明が必要な場合も
・画像が情報を伝えていない場合は空のalt属性（alt=""）を設定する
→ 代替テキストが不要でもalt属性は省略できない
→ CSSのbackground-imageプロパティを用いて背景画像にしてもよい
・CSSのbackground-imageプロパティはWindowsのハイコントラストモードでは非表示になってしまうので注意が必要
・図やグラフなどは同等の情報が伝わるように記述する
→ 図表にある文字を繋げて意味が繋がるように補完する
・画像リンクとテキストリンクが隣接しているとき
→ 画像とテキストのリンクが別々のリンクだと、スクリーンリーダーで読み上げた時に同じリンクが2回ずつ繰り返され、キーボード操作時のフォーカス移動回数も2倍になる
→ リンク用を1つにまとめ、リンク画像の代替テキストを空にする
■フォームコントロールのラベルや説明をマークアップする
・見た目の配置だけではなく、マシンリーダブルにする
→ ラベルと入力欄と補足説明を関連づける
・ラベルのテキストがあるときはlabel要素を用いる
・label要素でマークアップされていると、ラベルのテキストでも選択できるようになる
→ マウスユーザーのユーザビリティ向上にもなる
・ラベルがないときはtitle属性を用いる
・補足説明のテキストはaria-describedby属性を用いる
■情報を伝える色の使い方に注意する
・視覚障害＝全盲ではない。弱視/ロービジョンという方が圧倒的に多い
・「見えない」以外にも、病気や色覚異常という場合も
・弱視の方は画面を大きく拡大したり、色を反転したりして閲覧している
→ 拡大でレイアウトが崩壊しないこと（300〜600%など）
→ コントラスト比への配慮（反転しても文字がきちんと読めること）
・文字色と背景色のコントラスト比を確保する
→ 多様化するユーザーの利用シーンをイメージしよう
→ 明るい屋外、暗い室内というだけでも見やすさが変わる
→ 基準は4.5:1以上
→ 障害的な問題がなくても、老眼などでも見えにくくなるので多くの人に対して有効
・背景色が白の場合、赤の指定には特に注意
・マウスオーバー時などに変化する場合は、変化後の色にも基準がで起用される
→ 透明度の変化で対応している場合は特に注意
・写真を背景にするとき
→ 文字の後ろに背景色を引く
白文字＋黒背景透過54%以内であればコントラスト比を確保できる
→ 最も条件の悪い部分でコントラスト比を判定することに注意
・日本人男性は20人に1人の割合で色覚に多様性がある
→ 色の違いだけで違いを表現すると意味が読み取れなくなる
■ユーザーがコンテンツを拡大表示できるようにする
・ブラウザのズーム機能で200%まで拡大してもコンテンツの閲覧や操作に支障がないようにする
・タッチ操作でも画面の拡大ができるようにする
・「文字サイズ変更ボタン」「文字色／背景色変更ボタン」「音声読み上げ機能」はサイトに必須ではない
→ ユーザーが自分で変更しても問題がないように作ることが大切
■キーボードだけでも操作できるようにする
・マウス操作を前提にしていると利用できない場合がある
→ 障害だけではなく、怪我やマウスの調子が悪い時など
・フォーマスを移動する／リンクやボタンを押す／選択肢の切り替え
→ フォーカスインジケータが常に表示されているか
→ Webページの最初から最後まで移動できるか
→ フォーカスの移動順序に問題はないか
→ フォーカス移動時に予期しない動作をしないか
・モーダルウインドウの操作問題
→ モーダルウィンドウにフォーカスが移動しない
→ モーダルウィンドウから戻ると先頭に戻ってしまう
→ フォーカスの制御を考えてモーダルを実装しておく
・フォーカスインジケータは常に表示させる
→ デフォルトの表示は分かりにくいことがある
→ CSSでoutline:noneがあると非表示になる
→ outline:noneではなく例えばWhat input
■エラーメッセージではエラー個所と修正方法を明示する
文章を理解しづらい、状況の把握・学習がしづらいという方はもちろん、すべてのユーザーのユーザビリティを向上できる
・該当箇所の項目名
・エラー内容の説明
・エラーの修正方法の説明
■動画にキャプション（字幕）を提供する
聴覚に問題がある場合以外にも、周囲の環境によって音が出せない、聞こえにくい場合にも有効
→ YoutubeやGoogleでの検索性が向上
→ 閲覧者や閲覧時間が増える
・キャプション≠字幕
→ 登場人物の発話内容
→ 状況音、環境音、効果音
→ 拍手、ドアのノック、電話の呼び出し音など
→ BGM（曲調／曲名／歌詞）
・Youtubeの自動字幕起こし機能などを活用する
まとめ
基本のキ10項目をクリアするだけで、よくある問題を改善することができる。アクセシビリティ対応はけして特別なものではなく「ちゃんと作れば、ちゃんと使ってもらえるようになる」
質疑応答
・デザインとアクセシビリティの両立
→ デザイナーさんが好き放題自由に、ということは確かにできないが、使いにくい／読みにくい状態にすることには意味がないので、何のためのデザインなのか？を改めて考えるべき
・aria-labelledby属性で2つのIDを指定する意味は？
→ 両方を指定することにより2つ目の文字列も生かすことができる
・装飾的な用途の写真の場合のalt属性は？
→ 装飾であっても写真のイメージがどんなものかを知りたいというニーズはある。何を伝えたいかに合わせる
・図の情報量が多い場合のaltは？
→ 他にそれを補完する情報がない場合はaltに入れざるを得ないが、追加できるのであれば、別にテキスト情報として用意した方がよい。alt属性はスクリーンリーダーでまとめて読まれるため、長すぎると把握しにくくなる
・複雑な図表の説明は？
→ 文字と数値はすべて書き起こす。全体像を示してから細部を説明する流れで書く。
・placeholderの有用性は？
→ 入力例／入力方法の補足テキストとして使うもの
→ labelテキストをplaceholderに入れるという使い方は推奨されない
・埋め込み動画の代替テキストは？
→ 動画があること＋タイトルくらいでよい
→ 動画の方に字幕や、代替コンテンツを用意する
・動画はそのまま再生or別ページ再生、どっちがよい？
→ どっちがダメということはないのでそのまま再生でもOK
・PDFのダウンロード
→ PDFファイルであることを示すアイコンはimg要素にしておくと良い
・背景画像の代替テキストは？
→ 背景画像の意味がある場合は提供したい
雑感
まだ社内やクライアントに啓蒙できるような立場でも状況でもないけど、定期的にアクセシビリティの情報は耳に入れておきたいので、今回も良い時間だった。何回学んでも学びすぎるということはないし、うっかり忘れちゃってるようなこととかも改めて確認できた。
いつだって当たり前に対応できる制作者でありたい。そうなりたい。
・・・アクセシビリティの記事を書いてるのに、noteは見出しが1種類しかないし、リストも指定できないのがやっぱイマイチ・・・ｗ
参考
スクリーンリーダー利用状況
https://www.niph.go.jp/journal/data/66-5/201766050008.pdf
代替テキスト決定ツリー
https://sawada-std-design.com/works/readable-na/readable-na-alt-decision-tree-20181105.pdf
Twitterハッシュタグ：#a11y学校