CSS Nite Shift14「ウェブデザイン行く年来る年」〜辻ちゃん・ウエちゃんのAccessiブル GoGo!「アクセシビリティ ゆく年来る年 2020」の巻
株式会社インフォアクシア 植木真さん／株式会社コンセント 辻勝利さん
アクセシビリティ残念あるある2020
対象：41サイト/768ページ/問題点18829件
1. キーボード操作時にフォーカスインジケータが表示されない／5,516件
2. 画像の代替テキストが適切ではない／3,928件
3. 文字色と背景色のコントラストが不足している／1,811件
4. キーボードで操作できない／1,299件
5. 見出しが適切にマークアップされていない／959件
6. コンテンツの表示／非表示の切り替えが明示されていない／619件
7. 読み上げ順序が崩れている／467件
8. フォーカス移動順序に問題がある／401件
9. フォームコントロールとラベルが関連づけられていない／317件
10. 現在位置（選択中）を見た目だけで示している／283件
現在位置（選択中）を見た目だけで示している
・メニューのcurrent表示、カレンダー、フォームステップなど
・aria-current属性を利用
コンテンツの表示／非表示の切り替えが明示されていない
・ハンバーガーメニューの開閉ボタン、アコーディオン
・aria-expanded／aria-hidden属性を利用
状態の変化に応じて値を動的に切り替える
キーボードで操作できない
・メニューの開閉やアコーディオン開閉の実装
・ボタンにはbutton要素を利用する
文字色と背景色のコントラストが不足している
画像の代替テキストが適切ではない
・CSSの背景画像を用いている
・代替テキストの内容が画像と同等ではない
・img要素にalt属性がない
→ alt属性がなければなにもないことになる
→ linkが設定されているとURLが読み上げられる
・空のalt属性で代替テキストがない
・同じリンク内のテキストと同じ文言
・アイコン画像に代替テキストなし
・写真であることが説明されていない
・svg要素を使用していて代替テキストがない
→ svg要素内のtitle要素とdesc要素で代替テキストを提供
→ aria-describedby属性を利用（desc属性と併用する）
→ role=imgを指定
・ボタンの機能を説明していない
・装飾画像に不要な代替テキストがある
・代替テキストの文言に誤字がある
キーボード操作時にフォーカスインジケータが表示されない
・outline:none; の指定がされている
・What Input? というライブラリを使用する
→ マウス操作、キーボード操作それぞれの場合のスタイルを変えることができる
→ デザインと操作しやすさを担保できる
アクセシビリティの未来
アクセスビリティでコンテンツやサービスの進化が問われる
→ 今年ECやブランドサイトの相談が増えた
→ コロナ禍でオンラインでのサービス／サイトの需要は上がっている
参考
zoomのアクセシビリティ
https://explore.zoom.us/jp-jp/accessibility.html
WAI-ARIA属性
YouTubeチャンネル「AccessiブルGoGo!」#a11ygogo
Webアクセシビリティ確保 基本のキ