SmartHR Design System

弱視・ロービジョンのユーザーのウェブ利用時の課題と解決案(WIP)

弱視・ロービジョンのユーザーの特性と利用環境

弱視・ロービジョンのユーザーの多くは、画面拡大や色反転などの支援技術を活用して、ウェブを利用します。 弱視・ロービジョンの視覚特性と、支援技術の仕様によって、特有の困難に直面することがあります。

このページでは、弱視・ロービジョンのユーザーがSmartHR製品を利用する際に観察された問題点と、その解決案をまとめています。

画面拡大

弱視・ロービジョンのユーザーは、OSの標準機能や専用ソフトを用いて画面の全体や一部を拡大して閲覧することがあります。拡大時はウェブページ全体を俯瞰することが難しくなります。

色反転機能

弱視・ロービジョンのユーザーは、画面上の色を見やすい組み合わせに変更したり、色を反転するOSの設定や機能を利用することがあります。設定や機能の仕様により、ウェブページのUIは任意の色の組み合わせで表示されます。

スクリーンリーダー

弱視・ロービジョンのユーザーは、拡大鏡や色反転機能と併せて、スクリーンリーダーを利用することがあります。残存視力や視野で画面を見るユーザーの場合、見えにくい・見えない情報を得るための補助として、スクリーンリーダーの読み上げを利用します。

弱視・ロービジョンのユーザーのウェブ利用に関連する課題と解決案の表

特性課題解決案
画面全体を俯瞰して捉えるのが難しい

  • 拡大鏡の拡大表示範囲外の変化を認識できない

    • ページ遷移： リンクテキストをクリックした際に画面全体の変化を捉えられず、別のページに遷移したことに気づけない。

    • 通知表示： 表示中の狭い範囲の外に表示される通知バナーなどに気づけない。

    • UIの変化： ボタンを押した後、見えている範囲全体を覆うようなUI(ダイアログなど)が表示される場合、画面の変化を認識することが難しい。

  • 拡大時、表示範囲外のUIを認識・特定できない

    • ページ上に散らばって配置されるUI: 画面の右端や動線から外れた場所にあるボタンなどに気づけない。

    • UIの特定・発見： 表示範囲外にあるUIについて知っていても、そのUIにたどり着くことが難しく、多くの時間がかかる。

  • 操作後のページ遷移を推測できるテキストや、スタイル(下線付きテキストなど)をリンクに設定する。

  • 重要な通知は操作部の近くで表示する。

  • 操作後に発生する画面の変化や必要な操作を説明するか、推測しやすいUIを使用する。

  • 関連するUIをできるだけ近くに配置する。たとえば、タブUIの切り替えボタンとタブパネルを近くに配置することでボタン操作によるパネルの変化に気づきやすくなる。

  • ページの左側など、主要動線上にUIを配置する。上下左右の行き来など、動線の流れに逆らう操作を必要としない画面設計をする。

視力が低い

  • ポインタ操作が難しい

    • 正確なポインタ操作： 小さな領域を狙ったマウスによるクリックが難しい。

    • ドラッグ操作： ドラッグによるスクロールバーの操作や対象物の移動が難しい。

  • 操作可能な領域を広くする。

  • スクロール量が少なくて済むよう画面やUIを設計する。

  • 正確なポインタ操作や、ドラッグアンドドロップが必須の場合、キーボード操作による代替手段を提供する。

色の識別がしづらい

  • コントラスト比が低いUI： グレー色のテキストや画像、disabled状態のUIに気づけない。

  • 背景色による領域の提示: 背景色の違いによって提示された領域の区切りに気づけない。 例：BaseColumnコンポーネント

  • 色の違いによるUIの状態提示： コントラストテーマなどで表示色をカスタマイズしている場合、UIの色が上書きされ、色の違いで示している情報は無効になる。 参考：強制カラーモード