アクセシビリティの本まとめ

導入

近年、アクセシビリティが重要視されてきているため(ムーテレ、メモしたノートなどを見て)、できるところから改善してみました。今回はコーディングをメインにした取り組み内容を紹介します。

アクセシビリティを「a11y」と略す。

アクセシビリティとは

ユーザービリティとの違い

スクリーンリーダー、キーボードだけで操作やってみる。

よくある事例の課題

・キーボードフォーカスが見えずに全く操作できない

・マウスオーバーすると要素が消滅したように見えて操作できない

「どういった障害があり、ユーザーがどのように対処してwebにアクセスしているか」を作り手が理解しておく必要がある。

「Webアクセシビリティ」

弱視・ロービジョン(視力が低い、視野が狭い、輪郭がぼやけて見えて中心だけ見える、眩しさを感じるなど)

→初期設定のままでは見えづらさを感じたり、長時間作業する際に苦痛を感じたりする場合がある。

OSやブラウザでの対処法

  • 文字拡大や画面拡大
  • 視力によってはスクリーンリーダーやテキスト読み上げ機能を併用
  • 画面の眩しさを軽減させたり、コントラストを高めて文字や図を読みやすくするため、ダークモードや色の反転、ハイコントラストモードなどの色変更

色覚特性・色弱(隣り合う色同士の区切りを見つけられなかったり、強調表示が逆に薄く見えたりする)

OS側で色を置き換える機能→カラーフィルタ

よく使われるスクリーンリーダー

macOS 、iOS→ VoiceOver

WCAG(2.1)-Webアクセシビリティの標準

構成 4つの原則ー13のガイドライン ー78項目の達成基準

4つの原則

各社独自のガイドライン・チェックリストを作成し、公開している

・freeアクセシビリティー・ガイドライン

・ameba accessibility guidelines

・ウェブアクセシビリティ簡易チェックリスト SmartHR

レベルAとマシンリーダビリティ(機械可読性)

レベルAは最低ラインであり、この基準を満たすと、ユーザーが支援技術を駆使すればWebサイトにアクセス可能になるものが多くを占めています。逆にいえば、レベルAの基準を満たしていなければ支援技術を用いてもまったくアクセスできなくなる場合があるということです。

レベルAAとヒューマンリーダビリティ

レベルAAは、この基準を満たすと、ユーザーが支援技術なしでもWebサイトにアクセスできるようになるものが多くを占めています。

Webアクセシビリティに取り組む理由

1、ユーザーを増やせる

2、ユーザビリティが高められる。