GAAD Japan 2020。アクセシビリティを考える1日 「制作現場で少しずつ取り組むアクセシビリティ」

毎年5月の第3木曜日は、GAAD（Global Accessibility Awareness Day）の日。世界各地で「アクセシビリティ」を考える一日、ということでGADD Japan 2020に参加しました。

Home | GAAD Japan

二つ目のセッションは「制作現場で少しずつ取り組むアクセシビリティ」。登壇者は株式会社スタンス フロントエンドエンジニア/UXデザイナー宮本 采佳さんです。

ウェブアクセシビリティとは？

・コンテンツへアクセスできるかどうか
・ウェブの本日：ウェブの本質は普遍性にある
・障害者や高齢者のための特別な対応ではない

より多くの「ユーザー」がより多くの「利用環境」でより多くの「場面や状況」でコンテンツを使えるようにすること

すぐ始められる取り組み：仲間に知ってもらう

・同じチームや部署のメンバー／仕事のパートナー
・仲間を巻き込む／自分がアクセシビリティに関心があることを知ってもらうため
・アクセシビリティに関する情報をシェア

accrefs

エー イレブン ワイ［WebA11y.jp］

・アクセシビリティに関する書籍の紹介や輪読会
　・デザインング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人で頑張るのではなく、周りを巻き込んで一緒に学んでいくことが大切。

昔の私がそうだったようにどうしても「アクセシビリティって難しそう」って思っちゃうのは自然なのかなと思っている。でもこうやって勉強会に出たりすると、最初の一歩はとても簡単で普通のことなんだってことがわかる。
だから簡単なことから始めよう！って伝えてみんなで取り組みたい。

自分のする仕事、みんなでする仕事全体がちょっとずつよくなったら、みんなが使いやすくなって、みんながハッピーになる。やさしいせかい。