PageSpeed Insights の数値を上げる コントラスト

PageSpeed Insights （ページスピードインサイト）のユーザー補助とは

ユーザーがサイトに訪問した時に、そのサイトで如何に行動し易いか？見やすいかを数値にしたものです。100%が良く、悪いと判断されると数値が下がります。

「PageSpeed Insights」の中でもユーザー補助は、サードパーティによるものではなく、ご自身の設定によるものなので、他の指標に比べ、簡単に100％に改善できます。改善することをオススメします。

背景色と前景色には十分なコントラスト比がありません

低コントラストのテキストを使用すると、多くのユーザーは読むことが困難または不可能になります。

解決 背景の色または文字の色を変える

背景の色と文字の色が見やすいか否かの判別は難しいです。そこで、下にリンクしているサイトで確認することができます。

• https://dequeuniversity.com/rules/axe/4.7/color-contrast

ガイドラインに適応しているか「カラーコントラストアナラ​​イザー」で確認できます。

緑色（#5CBA4C）に白色の文字は失敗と表示されます。

青色（#5CBA4C）に白色の文字は合格と表示されます。

カラーコントラストアナラ​​イザーを参考に、背景色または前景色（文字色）を変えます。

画像要素に、重複する内容の[alt] 属性が含まれています。

説明的要素は、簡潔でわかりやすい代替テキストにする必要があります。リンクや画像の近くのテキストとまったく同じ代替テキストを指定すると、スクリーン リーダーで同じ内容が 2 回読み上げられるため、混乱を招く可能性があります。

解決 タイトルまたは代替テキストを書き換える

リンクのタイトルと代替テキストが同じ文であるために、混乱するとのこと。代替テキストを簡潔な文に変更します。

タップ ターゲットのサイズや間隔は十分な大きさではありません。

解決 タップターゲットのサイズと間隔を変更する

• デロッパーツールで、問題の箇所のクラス名とサイズと間隔を確認する

問題の箇所　検索アイコン（虫眼鏡）のサイズと間隔

.search-submit {
	font-size: 20px;
}	

解決　検索アイコン（虫眼鏡）のサイズと間隔を次の様に変更する

.search-submit {
    margin-left: 10px;
	font-size: 24px;
}