Webアクセシビリティの基本知識
こんにちは。WEBエンジニアのホリさんです。
今回が第9回目の記事です。
ここでは、Webアクセシビリティとは何か、何をすればいいか整理したいと思い、まとめました。
Webアクセシビリティとは
引用：https://weba11y.jp/basics/accessibility/accessibility_index/
より多くのデバイス、利用環境をサポートすることによって、一人でも多くのユーザーに、より多くの場面や状況で、Webサイトやアプリケーション等で提供する情報、サービスや機能を利用してもらえるようにすること。
要するに、Webページにあるさまざまな情報や機能の利用しやすさを意味しています。
自分は、多くのデバイス、OS等の利用環境で利用できるようにするための指標の1つであると捉えました。
引用：https://weba11y.jp/basics/accessibility/accessibility_index/
私たちはアクセシビリティについて考え方を改める必要がある。多くの人は、W3Cによるオフィシャルな定義から「Webアクセシビリティとは、障害のある人がWebを使えるようにすることを指す。」と教えられてきた。これは間違いだ。Webアクセシビリティは、みんながWebを使えるようにすることである。
また、上記を拝見して 「誰か・特定の人にやるのではなく、全てのユーザーが使えるように改善すること」 がWebアクセシビリティだと思いました。
その改善に必要な指標がWCAGのガイドラインにあります。
Web Contents Accessibility Guidelines（WCAG）
W3C（World Wide Web Consortium）と呼ばれるWebの世界的標準化を目指す国際的な団体がウェブコンテンツのアクセシビリティに関するガイドラインを作成しています。
特徴
達成基準
「レベルA」から「レベルAAA」が設定されている
レベルA → 最低限必要なレベル
レベルAA → 諸外国で公的機関に求められるレベル
レベルAAA → 発展的なレベル
日本の代表的な公共機関では、警視庁や厚生労働省はレベルAAを指標としているようです。
レベルAAAは不可能みたいですね、、どこまで対応できるか明確にしておくことが重要かなと思います。
freeeは独自のガイドラインを作成して公開しているので、参考にすると良いかもしれません（こういった資料を作成して公開していただいているのは有り難い）
原案 → 草案 → 勧告
ガイドラインが作成されるまで、「原案 → 草案 → 勧告」のプロセスがあります。
W3Cに関わる組織全体から認められると、勧告文書になり正式に公開されます。
現在、2.0, 2.1, 2.2, 3.0のバージョンがあり、2.1が勧告となっているので2.1がオススメです。
もうすぐに2.2が勧告される（2022.6月時点）ようなので、2.2も抑えておきたいです。
次は、何をしたらWebアクセシビリティを実現できるか代表的なものを紹介していきます。
WAI-ARIA
HTMLだけでは不足しているセマンティクス（意味）を属性で、HTML構造や状態補完することができ、適切な情報を伝えられるようになります。
基本的には、決められた「属性」をHTMLタグに追記して使用していきます。
使い方については、WAI-ARIAの基本が参考になると思います
（後日、WAI-ARIAについて記事を書いてみます）
検証ツール
Lighthouse
Google Chromeの拡張機能で無料になります。アクセシビリティの改善するべき場所や改善案を見ることができます。その他にもパフォーマンスやSEO項目もチェックできます
axe DevTools
よく使われているアクセシビリティのチェックツールになります。
a11yで全部の項目をチェックしてくれるわけではないので注意が必要です。
freeeがチェック方法について、説明していただいているので参考になります。
eslint-plugin-jsx-a11y
ESlintのプラグインでアクセシビリティのルールを追加してくれます。
Contrast CheckerやNVDA等、色々ありますが、上記はよく使われてそうなので一度は試して見ると良いかもしれません。
補足
米国では、アクセシビリティの訴訟が増えています。高齢者や視覚障害者のユーザーから閲覧やオンラインでの購入ができないことが理由で、訴訟が起きている様子です。
そのため、米国ではアクセシビリティについての法規制があります。
日本の企業では「努力義務」としているため、規則はないですが今後は法規制が出来てしまう可能性があるかもしれないです。
まだ導入していない企業は、小さなことから改善してWebアクセシビリティ体制を整えていく必要があるなと感じました。
まとめ
Webアクセシビリティは、全てのユーザーが利用できるようにするための取り組みであります。
そのためには、WCAGのガイドラインを参考にしつつ、WAI-ARIAや検証ツールを駆使して改善していく必要があることが分かりました。
日本では、米国に比べるとWebアクセシビリティはまだ浸透していないので、自分もキャッチアップして少しでも誰かの影響になれるように頑張っていきます！
Discussion