はじめに
日本では社会課題として少子高齢化が進んでいることから、今後アプリケーションを利用するユーザー層もますます高齢化していくと予想ができると思う。
これまで「ITに慣れた若年層」を前提として設計されがちな UI も、今後は
- 視力が低下している人
- マウス操作が難しい人
- 色の識別が難しい人
- 音声読み上げを利用している人
など、さまざまなユーザーを想定する必要があると感じる。
現在フロントエンド開発に携わる中で、「動くこと」や「見た目の美しさ」だけでなく、誰でも使いやすい設計が今後より重要になっていくと感じ、WCAG について学習した。
本記事では、学習内容の整理と、私自身感じたことを記述していこうと思う。
WCAGとは
WCAG（Web Content Accessibility Guidelines）とは、
W3C（World Wide Web Consortium）が策定しているWebコンテンツのアクセシビリティに関して、ウェブサイトやウェブコンテンツができるだけ多くの人に公平に利用されるために設けられた国際的なガイドラインである。
現在主流な WCAG 2.1 / 2.2 で、日本では「JIS X 8341-3」としても規格化されてる。
WCAGは次の4原則で構成されてる。
1. 知覚可能（Perceivable）
web コンテンツにおける情報や UI コンポーネントが、ユーザーに知覚できること。
例：
- 画像に代替テキスト（alt）を設定する
- 十分なコントラスト比を確保する
- 音声コンテンツに字幕を付ける
2. 操作可能（Operable）
ユーザーがUIを操作できること。
例：
- キーボードのみで操作可能
- フォーカスが視覚的に分かる
- 制限時間を延長できる
3. 理解可能（Understandable）
情報や操作方法が理解できること。
例：
- 入力エラーの内容が明確
- 一貫したナビゲーション
- 専門用語の多用を避ける
4. 堅牢（Robust）
コンテンツが多様な技術やデバイスで互換性を確保しながら堅牢に動作すること。
例：
- 正しいHTML構造
感じたこと
◯ 上記観点全てを意識して完璧な UI を作成することはハードルが高くない？？
上に4つの原則を満たすための様々な観点をあげたが、正直全てを頭にインプットして、実装中に意識しながら、アクセシビリティの高い UI を設計することは、少し困難であると感じた。なので、意識しやすい、効果が高い、と個人的に感じるもののみに抽出して、まずは業務に活かしていきたいと思う。上記条件を個人的に満たすと感じる観点を以下で整理する。
- エラー内容が明確である
- お客様からの問い合わせを削減でき、カスタマーセンターにおける対応の負荷が軽減する
- 保守においても、先進めできない条件を整理することが必然と求められるので安定性が増す
- 正しい HTML 構造
- 技術やデバイスの変化や進化が著しい現代において、できる限り高い互換性を保つことで不具合等を減らすことができる
- 公式 doc に合わせた一貫した設計を実現することで、保守性を高める
- 例えば
<div onclick="submit()">送信</div>ではなく、<button type="submit">送信</button>とするだけで、「キーボード操作が可能になる」「スクリーンリーダーが適切に認識できる」といった恩恵を受けられる。
- 例えば
- 専門用語の多用を避ける
- お客様からの問い合わせを削減でき、カスタマーセンターにおける対応の負荷が軽減する
- エンドユーザー目線で設計する意識が習慣化する
◯ WCAG 対応はコストか？？
実務では、「工数が増える」「デザインの制約になる」といった懸念が挙がることもあるあるなのかなと感じている。実際、既存プロダクトへの後付け対応や、大規模な改修が必要な場合には一定のコストが発生すると思っている。
しかし一方で、アクセシビリティを意識した設計は、
- セマンティックな設計 → 保守性向上
- 一貫した UI → UX 向上
- 明確なエラー設計 → 問い合わせ削減
といった副次的なメリットももたらすので、長期的な観点ではメリットの方が大きいと感じている。また、新規開発においては、最初から WCAG を意識した設計を行うことで、後から大きな改修を行うよりもコストが少ないので、圧倒的にメリットの方が大きいと感じている。（私の所感）
おわりに
高齢化社会が進む中で、Webアクセシビリティは「理想論」ではなく「必須要件」になっていくと感じていて、「特別な対応」ではなく、「品質の一部」と捉えるべきだと考えている。
この意識を持ちながら、「見た目が良い」「動作する」だけでなく、「誰でもどこでも使える・使いやすい」プロダクトを作れるよう、今後も学び続けたいと思う。
参考
-
WCAG 2.2（W3C）
-
WCAG 2.1（W3C）
-
JIS X 8341-3