視え方と文字の大きさ

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

Transcript

1. 視え方と文字の大きさ
   We Are JavaScripters! @42nd
   

   View Slide

2. 甲斐田 亮一
   @camcam_lemon
   株式会社CureApp
   エンジニア
   TypeScript, React / Figma
   Name
   Twitter
   Company
   Occupation
   Skills
   

   View Slide

3. 実装での文字の大きさ変更
   em,rem,%等の単位による相対指定
   calc関数とビューポート単位を組み合わせた自動算出
   JavaScriptからfont-sizeを指定
   メディアクエリー
   

   View Slide

4. OSからの変更
   Mac： システム設定 > ディスプレイ > 解像度
   Windows：スタート > 設定 > アクセシビリティ > テキストサイズ
   iPhone：設定 > アクセシビリティ > 画面表示とテキストサイズ
   Android：設定 > ディスプレイ > 詳細設定 > フォントサイズ
   

   View Slide

5. ブラウザからの変更
   「︙」アイコン > 設定 > デザイン > フォントサイズ
   8 Google Chrome：
   設定 > 外観 > フォント
   8 Firefox：
   「≡」アイコン > 設定 > 一般 > フォント
   8 Edge：
   アドレスバーの「ぁあ」 > 「ぁ」 or 「あ」
   8 iOS Safari：
   Command キー + プラス or マイナス キー
   8 Mac Safari：
   

   View Slide

6. ユーザースタイルシートからの変更
   ユーザーが独自定義したスタイルをブラウザに設定する
   主要ブラウザは全てサポートしている
   （今のところは）スマホはサポートしていない
   

   View Slide

7. 設定の優先順位
   É OS
   É ブラウザ
   'É JavaScript
   8É ユーザースタイルシート
   BÉ CSS
   

   View Slide

8. 文字の大きさはユーザも変更できる
   

   View Slide

9. なぜOSやブラウザから変更できるのか
   アクセシビリティの向上
   視覚障害者やロービジョンのユーザにとっては必要不可欠な機能
   WCAGでは文字の拡大縮小はユーザーエージェントの責任と明記されている
   晴眼者でも一人ひとり読みやすい文字の大きさは違う
   外部機器（外付けモニターとか）など多種多様な環境への対応
   ユーザビリティの向上
   

   View Slide

10. " 一部の国や地域では満たすべきアクセシビリティの基準がある
    " この基準の中の1つに視覚障害者へのアクセスを確保する規定が含まれる
    " 法的要因
    " 文化や言語によって、標準とされる文字の大きさが異なる
    " アラビア語やヘブライ語は右から左に読むためレイアウトも異なる
    " 日本語の場合、Webも印刷物も12〜16ptが標準とされている
    " 文化的・言語的要求
    なぜOSやブラウザから変更できるのか
    

    View Slide

11. 視覚障害の種類
    視力障害
    視野障害
    $ 色覚障害
    0 光覚障害
    

    View Slide

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
    

    View Slide

13. 視覚障害以外にも視え方の異常はある
    

    View Slide

14. 屈折異常と老眼
    屈折異常は焦点を正しく合わせられない状態
    代表的な症状が「近視」「遠視」「乱視」
    眼球の屈折力に問題があり異常をきたす
    老眼は加齢にともなう視え方の変化の総称
    眼球の水晶体が硬化し、調節能力の低下により様々な異常をきたす
    調節能力が低下により「近視」の症状が表れる
    一般的に40歳をこえると症状が表れてくる
    日本の老眼人口は7000万人以上だと言われている（総人口は1億2330万人）
    

    View Slide

15. 文字の拡大縮小は欠かせない機能
    必要としているのは視覚障害者だけではない
    日本の現状も鑑みると必須とも言える
    私たちが考えてるよりも多くの人が必要としている
    

    View Slide

16. いまは 側かもしれないが
    助ける
    いずれ 側になる
    助けられる
    いま助けることは未来の私たちを助けることでもある
    

    View Slide

17. どうするべきか
    ! 一概にこうすればいい的なうまい話はない
    ! 理想は文字の大きさに依存しないデザインと実装
    だが実際問題きびしい（というか無理）
    ! モバイルOSが曲者 特にiOS...
    

    View Slide

18. モバイルOSにおける文字の拡大縮小
    7 一般的にフォントスケーリングと呼ばれている
    7 iOSでは現在ダイナミックタイプと呼んでいる
    7 文字の大きさ = font-size * font-scale
    7 iOSだとfont-sacaleはブラウザには反映されない
    

    View Slide

19. CSSで反映させることは可能
    6 fontプロパティに-apple-system-bodyを設定
    6 font-familyだけだとサイズと太さは反映されない
    6 これでスケーリングされるが・・・
    

    View Slide

20. iPhoneで文字の大きさを変更する
    デフォルト(L) 最大サイズ(AX5)
    

    View Slide

21. iPhoneの設定アプリ
    デフォルト(L) 最大サイズ(AX5)
    

    View Slide

22. iOSはめっちゃくっちゃでっかくできる
    ' 最大サイズの「AX5」は「L」の約3.1倍の大きさ
    ' Chromeの標準テキストが16px => 53pxになる
    ' Safariの「ぁあ」からもっとでっかくできる
    ' 逆にアクセシビリティを損なわないか慎重に検討
    ' この振れ幅で文字の大きさに依存しないデザイン
    は無理がある
    

    View Slide

23. JavaScriptとフォントスケーリング
    S JavaScriptからOSのフォントスケーリング値を
    取得することは不可能
    S セキュリティ的な理由でダメなのかな？
    S 有識者いたら教えてほしい
    

    View Slide

24. 一応わかるっちゃわかる
    7 OSとブラウザの設定値ともにbody要素のfont-size
    に反映されるので、それを利用する
    7 信用できる値ではないので注意
    

    View Slide

25. iPhoneのアプリはどう対応しているのか
    

    View Slide

26. iPhoneのミュージックアプリ
    デフォルト(L) 最大サイズ(AX5)
    

    View Slide

27. iPhoneの天気アプリ
    デフォルト(L) 最大サイズ(AX5)
    

    View Slide

28. iPhoneアプリから見る視え方への対応
    ( スケールする最大値を設定している
    ( スケールさせずに固定する
    ( 一律で文字を大きくしているわけではない
    ( 情報の重要度の単位で大きさを変えている
    ( 大きさによってはレイアウトを変える
    ( 操作性は変えても機能性や情報量は変えない
    

    View Slide

29. どう向き合っていくか
    ) コンテンツが訴求したい価値に欠落が生じていない
    かが1番大事
    ) 情報の重要度をベースに対応を考える
    ) 文字の大きさを固定するという選択肢は常に残す
    ) 実装だけですべてを解決することはできない
    ) チームでどうするか考えよう
    

    View Slide

30. ご清聴ありがとうございました
    

    View Slide