アクセシビリティの本まとめ
導入
近年、アクセシビリティが重要視されてきているため(ムーテレ、メモしたノートなどを見て)、できるところから改善してみました。今回はコーディングをメインにした取り組み内容を紹介します。
アクセシビリティを「a11y」と略す。
アクセシビリティとは
ユーザービリティとの違い
スクリーンリーダー、キーボードだけで操作やってみる。
- よくある事例で課題を知る
- チェックポイント
- よくある事例を改善する(before→afterを載せる)
よくある事例の課題
・キーボードフォーカスが見えずに全く操作できない
・マウスオーバーすると要素が消滅したように見えて操作できない
「どういった障害があり、ユーザーがどのように対処してwebにアクセスしているか」を作り手が理解しておく必要がある。
「Webアクセシビリティ」
弱視・ロービジョン(視力が低い、視野が狭い、輪郭がぼやけて見えて中心だけ見える、眩しさを感じるなど)
→初期設定のままでは見えづらさを感じたり、長時間作業する際に苦痛を感じたりする場合がある。
OSやブラウザでの対処法
- 文字拡大や画面拡大
- 視力によってはスクリーンリーダーやテキスト読み上げ機能を併用
- 画面の眩しさを軽減させたり、コントラストを高めて文字や図を読みやすくするため、ダークモードや色の反転、ハイコントラストモードなどの色変更
色覚特性・色弱(隣り合う色同士の区切りを見つけられなかったり、強調表示が逆に薄く見えたりする)
OS側で色を置き換える機能→カラーフィルタ
よく使われるスクリーンリーダー
macOS 、iOS→ VoiceOver
認知・学習障害がある多くのケースで、複雑で多段階のプロセス(フォームへの記入、データの正確な入力、必要なコンテンツや機能の検索など)を進めようとする際に、認知的疲労に悩まされることがある。エラーを最小限に抑え、タスクを完了するためのサポートを必要とする。(56p)
WCAG(2.1)-Webアクセシビリティの標準
構成 4つの原則ー13のガイドライン ー78項目の達成基準
4つの原則
- 知覚可能
- 操作可能
- 理解可能
- 堅牢
各社独自のガイドライン・チェックリストを作成し、公開している
・freeアクセシビリティー・ガイドライン
・ameba accessibility guidelines
・ウェブアクセシビリティ簡易チェックリスト SmartHR
レベルAとマシンリーダビリティ(機械可読性)
レベルAは最低ラインであり、この基準を満たすと、ユーザーが支援技術を駆使すればWebサイトにアクセス可能になるものが多くを占めています。逆にいえば、レベルAの基準を満たしていなければ支援技術を用いてもまったくアクセスできなくなる場合があるということです。
レベルAAとヒューマンリーダビリティ
レベルAAは、この基準を満たすと、ユーザーが支援技術なしでもWebサイトにアクセスできるようになるものが多くを占めています。
実務的にはレベルAAに適合することが一つの目標
Webアクセシビリティに取り組む理由
1、ユーザーを増やせる
- アクセスできない人を減らせる
- アクセスできると口コミが広まり、市場が生まれる。
- サイトやサービスの枠を超えて情報が広がる。
2、ユーザビリティが高められる。