SmartHR Design System

画面を200%拡大、または文字サイズを2倍に変更しても情報が取得できる

概要

この基準では、目が見えにくい人や、大きい文字で利用したい人が、ウェブサイトを拡大しても情報を取得できることを確認してください。画面を拡大したときや、文字を大きくしたとき、テキストが見切れて情報が取得できない状態を避けてください。

メリット

  1. 視覚障害者: 文字を大きくしても、情報が見切れずにすべて読めます。
  2. 高齢者: 小さい文字が苦手な人でも、拡大して快適に読めます。
  3. 一時的に視力が低下している人: 目が疲れているときや、明るい場所で画面が見えにくいときに、文字を大きくできます。
  4. さまざまなデバイスのユーザー: スマートフォンやタブレットでも、画面サイズに合わせて文字が表示されます。

達成方法

  1. 相対単位でのフォントサイズ設定:

    • 文字サイズをピクセル(px)ではなく、emやremなどの相対単位で設定する。これにより、ユーザーがブラウザの設定で文字サイズを変更しても、サイトのレイアウトが崩れません。

  2. 適切な改行設定:

    • CSSの word-break や overflow-wrap を適切に設定し、長い単語やURLが画面からはみ出さず、必要に応じて適切に折り返されるようにします。

  3. レスポンシブデザインの採用:

    • メディアクエリを使って、デバイスの画面サイズに応じてレイアウトやフォントサイズが自動的に調整されるようにします。

テスト方法

  1. ブラウザのズーム機能を使う:
    • ブラウザでページを200%まで拡大し、文字や画像、レイアウトがきちんと見えるか、情報が見切れていないかを確認します。レイアウトが適切に調整され、すべての情報がきちんと表示されるかをチェックします。
    • ブラウザのビューポートのサイズは、動作保証しているサイズが決まっていればそのサイズでチェックしてください。決まっていなければ、1280px * 800px でテストしてください。
  2. ブラウザのフォントサイズを変更する:

関連するWCAG2.1達成基準