デフォルトでアクセシブルなインターフェースを構築する

アクセシビリティはプロダクト品質だ

アクセシビリティはしばしば最終コンプライアンス通過として扱われる。その頃には、コンポーネントセマンティクス、フォーカス順、色システム、ナビ構造、モーションといった基盤選択の修復は高い。設計とコンポーネント開発の制約として扱い、正しいデフォルトをどこでも再利用できるようにしろ。

目標は別の簡略体験ではない。異なる入力方法、視覚、聴覚、認知、言語、デバイス条件をまたぎ、情報とアクションが利用可能なインターフェースだ。これらの改善は、特にストレスや不完全な環境下で、しばしばすべてのユーザーに恩恵がある。

ネイティブセマンティクスから始める

構造には見出し、アクションにはボタン、ナビにはリンク、コントロールにはラベル、関連項目にはリストを使え。ネイティブ要素は、カスタムコンテナがさもなければ再現しなければならないキーボード振る舞い、アクセシビリティロール、プラットフォーム期待をもたらす。

ARIAは関係と動的状態を明確にできるが、基盤振る舞いが間違ったインタラクションを直せない。予測可能なタブ順を作り、可視フォーカスを保ち、すべてのポインタインタラクションにキーボード等価を保証しろ。モバイルでは意味あるアクセシビリティラベルを提供し、読み上げられるべき仕方でコンテンツをグループ化しろ。

• 論理的な見出し階層を保つ
• アイコンのみのコントロールにアクセス可能な名前を付ける
• 色だけで意味を符号化しない
• タッチターゲットを快適なサイズに保つ

変化のあいだフォーカスを管理する

シングルページナビ、ダイアログ、ドロワー、アニメーション遷移は、文書のフルロードなしにインターフェースを変える。キーボードとスクリーンリーダーのユーザーが新しい文脈の始まりを理解できるよう、意図的にフォーカスを移せ。一時面が閉じたら、トリガーしたコントロールにフォーカスを戻せ。

真のモーダルインタラクション以外でフォーカスを閉じ込めろ。重要な非同期成果は抑制されたライブリージョンで知らせ、ルーティンな視覚更新で支援技術を溺れさせるな。告知は何が変わったか、ユーザーが行動すべきかを答えるべきだ。

視覚とモーションの好みを尊重する

テキストとインタラクティブコントロールは、プレースホルダー、無効コントロール、ボーダー、ホバー指標を含むあらゆるテーマと状態で十分なコントラストが要る。ズームとテキストリサイズを、アクションを切り取ったり隠したりせずサポートしろ。レスポンシブデザインは固定ラベルを仮定せず、コンテンツに適応すべきだ。

モーションは連続性を伝えられるが、不快も引き起こす。reduced-motionの好みを尊重し、方位を保つより単純な遷移を提供しろ。重要な情報をアニメーションやホバー状態のあいだだけ利用可能にするな。

人とツールでテストする

自動チェックは欠けた名前、無効な関係、多くのコントラスト問題を捕らえ、継続的インテグレーションで価値がある。フォーカス移動が理解しやすいか、スクリーンリーダーの言い回しが有用か、ワークフローが認知的に疲れやすいかは判断できない。

キーボードのみ、スクリーンリーダー、ズーム、高コントラスト設定で主要ジャーニーを定期的にナビゲートしろ。調査とテストに障害のあるユーザーを含めろ。発見が共有コンポーネントとデザイン規則を改善するとき——問題が見つかったページだけではないとき——アクセシビリティは成熟する。