Webアクセシビリティ勉強会

テキストのサイズ

テキストのサイズに関するアクセシビリティを考えるとき、大きさが可変なことはとても重要である。 Webページの文字列を変える方法は以下のようなものがある。

よくある事例からこれらの方法を見てみる

タッチデバイスでピンチアウトによる画面の拡大を禁止している

メタタグにuser-scalable=noやmaximum-scale=1.0を指定すると、Android Chromeではピンチアウトによる画面の拡大が出来なくなる。

改善策 -ピンチアウトによる画面の拡大を禁止しない-

タッチデバイスでピンチアウトによる画面の拡大を禁止しないようにすることで、文字が小さすぎて読めないなどの問題を解決できる。

画面をズームすると、位置を固定した要素が画面を覆ってしまう

例はこちら

改善策 -位置を固定した要素はズームしたときの表示方法を検討する-

位置を固定した要素はズームしたときの表示方法を検討する必要がある。解決方法は以下がある。

ブラウザの文字サイズ変更機能が反映されない

ブラウザの文字サイズ変更機能を利用しても、文字の大きさをpxや、ptなどの絶対単位で指定していると、文字サイズ変更機能の設定が文字の大きさに反映されない。
Internet Archiveの調査によると、ブラウザの文字サイズ変更機能を利用しているユーザは全ユーザの約3%とされている。文字サイズを変更できないとユーザが文字の読みにくさを改善できなくなる。
なお、ブラウザの文字サイズ変更機能とブラウザのズーム機能を混同しないようにする。フォントサイズに絶対単位を指定すると、ブラウザの文字サイズの変更機能では文字が拡大できなくなるが、ブラウザのズーム機能では文字が拡大できる。

改善策 -フォントサイズは相対単位で指定する-

例はこちら

チェックポイント

WCAG 2.1では、達成基準1.4.4に「テキストのサイズの変更」があり、Webページのコンテンツ、機能を損なうことなく、支援技術なしで文字サイズを200%まで拡大できることを求めている。なお、文字を拡大する方法を複数提供することは必須ではない。いずれかの方法で文字が拡大できれば、達成基準を満たすことになる。