デスクトップ上の小さなテキスト
Silktideは、ページをデスクトップ画面で表示したときにユーザーが目にするテキストのサイズを測定し、12ピクセル未満で表示されるテキストを報告します。このように小さいテキストは、多くの人にとって読みにくく、または読むことができません。
これが重要な理由
デスクトップ画面はスマートフォンよりも読者から離れているため、小さなテキストはその分、読みにくくなります。12ピクセル未満のテキストは、弱視のある読者を排除し、高齢の読者に負担をかけ、その他のすべての人に身を乗り出したりズームしたりすることを強います。主要なデザインガイドラインでは、デスクトップの本文テキストの実用的な最小サイズとして、12~14ピクセルが推奨されています。
小さなテキストが意図的に選ばれることはほとんどありません。通常は、誰も読み返さない法的な定型文、フッター、サードパーティーの埋め込みなどを通じて、いつの間にか入り込んでいます。
修正方法
- でフォントサイズを少なくとも12px、できれば本文では16px以上に大きくします。
/* 問題:デスクトップでは快適に読めない小ささ */
.footer-note { font-size: 10px; }
/* 修正:読みやすいサイズを使用します。できれば相対単位を使います */
.footer-note { font-size: 0.875rem; } /* デフォルト設定では14px */
- 固定ピクセル値よりも相対単位(
rem、em)を優先します。これにより、ユーザーがブラウザーのデフォルトフォントサイズを変更したときにも、テキストが拡大縮小されます。 - 報告されたテキストのサイズが実際には問題ない場合(たとえば装飾的な意匠など)は、その検出結果をできます。
Silktideによるテスト方法
- 各ページをデスクトップ画面サイズでレンダリングします。
- すべてのCSSが適用された後に、表示される各テキストの最終的な計算済みサイズを測定します。
- 非表示のテキスト、専用のテキスト、2文字未満の断片(アイコンのグリフなど)は無視します。
- 12ピクセル未満で表示されるテキストを報告します。
ウェブサイトでサードパーティーコンテンツを除外するよう設定している場合、既知のサードパーティープラグイン内のテキストは報告されません。
トラブルシューティング
画面上ではテキストに問題がないように見えます
高解像度ディスプレイや個人のズーム設定によって、使用している環境では小さなテキストが問題なく見える一方、デフォルト設定では小さすぎる場合があります。このチェックでは、すべての訪問者のブラウザーが表示を開始するCSSピクセルサイズを測定します。
モバイルの場合はどうなりますか?
ページをモバイルで表示したときのテキストサイズは、モバイル画面に適したしきい値を使用する小さなテキストで個別にテストされます。