アクセシビリティ講習
方針
他で良い資料があれば同じ内容にはしない
読んできて、で一旦終わりにする
講義する側としてはいくらでも語りたいので困る
同じことを別の角度から伝える講習にしたい
まずは簡単にWCAGをなぞって行くところから初めて、議論に落とし込んでいきたい
宿題を出してサービスの改善を行ってもらう
週一のフロントエンドランチなどで、アクセシビリティについて議論ができるようになれば
対象はWebサービス実装向けに話す
事例を示す
解決方法やそれを助けるツールを紹介する
ゴール
アクセシビリティについて興味関心が湧く
ある程度興味が湧いている人に話す
業務に生かせる
デザイナーと議論が少しでもできる
既存コードについて改善ができる
学習の取っ掛かりができている状態
興味から実践に移ってもらうこと
願わくばCA11Yに来て欲しい...
- - -
講義
今日やること
WCAG2.1のA基準を知る
弊社サービスでのある問い合わせ
我々はあるユーザを黙殺している事実
ところでアクセシビリティとは
(問いか)皆さんの持っているアクセシビリティへのイメージを聴く
エーイレブンワイからの引用
「より多くのユーザーが、より多くの利用環境から、より多くの場面や状況で、Webコンテンツを使えるようにすること。」であり、それは「時代や社会からの要請」でもある。
Webのお父さん
Webの本質である。
Webのパワーは、その普遍性にある。障害の有無に関係なく、誰もが使えることが、その本質である。
我々はWebを誰に向かって作っているのか
一般的なユーザ
一般とは?
障がい者と健常者の線引って
できない
アクセシビリティは身近なもの
例えばキーボードユーザにとって快適なWebを作るところからはじめるとか
どうやって勉強すれば良いの
WCAG(Web Contents Accessibility Guideline)を見てみる
WCAGワーキンググループが議論・策定を行ってW3Cが発行している
WCAG2.0は日本のJIS規格(JIS X 8341-3:2016)の元になっている
自治体が参照してるのはこれ
技術文章特有のクセがあり、攻略方法がある
https://gyazo.com/bf3e9208b3a0ddda8b88052fea5e9ec4
How to Meet〜を参照するのが良さそう
WCAG2.1の変更点
メインテーマは、モバイル、認知・学習障害、ロービジョンの3つ
障害者差別解消法
WCAG 達成基準(2.1を基準にしている)
4つの大カテゴリがある
知覚可能
操作可能
理解可能
堅牢
それぞれの項目にはレベルがある
レベルはA、AA、又はAAAの3つ
Aは必要最低限
AAは公的機関に要求されるレベル
AAAは特定のコンテンツにしか適用できない項目を含む
アクセシビリティ対応、できるところから
講義でカバーするのはまずはA(と一部AA)から
さぁ大きな声でレッツゴー
1.知覚可能
2. 操作可能
2.1 キーボード操作可能
「キーボードだけに対応すれば良い」ということではない
Web閲覧できるデバイスは擬似的なキーストロークを有しているだろう
2.1.1 キーボード
OSのセットアップ画面
(目と手の協調運動を必要とするマウスのようなデバイスを使用できない) 全盲の人
(画面上のポインタを見つけたり、目で追ったりするのが困難である) ロービジョンの人
マウスを使うのが非常に難しいと感じ、通常はキーボードを使用している手に震えのある人
2.1.2 キーボードトラップなし
使えない
2.2 十分な時間
2.2.1 タイミング調整可能
読むのに時間がかかる人もいる
例えば家族に途中で呼ばれたら?
例えばToast
2.2.2 一時停止、停止、非表示
カルーセルの例
1.3 適応可能
1.3.1 情報及び関連性
様々な感覚モダリティで連続してアクセスしてみること
スクリーンリーダーでアクセスしてみるなど
失敗例
labelがマークアップされていない無いフォーム
見た目では入力フィールドの項目名が位置的に把握可能
スクリーンリーダーを用いる人がTab移動で入力したら...?
labelを正しくつける
マシンリーダブル
スクレイピング可能
1.3.2 意味のある順序
意味のある順序を壊してはならない。例えば番号付きリストなど
例えばCSSによるコンテンツ順序の変更には気をつける
Flexbox、CSS Grid
単語の文字自体の順番を壊しては行けない
「東京(とうきょう)」を「東 京」とスペースを空けて表記
スクリーンリーダーでは「東 京」は「ひがし きょう」と読み上げられる
マシンリーダブルではなくなる
Text Spacingを使いましょう
1.3.3 感覚的な特徴
モーダルウィンドウの「☓」ボタン
altを含まない画像になっているとだめ
より分かりづらい失敗例
ハンバーガーボタン
誰にとってもよくわからない例
テキスト「メニュー」をつけるだけで認識率が上がる
1.4 判別可能
1.4.1 色の使用
色を判別できない人もいる
意味的に伝わらないかもしれない
文化的に別の意味を持つケースも
文字を併用する
1.4.3 コントラスト (最低限)
実話
「色改善したんですけど見やすくなりました?」「あ〜、そんな項目あったんだ??」
カラーパレットとデザインシステムを整備すると担保しやすい
アシカ
検証方法
2.4 ナビゲーション可能
2.4.2 ページタイトル
タイトルすなわちtitle要素にいれるテキストでもある
https://gyazo.com/a279e685c85526e1e29ceb5c6a44be43
わかる?
コンテキストがわかれば...
このページに直接来たら?
放置していたタブを後になってみたら?
同じ名前のページをいくつも開いたら?
複数ページ開いたときに、何のページかわからない
他のサイトはどうなってるか
Twitter
Google
2.4.3 フォーカス順序
実際にあった登録フォーム
英語ページを日本語ページに対応
CSSで姓・名を反転
視覚的順番と入力順序が一致しない
関心は完全には分離しない
CSSによる反転は悪いのか?
悪くはない、IAに合わせてマークアップ出来ているのが一番ではないか
更に勉強したくなったときは
ガイドラインはあくまでガイドライン。実際に観察して、体験してが重要。
- - -
宿題
あなたの携わっているプロダクトのアクセシビリティを一つ改善してください。
そしてそれについて簡単にまとめてください。
- - -
並び替え前
1.知覚可能
1.1テキストによる代替
1.1.1 非テキストコンテンツ
1.2 時間依存メディア
1.2.1 音声のみ及び映像のみ(収録済み)
1.2.2 キャプション(収録済み)
1.2.3 音声解説、又はメディアに対する代替(収録済み)
1.3 適応可能
1.3.1 情報及び関連性
1.3.2 意味のある順序
1.3.3 感覚的な特徴
1.4 判別可能
1.4.1 色の使用
1.4.2 音声の制御
2. 操作可能
2.1 キーボード操作可能
2.1.1 キーボード
2.1.2 キーボードトラップなし
2.1.4 文字キーのショートカット
2.2 十分な時間
2.2.1 タイミング調整可能
2.2.2 一時停止、停止、非表示
カルーセルの例
2.3 発作と身体的反応
2.3.1 3回の閃光、又は閾値以下
雷が含まれた動画やMVなど
2.4 ナビゲーション可能
2.4.1 ブロックスキップ
Googleの例
ランドマーク移動でもスキップできる
2.4.2 ページタイトル
2.4.3 フォーカス順序
2.4.4 リンクの目的(コンテキスト内)
- - -
次回以降
2. 操作可能
2.5 入力モダリティ
2.5.1 ポインタのジェスチャ
2.5.2 ポインタのキャンセル
2.5.3 名前(name)のラベル
2.5.4 動きに夜起動
3 理解可能
3.1 読みやすさ
3.1.1 ページの言語
3.1.2 一部分の言
3.2 予測可能
3.2.1 フォーカス時
3.2.2 入力時
3.3 入力支援
3.3.1 エラーの特定
3.3.2 ラベル又は説明
4. 堅牢
4.1 互換性
4.1.1 構文解析
4.1.2 名前(name)・役割(role)及び値(value)