齋木: フォント関連の質問がいくつかあります。

テキストの拡大

伊原: まずガイドラインで言えば 200% 拡大なんですよ。だから2倍にズームできればいいと言ってます。 文字の拡大っていうのはガイドラインで言うとAA、絶対やってね(A)の次のレベルなんですね。AAっていう基準なんですけど、何でかと言うと本当に巨大にしなきゃいけない人っていうのは、そういうのをブラウザのズームを使うんじゃなくて OS のズームを使うんですよね。 あるいはハイコントラストモードとか、そういうCSS自体をある程度無視して自分の見やすい形に変えるっていう手法をとるので、絶対やらなければいけない方にはその文字サイズの拡大は入ってなくて、できればやってほしいの方の AA の方で2倍にできるようにしてくださいって言ってるんですけど、これはブラウザのズーム機能のでズームできれば OK ってことになっています。

視聴者A: では Chrome とかで ctrl + マウスホイール とかで 200% とか 300% とかにできれば、それでもう遵守したことになるんですね。

伊原: そうなります。なので OK です。

WCAG 2.0: 1.4.4 テキストのサイズ変更 文字画像及び動画のキャプションを除き、テキストは、コンテンツ又は機能をそこなうことなく、支援技術なしで200%までサイズ変更可能にする。モダンなUAはズーム機能を備えているので、殆どの場合、自ずから達成される。コンテンツのサイズ変更により、テキストが欠けたり、他のテキストと重ならないようにする。

伊原: もう一つ、どの幅でっていうのが、WCAG 2.1 だとリフローって達成基準が増えました。これも AA なんですが、この時はあのいわゆる 320px、いわゆるスマホの一番ちっちゃい iPhone 5 とかの時代の幅ですよね。その時に見切れずに読めるようにしてほしいですという形で、つまりレスポンシブにすることで、そこはクリアできるというような感じです。

WCAG 2.1: 1.4.10 リフロー コンテンツは、320 CSS ピクセルに相当する幅で、情報や機能を損なうことなく、かつ2次元のスクロール(縦・横両方のスクロール)を必要とせずに、閲覧できる。ただし、機能や意味を保つために2次元のレイアウトが必要なコンテンツ部分は例外とする。

**伊原:**ズームというとその文字サイズのみ拡大っていうことをイメージされると思うんですが、文字サイズのに拡大をするのってブラウザで結構やるの大変なんですね。そもそも例えば Chrome とかだと、たぶん設定まで潜らないとできなかったりするし、それ自体が結構大変なのと、もう1つは文字サイズのみを拡大すると絶対配置が封じられるんですよね。だいたい重なっちゃうんですよ。

視聴者A: レイアウトがごちゃごちゃになってもう使えなくなるんですよね。

伊原: 使えなくなりますね。float とか position: absolute とかすると、もうたぶん見えなくなっちゃうので、それをできるようにするように作るのはまあしんどくて、やったことありますけどしんどいです。やろうと思えばできますが、あまり現実的ではなくて、基本的なブラウザーズームできれば基準としてクリアできるし、レスポンシブできるようにしておけば、それはまあズームしたときに、 PCブラウザズームした時って viewport 自体がちっちゃくなるのと同じ効果になるので、結果的にはレスポンシブするんですよね。その時でまああのそこそこ大きくなった形で見えればそれで大丈夫なので、そういうふうに考えています。

フォントサイズ

伊原: もう一つのフォントをどの程度にサイズにすべきでしょうかというのは、うーんこれはアクセシビリティの話なのかどうなのかっていう感じでして、アクセシビリティって言った場合にさっきの最低限のラインで言ったらもそもそもフォントサイズとか無視して巨大にできるわけですね。OS とか支援技術を使えば。

その次の、普通にって言ったらいいんですかね、ブラウザの描画をそのまま見るって言う場合において、どの程度のサイズにすべきなのかっていうのは、ガイドラインには特に規定はありません。 じゃあどうしたらいいのって思うんですけども、まあ一つ基準あるとしたらブラウザで何もしない時の標準スタイルの時の文字サイズっていうのは1つの基準になるんじゃないかなとは思っていて、世の中にはその画面デザインを頑張っているサイトもあれば、そうでもないサイトも結構あるわけですよ。そうでもないサイトにおいては、そのブラウザの標準のスタイルのままの文字サイズで見えるところもあるということで、何か基準を置くとしたら、そのブラウザ標準の文字サイズですかね。CSSピクセル的に言うと 16px とかなのかな。っていうのが1つの基準になるんじゃないかなと思っていて、そこから小さくしていくとちょっと見にくいなって思う人はやっぱり増えるとは思います。サイズについては僕はそう考えています。

ただサイズだけじゃなくてコントラストとかも関わるので、読みやすさっていうのは。 あとは行間とか字間とかその辺も関わってくるので、そのあたりはアクセシビリティガイドラインにも視覚的提示っていうガイドラインがあって例えば行間は 1.5 以上にしようとか、段落間は2文字分以上にしようとかそういったものがあるので、そういったものあとコントラストというものの基準を組み合わせることによって、見やすさっていうのはまあ一定のところまではいくんじゃないかなっていうふうに思います。

WCAG 2.0: 1.4.8 視覚的提示 文章の読みやすさを確保するため、次の5つすべてを満たす。 (1)ユーザーによる自由な配色の選択 (2)適切な1行あたりの文字数(40字程度) (3)均等割り付けを用いない (4)十分な行送り(1.5倍以上)と段落間隔(行送りの1.5倍以上) (5)文字サイズ変更(200%以上)を阻害せず、かつ横スクロールを発生させない

フォントファミリー

伊原: 最後はフォントそのもの選定なんですけれども、アクセシビリティという観点からいくと、なるべくシステムで選べるフォントを使う方がいいのかなぁと思うんですけれども、そこはやっぱり難しいですね。そういういわゆるディスレクシアとか、つまりフォントの形によってうまく読めない人とか、あとコントラストとか、弱視で見えにくい人にとっては、やはり明朝とか、特に游ゴシックとか游明朝とかあの辺の細いエレガントなやつっていうのは、かなり拡大しても読めないということもあるみたいなんですよね。

視聴者A: それもありますけど、個人的に思うのは手書きに似せた文字は読みにくいんですよね。だから個人的にゴシック系のフォントとかはすごい読みやすいと思うんですよ。