アクセシビリティ対策をすることになったので、a11yについてまとめてみた
アクセシビリティとは
アクセシビリティの言葉のとおり、アクセスのしやすさを意味していて、コンテンツの利用がしやすさとほぼ同義だとおもいます。
ユーザービリティは使いやすさ アクセシビリティは、更に幅広い人や状況でも使えることという棲み分けでしょうか。
それがウェブになるとどうなるか。 ウェブコンテンツは、様々なユーザーがそれぞれ異なるデバイスを使ってアクセスし、かつ使用している状況も様々です。
アクセシビリティと言うと、「身体的な障害を持った人のもの」というイメージがつきまといますが、誰かのための特別な対応ではなく、すべての人に向けた普遍的な対応を指します。 身体的な障害を持つ方だけでなく、さまざまな環境・状況にいる方、高齢者なども含んだ考え方です。
すべての人に向けた普遍的な対応ってすごく良い。頑張って作ったサービスだからこそ、一人も不自由なく使ってほしい、私もそう思い、アクセシビリティの勉強をはじめました。
例えば、、、
以下の様に身体の障害がある方はもちろんですが、高齢による状態の変化や一時的な障害があったとしてもコンテンツが利用できることが目指すべき状態だと考えます。
-
身体の障害
-
一時的な障害
-
コンタクト紛失・メガネが壊れた → 画面拡大
-
手の骨折、利き手が使えない状況 → キーボード操作
-
マウスが壊れた、マウスが使えない・使いづらい状況 → キーボード操作
-
アクセシビリティの規格
現在、国内規格のJIS、W3Cの勧告、国際規格のISOが完全に統一されています
-
JIS X 8341-3:2016
-
WCAG 2.0
-
ISO/IEC 40500:2012
ウェブコンテンツのアクセシビリティ
ウェブアクセシビリティに関しては、W3Cが出しているWCAG（ウェブコンテンツアクセシビリティ）が参考になります。
ウェブ・コンテンツ・アクセシビリティ・ガイドライン（WCAG）2.0WCAG 2.0 解説書WCAG 2.0 達成方法集
ウェブアクセシビリティ基盤委員会にはウェブアクセシビリティ方針策定ガイドラインが作成されていますが、多くの起業でアクセシビリティガイドラインが作成・公開されており、非常にわかりやすいものが多いのでこれらを流用している起業も増えてきている印象です。
実際に私が勤務している起業でも、freee のアクセシビリティガイドラインをそのまま使用することにしました。
WCAGの基準はどこまでを目指すか？
WCAGの基準は適合レベルが設けられており、レベルが３段階ある。
-
レベルA
-
レベルAA
-
レベルAAA → 最高レベル
いきなり最高レベルを目指すのはかなりハードルが高いので、まずはA基準を満たしつつ、徐々にレベルを挙げていくのが良さそう。
プロダクトによっては、レベルAを基準にしつつも、レベルAAの基準も満たせるものが出てくるので追加して対応していってもいいかと思う。
WAI_ARIAの対応は必要なのか？
HTMLで表現できる範囲を逸脱したUIを作る時はWAI-ARIA対応が必要という認識を持っている。 基本的には、セマンティックなマークアップを行っていればAria属性は付ける必要はないが、 <div>でマークアップした要素でゴリゴリカスタマイズしたりする場合は、 aria属性をつけて上げる必要がある。
WAI-ARIAはスクリーンリーダー対応をするにあたって重要な役割を担う。
「どのような場面でWAI-ARIAを使うのか？」についてはHTMLで表現できる範囲を逸脱したUIを作る時だと思っている。
-
ランドマーク ariaの
role属性はランドマークになる -
動的なコンテンツの更新（コンテンツが更新されたときにスクリーンリーダーで伝える）
-
キーボードのアクセシビリティ向上（TabIndex）
-
<div>のネストなど複雑なUIを構築する場合
「もう一度言いますが、必要な時だけ使ってください！」 MDNでも繰り返し言われているので、必要な場合のみ使うようにする。
ベストプラクティスは、WAI-ARIAオーサリング・プラクティスで確認する。
アクセシビリティはやればやるほど良い
どこかのカンファレンスで話されていたことが印象的で覚えているのですが、「アクセシビリティはやらなければマイナスというわけではなく、やればやるほどプラスになる加点方式だ」ということ。
やればやるほどプロダクトの質が上がるなら、やらない理由は無いなと個人的には思うわけです。
ただ、どこまで工数を割いていいかは相談しながら。
