アクセシビリティを考慮してCSS単位を見直してみた！
背景
フロントエンドエンジニアとして日々コーディングをする中で、最近アクセシビリティの重要性を改めて学びました。特に、CSSの単位の使い方次第で、ユーザーのフォントサイズ変更に対応できなくなることを知り、これまでのコーディング手法を見直すきっかけとなりました。
何かご指摘やアドバイス等あると優しく教えていただけると幸いです、、！
これまでのコーディング方法
デザインデータ通りにページを作成することを重視し、フォントサイズや余白などにvw（ビューポートの幅に対する割合）を多用していました。これは、ブラウザの幅が変わっても要素のサイズが同じ割合で変化し、デザインの一貫性を保ちやすいためです。
しかし、アクセシビリティの観点からは問題がありました、、！vwを使用したフォントサイズは、ユーザーがブラウザのフォントサイズを変更しても影響を受けず、可読性が損なわれます。
CSS単位の見直し
そこで、フォントサイズ変更に対応できるCSSの単位を見直しました！適切な単位を使うことで、デザインの一貫性を保ちつつ、アクセシビリティにも配慮したコーディングが可能になります。
remやemの活用
remやemは、ユーザーのフォントサイズ変更に対応できるため、フォントサイズ指定に適しています。ブラウザの設定によってフォントサイズが変更されると、これらの単位で指定されたスタイルもその変化に追従します。
例えば、デフォルトの1remは16pxですが、ユーザーの設定によって32pxやそれ以上になることもあります。そのため、フォントサイズや他のスタイルをremで指定すると、ユーザーの設定に応じて拡大・縮小されるようになります。
ただし、すべてをremやemにすればよいわけではありません。ユーザーのフォントサイズ変更に合わせてそのスタイルの大きさを変えたいかどうかを基準に、使用する単位を選択することが重要だと思います。
ルート要素にfont-size: 62.5%を設定する問題点
一部の開発者はremの計算を簡単にするために、ルート要素（html）にfont-size: 62.5%を指定し、1rem = 10pxとする手法を使います。（ちなみに僕もしてました、、）しかし、これはユーザーが設定したフォントサイズを無視する原因となります。例えば、他のサイトでは1rem = 32pxで表示される環境のユーザーが、62.5%の指定があるサイトを開くと、意図せずフォントサイズが小さく見えてしまいます。
アクセシビリティを考慮するならば、ルートのフォントサイズはデフォルトのままにし、計算の関数等を作りremを適切に活用するのが理想的だと思います！
単位の使い分け（個人的な例）
以下は、僕が今の所使用しているCSS単位の使い分けです。ただし状況によって例外も多々あります、、！
| 種類 | 単位 | 理由 |
|---|---|---|
| フォントサイズ | rem | ユーザーのフォントサイズ変更に対応できるため |
| 水平方向の余白・パディング | px | remを使用するとフォントサイズが大きくなるにつれて1行に入る文字数が少なくなるため |
| 垂直方向の余白・パディング | rem | フォントサイズに応じて調整されるため |
| 要素の幅 | rem / % / vw/max-widhth | フォントサイズやビューポートに応じて変動させるため、remや%、vwを使い分ける |
| メディアクエリ | rem | ユーザーのフォントサイズ変更に対応しつつ、レイアウトを調整できるためremを使用する |
| 境界線 (border) | px | borderの太さはフォントサイズに依存せず固定のほうが崩れにくいため |
| 行の高さ (line-height) | rem | フォントサイズの変化に対応し、可読性を保つため |
まとめ
CSSの単位を適切に使い分けることで、アクセシビリティを向上させながら、柔軟なデザイン調整が可能になります。特に、vwのようなビューポート基準の単位を多用するのではなく、ユーザーのフォントサイズ設定に影響を受けるremやemを適切に活用することが重要だと思います！
また、以下の記事がわかりやすいのでぜひ見てみてください！
閲覧ありがとうございました！
Discussion