アクセシビリティ設計の実践

アクセシビリティ設計の実践

はじめに

アクセシビリティ（a11y）は、障がいの有無や環境に関わらず、すべてのユーザーがプロダクトを利用できるようにする設計思想です。法的要件としても重要性が高まっており、2024年4月の障害者差別解消法改正により、日本の民間企業にも合理的配慮が義務化されました。デザインシステムにアクセシビリティを組み込むことで、プロダクト全体の品質を底上げできます。

WCAG 2.1の4原則

Web Content Accessibility Guidelines（WCAG）の基本原則を理解しましょう。

• ◆知覚可能: 情報やUIコンポーネントを、ユーザーが知覚できる方法で提示する。画像に代替テキスト、動画に字幕など
• ◆操作可能: UIコンポーネントとナビゲーションを操作可能にする。キーボードだけで全機能が使えること
• ◆理解可能: 情報とUIの操作が理解できるようにする。一貫性のあるナビゲーション、エラーメッセージの明確化
• ◆堅牢: コンテンツが現在および将来の技術で解釈できるようにする。正しいHTMLマークアップ、ARIA属性

カラーとコントラスト

色のアクセシビリティはデザインシステムの根幹に関わります。

• ◆コントラスト比: 通常テキストは4.5:1以上、大きなテキスト（18pt＝24px以上、または14pt≒18.7px以上の太字）は3:1以上が必須
• ◆色だけに頼らない: エラー表示を赤色だけで表現しない。アイコンやテキストラベルを併用する
• ◆チェックツール: Figmaプラグイン「Stark」やChrome拡張「axe DevTools」で検証
• ◆ダークモード: ダークモードでもコントラスト比を満たすことを確認する。薄い背景色に注意

キーボードアクセシビリティ

マウスなしでも全機能が使えるようにする設計です。

• ◆タブ順序: Tab キーでフォーカスが自然な順序（左上→右下）で移動すること。tabindex の適切な設定
• ◆フォーカスインジケータ: 現在フォーカスされている要素が視覚的に明確であること。outlineを消さない
• ◆キーボードショートカット: 頻繁に使う操作にはショートカットを用意。Escでモーダルを閉じるなど
• ◆フォーカストラップ: モーダル表示中はモーダル内にフォーカスを閉じ込める

コンポーネントのARIA設計

各コンポーネントに必要なARIA属性を定義します。

• ◆ボタン: 基本はネイティブのbutton要素を使う（role="button"はdiv等で代用する場合のみ付与）、aria-label（テキストがない場合）、aria-disabled
• ◆モーダル: role="dialog"、aria-modal="true"、aria-labelledby（タイトルへの参照）
• ◆タブ: role="tablist"、role="tab"、role="tabpanel"、aria-selected
• ◆トースト: role="alert"またはrole="status"、aria-live="polite"
• ◆ドロップダウン: 選択肢から選ぶ用途はrole="listbox"・role="option"（操作コマンドを並べるメニューの場合のみrole="menu"・role="menuitem"）、aria-expanded、aria-haspopup

テストと監査

アクセシビリティを継続的に検証する仕組みを構築します。

• ◆自動テスト: axe-core、Lighthouse のアクセシビリティスコアをCI/CDに組み込む
• ◆スクリーンリーダーテスト: VoiceOver（Mac）、NVDA（Windows）で実際に操作して検証
• ◆キーボードテスト: マウスを使わずにサイト全体を操作できるか確認
• ◆ユーザビリティテスト: 実際の障がい者ユーザーにプロダクトを使ってもらいフィードバックを得る

🏋️実践ワーク

以下の課題に取り組みましょう。

• ◆自分のプロダクトのカラーパレットをStarkでコントラスト比チェックしてみましょう
• ◆キーボードだけで自分のサイトを操作し、問題点をリストアップしてみましょう
• ◆ボタン、モーダル、フォームの3コンポーネントにARIA属性を追加してみましょう

📝まとめ

アクセシビリティはデザインシステムの品質の根幹です。WCAG 2.1の4原則を理解し、カラーコントラスト、キーボード操作、ARIA属性を適切に設計することで、すべてのユーザーに使いやすいプロダクトを実現できます。次の章では、レスポンシブデザインシステムの設計を学びます。