このルールがチェックする内容
リンクに認識可能なテキストが存在することを確認してください.
なぜ重要なのか
WCAG 2.4.4と4.1.2では、リンクにその目的を説明するアクセシブルな名前が求められます。
修正方法
- 名前のないリンクを見つけます。ほとんどは<a>タグ内のアイコンや画像です。
- リンク内に視覚的に非表示のテキストを追加するか、aria-label="Instagram"やaria-label="Cart"のようなaria-labelを追加します。
- リンクが画像を囲んでいる場合は、代わりにその画像に意味のある代替テキストを付けます。
修正の確認方法
- 再スキャンし、link-nameがなくなったことを確認します。
- スクリーンリーダーを起動した状態でTabキーで各リンクに移動し、読み上げられる名前を聞いて確認します。
FixReportsが検出する方法
当社のスキャンは、テストする各ページで実際のChromeブラウザを使ってaxe-coreのルールlink-nameを実行し、不合格の要素ごとに、そのページ、マークアップ、該当する場合はスクリーンショットを報告します。
自動テストで確認できるのは、この特定の問題が存在することです。ページのそれ以外の部分がアクセシブルかどうかはわかりません。人がページを確認して初めて見つかるバリアもあります。