はじめに
ネイティブアプリのアクセシビリティ対応について調べる機会があったので、学んだことを備忘録的にここにまとめます。
前提
- 筆者はデザイナーなので、UI観点での話が多いです。
そもそもアクセシビリティとは
アクセシビリティは、英語では“Accessibility”で、「近づきやすさ」、「利用のしやすさ」、「便利であること」などと訳されます。
つまり、
- 身体や障がいの有無や年齢など個人の性質・特性
- 怪我をしている、又明るいところ、暗いところにいるなど、特定の状況
によらず利用できるかどうかという観点のことを指します。
ウェブアクセシビリティ
上記のアクセシビリティの考え方をウェブの利用について適用したものが一般的に「ウェブアクセシビリティ」とよばれるものです。
ウェブアクセシビリティの対応には、Web技術の標準化を行う非営利団体である「W3C(World Wide Web Consortium)」が策定した「WCAG」というガイドラインが標準的に使われています。
ネイティブアプリのアクセシビリティ対応について
現状ネイティブアプリのアクセシビリティについてWCAGのような標準的なガイドラインなどは存在していません。
しかしながら、一般的には以下のような対応を行っている事が多いようです。
- WCAGの概念的な項目についての配慮
- 各プラットフォーム(iOS,Android)のアクセシビリティガイドラインへの対応
WCAGの概念的な項目についての配慮
WCAGはウェブアクセシビリティについてのガイドラインですが、概念的な部分はネイティブアプリにも適用できます。
ガイドラインの各項目については、下の早見表を御覧ください。
アクセシビリティに対しての適合レベルに関しては適合度の低い順にA、AA、AAAの三段階が存在します。
参考
「みんなの公共サイト運用ガイドライン」(総務省, 2016年)では、公的機関に求めるレベルをAAとしている
- たとえば厚生労働省が運営していた接触確認アプリ「COCOA」は、適合レベルAAに準拠していた
各プラットフォーム(iOS・Android)のアクセシビリティガイドラインへの対応
各プラットフォーム(iOS、Android)ではアクセシビリティ支援機能(VoiceOver、TalkBack)を標準で提供しています。これらの支援機能を適切に活用するため、各プラットフォームのアクセシビリティガイドラインに従ってアプリを設計・実装することが重要です。
アクセシビリティに配慮したデザインの始め方
とはいえ適合レベルAAに準拠し、各プラットフォームのガイドラインを遵守するのはハードルが高いので、デザイナー観点で始めやすそうな基本的な項目を3つまとめてみました。
コントラスト比の確保
テキストの可読性を確保するため、テキストと背景色のコントラスト比について明確な基準が定められています。iOSのHuman Interface GuidelinesとAndroidのMaterial Designのどちらも、WCAGの適合レベルAA基準である4.5:1以上のコントラスト比を採用しています。
コントラスト比は4.5:1以上を目指しましょう
タッチターゲットサイズの適正化
タッチ操作の精度を確保するため、両プラットフォームでタッチターゲットの最小サイズについて明確な基準が定められています。
-
iOS (Human Interface Guidelines)
- タッチターゲット：最小44×44pt
- ターゲット間の最小余白：16pt以上(コントロールの中心間が60pt以上)
-
Android (Material Design)
- タッチターゲット：最小48×48dp
- ターゲット間の最小余白：8dp
複数の方法による情報伝達
iOS Human Interface Guidelinesでは、色だけでなく複数の方法を組み合わせて情報を伝えることを推奨しています。
色覚に障がいのあるユーザの多くは、青とオレンジの区別を難しく感じます。ほかにも問題があるのは、赤と緑、赤と黒、グレイと赤、グレイと緑の組み合わせです。状態や値をカラーの組み合わせで伝達する方法に重要な意味がある場合でも、あらゆるユーザが情報を知覚できるように追加の視覚的インジケータを含めてください。
Apple Developer
これにより、色覚異常のあるユーザーも確実に情報を認識できるようになります。
色覚異常でも色の見え方は多岐にわたるため、色だけではなく、アイコンなど別の視覚的な情報を併せた情報伝達が必要となる
さいごに
これからアクセシビリティ対応に取り組む方の参考になれば幸いです。
参考記事、サイト
Discussion