GAAD Japan 2020。アクセシビリティを考える1日 「制作現場で少しずつ取り組むアクセシビリティ」
毎年5月の第3木曜日は、GAAD（Global Accessibility Awareness Day）の日。世界各地で「アクセシビリティ」を考える一日、ということでGADD Japan 2020に参加しました。
二つ目のセッションは「制作現場で少しずつ取り組むアクセシビリティ」。登壇者は株式会社スタンス フロントエンドエンジニア/UXデザイナー宮本 采佳さんです。
ウェブアクセシビリティとは？
・コンテンツへアクセスできるかどうか
・ウェブの本日：ウェブの本質は普遍性にある
・障害者や高齢者のための特別な対応ではない
より多くの「ユーザー」がより多くの「利用環境」でより多くの「場面や状況」でコンテンツを使えるようにすること
すぐ始められる取り組み：仲間に知ってもらう
・同じチームや部署のメンバー／仕事のパートナー
・仲間を巻き込む／自分がアクセシビリティに関心があることを知ってもらうため
・アクセシビリティに関する情報をシェア
・アクセシビリティに関する書籍の紹介や輪読会
・デザインングWebアクセシビリティ（ピンク本）
・コーディングWebアクセシビリティ
・インクルーシブHTML+CSS&JavaScript
・Form Design Patterns
→ 輪読会は体系的に学べる書籍があれば準備コストが低い
→ 参考書籍があるので他職種も参加しやすい
・ウェブアクセシビリティ＝品質
・最低限のアクセシビリティを担保できる
・アクセシビリティを向上できる技術を知り実装できる
＝ ウェブ制作に必須なスキルがあるということ
すぐ始められる取り組み：進行中の案件で取り組む
■デザインフェーズ
・ワイヤーフレームや原稿を見直す
・デザインする時に意識する
・デザインFIX前にアクセシビリティ要件を満たすか確認する
チェックポイント
・どこが押せるかわかるようにする
ex）色の違いだけでテキストリンクを表現しない
・誤解を生まないようなデザイン
ex）ボタンであること示す見た目、矢印の付加など
・情報識別を資格に依存しないように意識する
色覚に異常がなくてもモニタ発色や環境で影響を及ぼす
ex）色のみで表現せずテキストでも補足する
→ 「Stark」で色の見え方、コントラス比をチェックする
■コーディング・実装フェーズ
・セマンティクスを適切に
→ ハイパーリンクはa、ボタンはbuttonに
→ 見出しを見出しとしてh1〜h6を使ってマークアップする
→ 見出しではないテキストを見出しにしたい
→ リストはリストとわかるようにul、olを使う
・機械的にチェックする
Chrome拡張機能「aXe」などを利用
→ 画像の代替テキスト
→ 文法エラー
→ カラーコントラストのチェック
・人間の耳／目でチェックする
→ スクリーンリーダーでの情報に欠落がないか
→ スクリーンリーダー、キーボードのみで操作できるか
今回取り組めなかったことでも、次回の案件に取り組めるように確認、整理しておくことが大切
すぐ始められる取り組み：新しい案件で取り組む
・最低限の方針を案件開始時に策定し、共有する
→ 最低限の目標を立てる
→ 現実的な方針であることで絵に描いた餅にしない
・ブラウザ／OSの機能を制限しない
・動画コンテンツは情報取得の手段を複数提供する
壁にぶつかったら
・他社事例を参考に
・みんなで一緒に学ぶ
・先駆者に聞く！
・Twitterなどで疑問を発信してみる
・A11YJ SlackのQ&Aチャンネルで質問してみる
まとめ
1人で頑張るのではなく、周りを巻き込んで一緒に学んでいくことが大切。
昔の私がそうだったようにどうしても「アクセシビリティって難しそう」って思っちゃうのは自然なのかなと思っている。でもこうやって勉強会に出たりすると、最初の一歩はとても簡単で普通のことなんだってことがわかる。
だから簡単なことから始めよう！って伝えてみんなで取り組みたい。
自分のする仕事、みんなでする仕事全体がちょっとずつよくなったら、みんなが使いやすくなって、みんながハッピーになる。やさしいせかい。