リンク

テストページに関する注意

このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。

これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。

このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。

リンクはページやセクション間を移動するための基本的なナビゲーション要素です。キーボード操作に対応し、支援技術に適切に伝わるよう実装する必要があります。

✅ href 属性を備えた適切なリンク。キーボードアクセスが可能で、支援技術にもナビゲーション要素として明確に伝わります。

❌ href のない a 要素は機能的なリンクではありません。JavaScript でリンク動作を実装していても、キーボードアクセスや支援技術への適切な伝達が行われません。

あとでリンクになる場所を、 href なしの a 要素で示すことがあります。支援技術はただのテキストとして認識します。

⚠️ role="link" と tabindex="0" と JavaScript でリンクの機能を再現しようとしたもの。コンテキストメニュー（右クリックメニュー）などから「新しいタブで開く」操作ができないなど、リンクの実装としては不十分です。

example.com

⚠️ 新しいウィンドウ/タブで開くリンク。強制的に新しいウィンドウ/タブが開くため、ユーザーの負担が増えることがあります。本当に必要なのかを検討してください。

❌ アクセシブルネームの無いアイコンだけのリンク。この状態ではスクリーンリーダーはURLの一部を読み上げたりすることがあり、ユーザーはリンク先や目的を理解できません。

✅ SVG に role='img' と aria-label を付与し、アイコンの名称を提供する例。セマンティクスを保ちながらアクセシブルにできます。

✅ アイコンと同じ意味をもつテキストによるニンク。アイコンの意味は装飾的であるため、aria-hidden='true' を付与しています。