アクセシビリティを考えた開発：開発者のためのガイド

なぜアクセシビリティが重要なのか

アクセシブルなアプリケーションを構築することは、単に正しい行いというだけではなく、ビジネスとしても優れた選択です。世界中で 10 億人を超える人々が、何らかの障がいとともに暮らしています。

基本原則（POUR）

• 知覚可能（Perceivable）: 情報はユーザーが認識できる形で提示されなければならない
• 操作可能（Operable）: UI コンポーネントはすべてのユーザーが操作できなければならない
• 理解可能（Understandable）: 情報と UI は理解できるものでなければならない
• 堅牢（Robust）: コンテンツはさまざまな技術に対応できるだけの堅牢性を備えていなければならない

実装すべき主要な領域

セマンティックな HTML

本来の用途に沿った適切な HTML 要素を使いましょう。スクリーンリーダーはセマンティックなマークアップに依存しています。

キーボードナビゲーション

すべてのインタラクティブな要素がキーボードで操作できるようにしましょう。マウスを使わずにアプリをテストしてみてください。

色とコントラスト

十分な色のコントラスト（通常のテキストで 4.5:1）を保ちましょう。情報を伝えるのに色だけに頼ってはいけません。

ARIA ラベル

支援技術に追加の文脈を提供するために ARIA 属性を使いましょう。

フォーカス管理

視認できるフォーカスインジケーターと論理的なフォーカス順序は、キーボードユーザーにとって不可欠です。

アクセシビリティのテスト

• Lighthouse や axe などの自動化ツールを使う
• スクリーンリーダー（VoiceOver、NVDA）でテストする
• 手動でのキーボードテストを実施する
• 障がいのあるユーザーをテストに参加させる

SupaCode のアクセシビリティ

SupaCode が生成するコードは、適切なセマンティックマークアップ、ARIA ラベル、キーボードナビゲーション対応など、アクセシビリティのベストプラクティスに従っています。