Lighthouse

監査カテゴリ 機能
Performance パフォーマンスを測定し、ページの読み込み速度を上げる
Accessibility すべてのユーザーがコンテンツにアクセスし、サイト内を効率的に移動できるかどうかを確認
Best practices ウェブページのコードの健全性を改善
SEO ページが検索エンジンの結果ランキング向けに最適化されていることを確認
灯台  |  Lighthouse  |  Chrome for Developers

Accessibility

Webアクセシビリティを検証できます。

リンクに識別可能な名前が指定されています (Links have a discernible name)

aria-label属性を付けることで対処できます。 Links must have discernible text | Axe Rules | Deque University | Deque Systems Using aria-label for link purpose - WCAG WG aria-label - ARIA | MDN

背景色と前景色には十分なコントラスト比があります (Background and foreground colors have a sufficient contrast ratio)

WCAGのレベルAAでは、

  • 小さい文字 … 4.5:1
  • 大きい文字 … 3:1

のように定められています。Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C

修正するにはElements must meet minimum color contrast ratio thresholdsでコントラスト比を算出し、[WCAG Standard]の[AA]がPassとなるように調整します。簡単にはForeground ColorとBackground Colorに現在の色を入力し、Lightness (明度) の値を変えます。

参考