同じIDを持つ要素がページ内に複数存在しない
概要
この基準では、ウェブページ内で同じid属性値を持つ要素が複数存在しないことを確認してください。HTMLでは、IDは識別子として一意であるべきです。これにより、スクリーンリーダーやスクリプトが特定の要素を正確に識別できるようになります。
メリット
- 視覚障害のあるユーザー: スクリーンリーダーなどの支援技術はIDを使って要素を特定することがあります。IDが重複している場合、IDによって紐づけられた情報が正しく認識されなくなります。
- ウェブ開発者: スクリプトやスタイルシートでIDを使って要素を操作する場合、IDの一意性が保証されていると、予期せぬ動作やスタイルの適用ミスを防ぐことができます。
達成方法
idの一意性を保証する:
- どんな要素にも、ページ内で一度だけ使用されるIDを割り当てます。同じIDがページ内で複数回使用されないようにします。
生成されるidに注意する:
- ウェブアプリケーションが動的に要素を生成する場合、スクリプトが一意のIDを生成するようにします。特に、ユーザーの操作によって要素が繰り返し生成される場合は注意が必要です。
開発ツールを用いたidの検証:
- 開発者ツールやアクセシビリティチェックツールを使用して、ページ内に重複するIDがないかを確認します。
テスト方法
- HTMLコードの手動確認:
- ページのHTMLコードを見て、同じIDが複数回使用されていないかを手動でチェックします。
- 自動検証ツールの利用:
- HTML検証ツールやアクセシビリティチェックツールを利用して、ページ内のIDの重複をチェックします。
- ブラウザの開発者ツールを使用する:
- ブラウザの開発者ツールを使用して、特定のIDに関連する要素を検索し、そのIDがページ内で一度だけ使われているかを確認します。