CSS Nite Shift14「ウェブデザイン行く年来る年」〜辻ちゃん・ウエちゃんのAccessiブル GoGo!「アクセシビリティ ゆく年来る年 2020」の巻

CSS Nite Shift14「ウェブデザイン、行く年来る年」

株式会社インフォアクシア 植木真さん／株式会社コンセント 辻勝利さん

アクセシビリティ残念あるある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 Nite Shift13「ウェブデザイン、行く時代来る時代」

画像の代替テキストが適切ではない

・CSSの背景画像を用いている
・代替テキストの内容が画像と同等ではない
・img要素にalt属性がない
　→　alt属性がなければなにもないことになる
　→　linkが設定されているとURLが読み上げられる
・空のalt属性で代替テキストがない
・同じリンク内のテキストと同じ文言
・アイコン画像に代替テキストなし
・写真であることが説明されていない
・svg要素を使用していて代替テキストがない
　→　svg要素内のtitle要素とdesc要素で代替テキストを提供
　→　aria-describedby属性を利用（desc属性と併用する）
　→　role=imgを指定
・ボタンの機能を説明していない
・装飾画像に不要な代替テキストがある
・代替テキストの文言に誤字がある

キーボード操作時にフォーカスインジケータが表示されない

・outline:none; の指定がされている
・What Input?　というライブラリを使用する
　→　マウス操作、キーボード操作それぞれの場合のスタイルを変えることができる
　→　デザインと操作しやすさを担保できる

What Input?

アクセシビリティの未来

アクセスビリティでコンテンツやサービスの進化が問われる
→　今年ECやブランドサイトの相談が増えた
→　コロナ禍でオンラインでのサービス／サイトの需要は上がっている

参考

zoomのアクセシビリティ
https://explore.zoom.us/jp-jp/accessibility.html


WAI-ARIA属性

Accessible Rich Internet Applications (WAI-ARIA) 1.1

YouTubeチャンネル「AccessiブルGoGo!」#a11ygogo

a11ygogo

Webアクセシビリティ確保　基本のキ


Webアクセシビリティ確保 基本の「キ」｜実践ノウハウ｜エー イレブン ワイ［WebA11y.jp］