視え方と文字の大きさ

We Are JavaScripters! @42nd【初心者歓迎・LT会】の登壇資料

Transcript

1. 視え方と文字の大きさ We Are JavaScripters! @42nd
2. 甲斐田 亮一 @camcam_lemon 株式会社CureApp エンジニア TypeScript, React / Figma Name Twitter Company Occupation Skills
3. 実装での文字の大きさ変更 em,rem,%等の単位による相対指定 calc関数とビューポート単位を組み合わせた自動算出 JavaScriptからfont-sizeを指定 メディアクエリー
4. OSからの変更  Mac： システム設定 > ディスプレイ > 解像度  Windows：スタート > 設定 > アクセシビリティ > テキストサイズ  iPhone：設定 > アクセシビリティ > 画面表示とテキストサイズ  Android：設定 > ディスプレイ > 詳細設定 > フォントサイズ
5. ブラウザからの変更 「︙」アイコン > 設定 > デザイン > フォントサイズ 8 Google Chrome： 設定 > 外観 > フォント 8 Firefox： 「≡」アイコン > 設定 > 一般 > フォント 8 Edge： アドレスバーの「ぁあ」 > 「ぁ」 or 「あ」 8 iOS Safari： Command キー + プラス or マイナス キー 8 Mac Safari：
6. ユーザースタイルシートからの変更  ユーザーが独自定義したスタイルをブラウザに設定する  主要ブラウザは全てサポートしている  （今のところは）スマホはサポートしていない
7. 設定の優先順位 É OS É ブラウザ 'É JavaScript 8É ユーザースタイルシート BÉ CSS
8. 文字の大きさはユーザも変更できる
9. なぜOSやブラウザから変更できるのか  アクセシビリティの向上  視覚障害者やロービジョンのユーザにとっては必要不可欠な機能  WCAGでは文字の拡大縮小はユーザーエージェントの責任と明記されている  晴眼者でも一人ひとり読みやすい文字の大きさは違う  外部機器（外付けモニターとか）など多種多様な環境への対応  ユーザビリティの向上
10. " 一部の国や地域では満たすべきアクセシビリティの基準がある " この基準の中の1つに視覚障害者へのアクセスを確保する規定が含まれる " 法的要因 " 文化や言語によって、標準とされる文字の大きさが異なる " アラビア語やヘブライ語は右から左に読むためレイアウトも異なる " 日本語の場合、Webも印刷物も12〜16ptが標準とされている " 文化的・言語的要求 なぜOSやブラウザから変更できるのか
11. 視覚障害の種類  視力障害  視野障害 $ 色覚障害 0 光覚障害
12. 日本の視覚障害者の人口 ) 2009年の厚生労働省による調査だと約31万人 ) 視覚障害の身体障害者手帳所持者数が31万人 ) 2007年の日本眼科医会の分析では約164万人 ) 失明者とロービジョン者が164万人 出典：厚生労働省「身体障害者実態調査結果の概要」 https://www.mhlw.go.jp/www1/toukei/h8sinsyou_9/1-2.html 出典：日本眼科医会「日本における 視覚障害の社会的コスト」 https://www.gankaikai.or.jp/info/kenkyu/2006-2008kenkyu.pdf
13. 視覚障害以外にも視え方の異常はある
14. 屈折異常と老眼  屈折異常は焦点を正しく合わせられない状態  代表的な症状が「近視」「遠視」「乱視」  眼球の屈折力に問題があり異常をきたす  老眼は加齢にともなう視え方の変化の総称  眼球の水晶体が硬化し、調節能力の低下により様々な異常をきたす  調節能力が低下により「近視」の症状が表れる  一般的に40歳をこえると症状が表れてくる  日本の老眼人口は7000万人以上だと言われている（総人口は1億2330万人）
15. 文字の拡大縮小は欠かせない機能 必要としているのは視覚障害者だけではない 日本の現状も鑑みると必須とも言える 私たちが考えてるよりも多くの人が必要としている
16. いまは 側かもしれないが 助ける いずれ 側になる 助けられる いま助けることは未来の私たちを助けることでもある
17. どうするべきか ! 一概にこうすればいい的なうまい話はない ! 理想は文字の大きさに依存しないデザインと実装 だが実際問題きびしい（というか無理） ! モバイルOSが曲者 特にiOS...
18. モバイルOSにおける文字の拡大縮小 7 一般的にフォントスケーリングと呼ばれている 7 iOSでは現在ダイナミックタイプと呼んでいる 7 文字の大きさ = font-size * font-scale 7 iOSだとfont-sacaleはブラウザには反映されない
19. CSSで反映させることは可能 6 fontプロパティに-apple-system-bodyを設定 6 font-familyだけだとサイズと太さは反映されない 6 これでスケーリングされるが・・・
20. iPhoneで文字の大きさを変更する デフォルト(L) 最大サイズ(AX5)
21. iPhoneの設定アプリ デフォルト(L) 最大サイズ(AX5)
22. iOSはめっちゃくっちゃでっかくできる ' 最大サイズの「AX5」は「L」の約3.1倍の大きさ ' Chromeの標準テキストが16px => 53pxになる ' Safariの「ぁあ」からもっとでっかくできる ' 逆にアクセシビリティを損なわないか慎重に検討 ' この振れ幅で文字の大きさに依存しないデザイン は無理がある
23. JavaScriptとフォントスケーリング S JavaScriptからOSのフォントスケーリング値を 取得することは不可能 S セキュリティ的な理由でダメなのかな？ S 有識者いたら教えてほしい
24. 一応わかるっちゃわかる 7 OSとブラウザの設定値ともにbody要素のfont-size に反映されるので、それを利用する 7 信用できる値ではないので注意
25. iPhoneのアプリはどう対応しているのか
26. iPhoneのミュージックアプリ デフォルト(L) 最大サイズ(AX5)
27. iPhoneの天気アプリ デフォルト(L) 最大サイズ(AX5)
28. iPhoneアプリから見る視え方への対応 ( スケールする最大値を設定している ( スケールさせずに固定する ( 一律で文字を大きくしているわけではない ( 情報の重要度の単位で大きさを変えている ( 大きさによってはレイアウトを変える ( 操作性は変えても機能性や情報量は変えない
29. どう向き合っていくか ) コンテンツが訴求したい価値に欠落が生じていない かが1番大事 ) 情報の重要度をベースに対応を考える ) 文字の大きさを固定するという選択肢は常に残す ) 実装だけですべてを解決することはできない ) チームでどうするか考えよう
30. ご清聴ありがとうございました