Web アクセシビリティスキル

MapRecruit インターフェースが、支援技術を使用しているユーザーを含むすべてのユーザーにアクセス可能であることを保証します。

このスキルを使用する場合

• 新しい React コンポーネントを構築するとき
• 既存の UI をアクセシビリティの退行について監査するとき
• モーダル、ドロップダウン、カレンダーなどの複雑なインタラクティブ要素を作成するとき

使用方法

1. セマンティック構造

• <nav>、<main>、<section> と適切なヘッダー階層(h1〜h6)を使用します。
• すべてのインタラクティブ要素が正しいタグを使用していることを確認します(例:アクションの場合は <button>、ナビゲーションの場合は <a>)。

2. ビジュアルとインタラクション

• コントラスト: テキストの最小コントラスト比 4.5:1 を維持します。
• フォーカス状態: フォーカスリングを非表示(outline-none)にしないでください。ただし、明確な代替フォーカスインジケーターを提供する場合を除きます。
• タップターゲット: すべてのボタンとリンクが、タッチアクセシビリティのために最低 44x44px 以上であることを確認します。

...