Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

日本の視覚障害者の人口 ) 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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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