こんにちは、フロントエンドチームの 谷（@high_g_engineer）です。
今週のフロントエンド定例の内容を記載します。
フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。
以下、今週の内容です。
Adobe MAX – 読みやすさとアクセシビリティの新しい方向性 まとめ
10/19（水）、20（木）にAdobe MAXがありました。
https://maxjapan.adobe.com
そこで下記のセッションを拝見したので、その内容のレポートをまとめました。
https://www.adobe.com/jp/max/2022/sessions/na-new-directions-in-readability-and-accessibilit-s200.html
セッション概要について
目や脳は人によって異なりますが、今やデザイナーはその違いに合わせてエクスペリエンスを調整できるようになりました。
このセッションでは、AdobeのCreative Intelligence LabのリサーチサイエンティストであるZoya Bylinskiiが、読みやすさとデザインに関する最新の研究結果と機能を紹介します。
その前に、一般にa11yと略されるデジタル アクセシビリティとは？
https://web.dev/learn/accessibility/
の日本語訳によると、「デジタル製品を設計・構築して、人の障害に関係なく、有意義かつ同等の方法で製品を操作できるようにすること」とあります。
このサイトからの気づきは、下記です。
- WHO報告で、世界人口の 15% 以上 (13 億人) が障害を持っている
- この数字には、障害を持っている訳ではないが、アクセシブルなデジタル製品の恩恵を受ける可能性のある人は含まれていない
- 労働年齢で障害を持っている税引後の総可処分所得は、アメリカ人のみで年間約 4,900 億ドル（約73兆6,842億1,052万）
つまり、アクセシビリティを考慮しないということは、このユーザ層のニーズを満たさずし、このユーザ層から受けられる恩恵を全て捨ててしまうということになります。
下記からは、セッションの内容になります。
色覚異常に対してのアプローチについて
- 色覚異常とは、色同士の区別がつきにくい状態のこと
- 世界全体で、約2億人
- 男性の12人のうち1人が色覚異常
正しい見え方
色覚異常の見え方
これが発生する原因は、色の衝突が派生している為です。
これを無くす為に、カラーコントラストを正しく設定する必要があります。
カラーコントラストが正しく設定出来ていない状態だと、健常者からは問題なく見えますが、
色覚異常のある方からは、下記の様に見えてしまい、チャートの意味が損なわれています。
カラーコントラストが正しく設定できていると、色覚異常でなくても、瞬時に理解しやすい状態になります。
色覚異常のある方からでもチャートの意味が損なわれない表示になっています。
この色の衝突を確認するツールとして、アクセシビリティ用のカラーピッカーを下記のAdobeのサイトで利用可能です。
https://color.adobe.com/ja/create/color-accessibility
以下の様なツールになっており、線と丸が被っているとコントラストが十分でない状態で、線と丸が被っていないとコントラストが十分な状態であると判断できます。
視覚異常に対してのアプローチについて
- 視覚異常とは、視力や視野に異常があり、日常生活を送ることが困難な状態のこと
- 視覚障害者の世界人口は2億9500万人、そのうち、ほとんど見えない人は4,300万人
視覚異常の方が、デジタルコンテンツの情報にアプローチする際に、スクリーンリーダーをよく利用しています。
スクリーンリーダーとは、画面の情報を音声で読み上げてくれるツールです。
もし、視覚異常の方がPDFを見るときにスクリーンリーダーの設定がされていなければ、白紙を見ていることと同じ状態になってしまいます。
また、スクリーンリーダーについては、視覚異常の方だけでなく、ディスレクシア（学習障害者）と呼ばれる方も利用します。
ディスレクシア（学習障害）の世界人口は7億8000万人にのぼります。
彼らにとって、スクリーンリーダーが対応していないPDFは、暗号文と同じ様な状態になってしまいます。
スクリーンリーダーを有効にする場合、アクセシブルPDFが必要になります。
アクセシブルPDFとは、ヘディング、パラグラフ、リスト、テーブル、イメージ等のドキュメント構造が正しく設定された、タグ付けされたPDFを指します。
タグ付けされていないPDFは、スクリーンリーダーで読みあげることが非常に難しい、あるいは不可です。
世界中には2兆5000億のPDFが存在し、そのうち90%以上はタグ付けされていないPDFになります。つまり、2兆2,500億のPDFは、スクリーンリーダーで読むことが不可な状態になっています。
タグ付けされているかの判断ツールとして、Untagged PDFというツールがあります。
また、自動でタグ付けされるAutotag APIというツールも開発中ということです。利用申込みは下記から可能となっています。
https://developer.adobe.com/document-services/pricing/contact/sales/accessibility
※ここまでの話はPDFに焦点があたっていますが、ドキュメント構造を作るということについては、Webでも同じことが言えます。
Webページでは、全てdivだけで組むのではなく、h1〜h6、p、section、nav等のタグを適切に用いたセマンティックなコーディングやWAI-ARIAを正しく設定することが重要になります。
ディスレクシア（学習障害）について
- ディスレクシアとは、学習障害のタイプの一つ
- 全体的な発達に問題はないが、文字の読み書きに限定した困難がある疾患のこと
ディスレクシアは、読書の際にどこを読んでいるかを追跡するのに苦労することが共通の問題となっています。
それを改善する為に「読書定規」が有効となっています。
これは子どもが文字を読むことを学ぶ際に利用されるローテクなものです。
文字を読み飛ばしたり、文章の行を読み飛ばしたり、言語の理解が難しい等にアプローチします。
この読書定規は読字障害を持つ方にも有効で、ディスレクシアに対し、読書速度・理解力を高める効果があるとされています。
これをデジタルコンテンツの読書にも取り入れることができれば、より良い効果があると考えられ、読書定規をデジタル化するというアプローチに取り組んでいる様です。
テキストの読みやすさについて
アメリカの教育シーンでは、教科書・ノート・鉛筆というアナログなものを利用するシーンは少なくなっており、PC・タブレットといったデジタルテクノロジーが十分に介入された状態になってきています。
デジタルテキストは、印刷されたテキストと違い、それぞれのユーザー合わせたフォント、デザイン等を提供できるのも魅力の一つです。
テキストに対してもう少し深堀りすると、フォント（font-size, font-weight, font-family）、letter-spacing、line-heightなどの視覚的表現に関して、絶対的なものは無く、人それぞれに最適なフォーマットがあります。
この最適なフォーマットをパーソナライズするにはどうするかの研究が最近始まったばかりです。
読書体験は、幼稚園児〜高校生でも異なるし、それぞれの想像力、読解力、読むスピードによっても変わってきます。
フォントのパーソナライズを適切にできれば、さらに学習意欲を高め、学習曲線を伸ばせる状態になると思われます。
フォントについて
フォントは年齢差別的で、年齢に寄って好まれるフォントに差が生じるという研究結果が出ています。
調査の内容は、フォントを8つに分け、年齢層ごとに文字を読むスピードを計測するというものです。
その結果、フォントと年齢の組み合わせによって、読むスピードに差があることが分かりました。
Arialはどの年齢でも平均的で、読むスピードが高くなる傾向にありましたが、
GeorgiaやPoppinsは、19〜25歳と40〜71歳で、読むスピードの傾向が真逆になりました。
最適なフォントというのは、年齢という成分だけでなく、フォントと読み手の特性が相互作用することで決まります。
年齢・フォントに対する慣れ・読書頻度・教育レベル・読者の特性等を照らし合わせる必要があり、それらにマッチするフォントが、読者に対して最適なフォントになります。
このマッチングに対して、Fontmartという機械学習モデルで、最適なフォントを設定するというアプローチがあります。
機械学習で最適なフォントのマッチングをさせるのには理由があり、読者自身が最適だと思っているフォントと実際に読むスピードが上がるフォントが全く異なるという調査結果が出ている為です。
Adobe MAX – 読みやすさとアクセシビリティの新しい方向性 まとめは、以上です。
カラーコントラストやセマンティックにコーディングする等の知識はありましたが、フォントに対する発表は初めて知ることが多かったので目から鱗でした。
他にも有意義なセッションがあるので、是非Adobe MAXのセッション視聴をおすすめします。
前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。
