修正前

GoogleのPageSpeed Insightsで、うちのサイト（https://mofuh.com）をみてもらいました。
結果は画像の通り。

思ったよりも良くて安心……。
とはいえ、Accessibilityに少し問題があるようです。確認してみます。

ARIA progressbar elements do not have accessible names.

プログレスバー要素にスクリーンリーダーで読み上げるための名前を設定してください、とのこと。

When a progressbar element doesn’t have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn how to label progressbar elements.

以下が該当するコードでした。

<div class="（省略）" role="progressbar" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100">

role="progressbar"があるとプログレスバー要素になります。この要素には、次のいずれかの属性を使って、スクリーンリーダーで読めるテキストを指定する必要があります。

• aria-labelledby属性
• area-label属性
• title属性

修正は、area-label属性を使って、以下のようにしました。
トップページにある「ノートの総数」のプログレスバーだったので、そのまま「ノートの総数」を指定しました。

<div class="（省略）" role="progressbar" area-label="ノートの総数" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100">

Background and foreground colors do not have a sufficient contrast ratio.

背景色と文字色のコントラスト差をつけましょう。

Low-contrast text is difficult or impossible for many users to read. Learn how to provide sufficient color contrast.

グレーアウトしているテキストなど、２パターンが該当していました。

白背景に薄いグレーの文字色の場合、薄いグレーの色を直接文字色に指定するより、opacity（透過）で本来の文字色より薄くする方が、見た目は同じであってもアクセシビリティ的には良いようです。

修正後

たった２点でしたが、無事に満点になりました。
今回はトップページでしたが、またそのうち別のページでも試して修正したいと思います。