Lighthouseで名前のないリンクを指摘されたときの直し方

<header>
<!-- 1. alt のない img だけのロゴのリンク -->
<a href="/" class="logo"><img src="logo.svg" width="120" height="32"></a>
<!-- 2. SVG のアイコンだけのリンク -->
<a href="/feed.xml" class="rss">
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">…</svg>
</a>
</header>
<main>
<h1>新着メモ</h1>
<!-- 3. alt="" の画像だけのリンク（記事カードのサムネイル） -->
<a href="/notes/1" class="thumb"><img src="thumb.svg" width="160" height="90" alt=""></a>
<p>Lighthouse の点数を読む</p>
</main>
<footer>
<!-- 4. CSS で描いたアイコン（中身が空）のリンク -->
<a href="/contact" class="mail"><span class="icon-mail"></span></a>
</footer>

npx lighthouse http://127.0.0.1:8000/bad.html \
  --only-categories=accessibility \
  --output=json --output=html --output-path=./out/bad \
  --chrome-flags="--headless=new --no-sandbox" --quiet

accessibility score: 80
link-name title: Links do not have a discernible name
link-name score: 0 (binary)
- body > header > a.logo | <a href="/" class="logo">
   Fix all of the following:
     Element is in tab order and does not have accessible text
   
   Fix any of the following:
     Element does not have text that is visible to screen readers
     aria-label attribute does not exist or is empty
     aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
     Element has no title attribute
failed accessibility audits: image-alt, link-name

<!-- 1. img の alt にリンク先を表す言葉を入れる -->
<a href="/" class="logo"><img src="logo.svg" width="120" height="32" alt="トップページ"></a>
<!-- 2. aria-label で名前を付ける -->
<a href="/feed.xml" class="rss" aria-label="RSS フィード">
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">…</svg>
</a>
<!-- 3. 画像と見出しを1つのリンクにまとめる -->
<a href="/notes/1" class="thumb"><img src="thumb.svg" width="160" height="90" alt="">
<p>Lighthouse の点数を読む</p></a>
<!-- 4. 画面には出さないテキストを入れる -->
<a href="/contact" class="mail"><span class="icon-mail"></span><span class="visually-hidden">お問い合わせ</span></a>

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

accessibility score: 100
link-name title: Links have a discernible name
link-name score: 1 (binary)
failed accessibility audits: (none)

--- bad.html
- banner:
  - link:
    - /url: /
    - img
  - link:
    - /url: /feed.xml
- main:
  - heading "新着メモ" [level=1]
  - link:
    - /url: /notes/1
  - paragraph: Lighthouse の点数を読む
- contentinfo:
  - link:
    - /url: /contact
--- good.html
- banner:
  - link "トップページ":
    - /url: /
    - img "トップページ"
  - link "RSS フィード":
    - /url: /feed.xml
- main:
  - heading "新着メモ" [level=1]
  - link "Lighthouse の点数を読む":
    - /url: /notes/1
    - paragraph: Lighthouse の点数を読む
- contentinfo:
  - link "お問い合わせ":
    - /url: /contact

<!-- 1. 文字に aria-hidden="true" を付ける -->
<a href="/" class="logo"><img src="logo.svg" width="120" height="32" alt=""><span class="visually-hidden" aria-hidden="true">トップページ</span></a>
<!-- 2. SVG の中に title 要素を入れる -->
<a href="/feed.xml" class="rss">
  <svg viewBox="0 0 24 24" width="24" height="24"><title>RSS フィード</title>…</svg>
</a>
<!-- 3. a 要素に title 属性だけを付ける -->
<a href="/notes/1" class="thumb" title="Lighthouse の点数を読む"><img src="thumb.svg" width="160" height="90" alt=""></a>
<p>Lighthouse の点数を読む</p>
<!-- 4. href のない a 要素（クリックは JavaScript で受ける） -->
<a class="mail" onclick="location.href='/contact'"><span class="icon-mail"></span></a>

accessibility score: 92
link-name title: Links do not have a discernible name
link-name score: 0 (binary)
- body > header > a.logo | <a href="/" class="logo">
failed accessibility audits: link-name

--- partial.html
- banner:
  - link:
    - /url: /
  - link "RSS フィード":
    - /url: /feed.xml
    - img "RSS フィード"
- main:
  - heading "新着メモ" [level=1]
  - link "Lighthouse の点数を読む":
    - /url: /notes/1
  - paragraph: Lighthouse の点数を読む
- contentinfo

--- bad.html: a.logo → a.rss → a.thumb → a.mail → body → a.logo
--- partial.html: a.logo → a.rss → a.thumb → body → a.logo → a.rss