ビジュアルデザインとアクセシビリティについて

WWDC 2019でアクセシビリティについていくつか発表があった中で、タイトルに惹かれた発表からnoteに書いていけたらと思います。

今回はVisual Design and Accessibility。

この発表ではビジュアルデザインからアクセシビリティを視覚的に向上する3つの事を教えてくれています。10分ほどなのでサクッと見れてしまうと思います。

アクセシビリティを視覚的に向上させる3つの方法

- Dynamic Type(ダイナミックタイプ)
- Reduce Motion(視覚効果を減らす)
- Differentiate Without Color (カラー以外で区別する)

Dynamic Type

画面上で文字の大きさをカスタマイズできる機能で、文字が大きくないと文字が読めず、デバイスを使えない人もいる。設定から見やすいサイズに調整ができる。

Dynamic Typeを実装するときの4つの注意点

1. テキストは拡張性を持たせるために出来る限りダイナミックタイプを使用する

2. 画面幅を最大限にかつようする

3. テキストをトランケートせず、規定のUIと同じ量を表示する

4. グリフのサイズを調整してUIのバランスをとる

Reduce Motion(視覚効果を減らす)

視覚効果を減らす機能で、視覚効果は没入感を演出するのに効果的ではあるが、3人に1人は動きに敏感。動きのある画面を見るだけで過敏に反応してしまう人もいる。

動画の自動再生もその一つで、動画を見たくなる人もいれば、何らかの不安を引き起こしてしまうかもしれない。これらは設定Appで資格効果のオンオフを変更できる。

さらに、画面切り替え時の視覚効果も変更できる。画面を切り替える時のドリルダウンのスライドするような効果もCross-fade Transitionsを優先に変更ができる。ONにした場合はディゾルブ効果に変わる。

Differentiate Without Color (カラー以外で区別する)

健常者には別の色と認識できても色覚に障害を持っている方は同じ色に見えてしまう。2型2色覚の人は赤緑黄色が同じ色に‥こういった問題を解決するために設定から変更ができる。

プレゼン内では、そもそも意味づけを色だけに頼るのは可能な限りやめた方が良いと言って、この設定をしなくても視認できるようにする努力をすることで、標準でもアクセシブルな状態を目指せる。

まとめ

• Dynamic Type(ダイナミックタイプ)で ダイナミックタイプでテキストサイズの変更が可能に

•  Reduce Motion(視覚効果を減らす)で過敏なユーザ向けにモーションに関する設定を追加

• Differentiate Without Color (カラー以外で区別する)で視覚に障害がある人でも視認できるような視覚情報を提供ができる

---

プレゼンから、何故このようにデザインしなければならないかをTips的に学ぶことができました。また、実際はデザイン的なTipと共に公開されているAPIを用いた実装についても説明が出てくるため、実践するには実装の理解も必要になってきます。

自身が実装者でなかった場合は、実装者と共通言語を持った状態でコミュニケーションできるように意識することが必要になってくると思います。

iOS13で多くのアクセシビリティ機能が追加されています。一つ一つUIにどういう影響があるかみていくだけで、アクセシビリティにおいて抑えるポイントが学べそうです。

最近では、普通に誰でもソフトウェアが使えるアクセシブルな状態、さらにはユニバーサルデザインについて。ふつふつと興味が湧いてきています。

WWDC 2019の発表だけではなくWWDC 2018にも興味深い発表が多くあります。他の発表を見たら内容をnoteにまとめようと思います。