「リンクに識別可能な名前が指定されていません」と言われた時

新しいPageSpeed Insights 対策．

PageSpeed Insights で ユーザー補助 という種別の中に「リンクに識別可能な名前が指定されていません」という文言が出てくるときがある．

「リンクに識別可能な名前が指定されていません」と指摘を受けた時

詳細のリンクを押すとLinks must have discernible text(リンクにはプログラムで決定可能なテキストが必要です)に飛べる．

いろいろな説明が書いてあるが，例えば，

onmouseover(), mouseover(), hover(), onmouseout(), mouseout() などのデバイス固有の JavaScript イベントを避けて，onfocus(), focus(), onblur() や blur() などのデバイスに依存しないイベントに置き換える

という部分など参考になる．

リンクには

• キーボードだけでも
• 音声だけでも

アクセスできるようにしなければならない．
視覚障碍のある人やマウスが使えない人でもアクセス出来なければダメということでユーザーフレンドリー(親切)にしなさいということだ．

A タグで囲まれている画像に alt がない場合

また，画像をリンクにした場合にその画像に ALT 属性がついていないとそのリンクが何を意味にしているのか画像をみないと分からない状態になってしまう．
そのような状態はさけなければならない．
どうしても IMG タグに ALT 属性を挿入できないという事態は考えにくいが，そのような場合には A タグに ARIA-LABEL という属性を挿入しておくことでリンクに識別可能な名前を付けることが出来るようになる．

PageSpeed Insights 対策

PageSpeed Insights 対策の一覧．他の対策は以下を見てください．

• CLS (Cumulative Layout Shift) とは
• LCP (Largest Contentful Paint) とは
• FID (First Input Delay) とは
• Youtube での複数動画を埋め込みページの高速化
• オフスクリーン画像の遅延読み込み
• ウェブフォント読み込み中の全テキストの表示
• 次世代フォーマットでの画像の配信
• 第三者コードの影響を抑えてください
• 静的なアセットと効率的なキャッシュポリシーの配信
• FCP (First Contentful Paint) とは
• テキスト圧縮の有効化
• タップ ターゲットのサイズが適切に設定されていません
• 不適切なアスペクト比の画像が表示されています
• リンクはクロールできません
• 背景色と前景色には十分なコントラスト比がありません
• 適切なサイズの画像
• ページ上で視認性の高い動画は検出されませんでした
• 「INP の問題」の改善方法