文字のサイズを切り替えてアクセシビリティ向上を狙う
Webサイトで見かける「標準」「拡大」などのボタン・・・
クリックすると文字のサイズが変わるので、文字が小さくて読めない・・・と困っている人にはとても便利なボタンです。
時々「小」「中」「大」となっていて、標準が「中」となっていることもありますが、この状況で「小」を選択する人はほぼいないと思います。
この文字サイズを変更するボタンを設置するにあたって、注意したい点をいくつか挙げてみましょう。
文字サイズ切り替えボタンが見えるのか
意外と見落としがちな点かと思います。
文字の切り替えボタンを設置しても、切り替えボタンの文字が小さくて見えない、といった可能性もありますよね。
ページを見てもらいたい方の年代がメガネが必須の方だったり、加齢による視力低下が想定される方や、幅広い年齢層の方をターゲットとしている場合、文字の切り替えボタンはほぼ必須と言ってもいいくらいですが、書いてある「拡大」などの文字が見えなければ不自由です。
「読めるだろうか・見えるだろうか」という視点を持って、文字の大きさに注意してください。
また配色についても注意が必要です。
緑内障や白内障などの方は色の見分けが難しい場合があります。
そういった方でも正しく読めるように彩度の高い色を使うようにします。
文字サイズ切り替えボタンはわかりやすい位置に設置されているか
こちらも重要なポイントです。
折角設置しても、その存在が分からなければ操作してもらえません。
あまりにも主張しすぎるのも逆に問題ですが、きちんと文字サイズを変更する事ができる旨が伝わる位置に配置しましょう。
画像文字は多用しない
もちろんですが文字サイズの変更は画像文字には対応できません。
それは仕組みとしてJavaScriptを使ってCSSを切り替え、font-sizeの値をそれぞれに持たせて変更しているからです。
なので画像文字のサイズを変更しようとすると、切り替えボタンの分だけ画像を作成し、CSSでdisplay:none;とblockを切り替える手間が出てきます。
実現できないこともありませんが、文字を変える作業が発生した場合、作業漏れが起きやすく、時間もかかってしまいます。
スマートフォン専用ページには不要？
ここは正直迷う所です。
指二本を使ったピンチイン・アウトの操作で全体が拡大・縮小できるからです。
それに表示領域も小さいので、どこに配置するかも悩みどころですね。
スマートフォンページには文字サイズの変更ボタンは無くてもいいかもしれません。
フォントサイズは「%」を使用する
相対的な値「%」を使うようにしましょう。
「px」などの絶対的な値を使ってしまうと、フォントサイズを持っている箇所全ての文字サイズを指定し直さなければなりません。
ですが相対的な値を使って置く事で、文字サイズの指定箇所が各段に減るのでオススメです。
まとめ
・文字サイズ切り替えボタンが読めるように工夫する
・切り替えボタンの存在が分かるように配置する
・画像文字は多用しない
・フォントサイズには相対的な値を使う
