ビジュアルデザインとアクセシビリティ – WWDC2019

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

1. Dynamic Type
2. 視覚効果を減らす
3. Color以外での区別

Dynamic Type

• 画面上でフォントサイズをカスタマイズできる機能
• iOSでは11種類のテキストスタイルでDynamic Typeを使用可能
  
  

Dynamic Typeを実装する際の注意点

1. テキストはできる限りダイナミックにし、拡張性を持たせる
2. 画面の幅を最大限に利用する
3. テキストを切り捨てず規定値のUIと同じ量を表示する
4. グリフ（字の形）のサイズを調整してUIのバランスを保つ

Dynamic Typeの実装方法

• UITextViewやUILabelでDynamic Typeを利用するには、テキストスタイルにpreferredFontを設定し、 adjustsFontForContentSizeCategoryをtrueにする
• アプリがフォアグラウンドでも（閉じなくても）フォントサイズの変更によりViewが変更します
• iOS 11からカスタムフォントでも利用しやすくなった
• Dynamic Typeにはプレビュー機能も実装された
  • Environment Overridesペインを使用して、シミュレータで結果を即時に確認可能
    
    

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

// Custom Fontの設定
var fontDict: [UIFont.TextStyle : UIFont] = myCustomFontDict()
if let font = fontDict[style] {
 label.font = UIFontMetrics(forTextStyle: style).scaledFont(for: font)
} else {
 label.font = UIFont.preferredFont(forTextStyle: style)
} 

視覚効果を減らす

• 視覚効果は没入感を演出するのに使用される
• しかし、この効果を望まないユーザもいる
  • 3人に1人は動きに敏感で、ジェットコースターや社内での読書が苦手。中には動きのある画面を見るだけで過敏に反応する人もいます
• 動き（アニメーション）を減らす設定はすでにiOSにあり、天気や視差効果などをオフに設定できる
• 動画の自動再生
  • クリックして詳細を知りたくなる人もいれば、不快に思ったり不安発作を起こしたりする人もいる
  • そのため、動画の自動再生の設定もできるようになった
  • 設定をオフにすると、再生にはユーザの操作が必要となった
• 画面切り替え時の視覚効果
  • クロスフェードトランジションを優先することができる
    • クロスフェードトランジションとは、画面切り替え時に視差効果を減らすこと
  • 設定をオンにすると、ディゾルブ効果に変わる
    • ディゾルブ効果とは、フェードイン・フェードアウトを組み合わせて画面切り替えする
      
      

提供されているAPI

• 設定次第でアニメーションを変更可能

// 視覚効果設定のAPI
static var UIAccessibility.isReduceMotionEnabled: Bool { get }
static let UIAccessibility.reduceMotionStatusDidChangeNotification: NSNotification.Name

// 動画の自動再生設定のAPI
// isVideoAutoplayEnabledがfalseであれば、動画の再生や一時停止も可能にしておく
// 通知があれば、動作を変更する
static var UIAccessibility.isVideoAutoplayEnabled: Bool { get }
static let UIAccessibility.videoAutoplayStatusDidChangeNotification: NSNotification.Name

Color以外での区別

• 健常者には違う色に見えても、視覚障害を持つ人には似た色に見える場合がある
  • 2型2色覚の人は、赤・緑・黄色が同じ色に見えます
• iOS 13では設定から、画面表示とテキストサイズのColor以外で区別をオン・オフ設定することが可能
  
  

開発者が行うこと

• shouldDifferentiateWithoutColor をチェックし、differentiateWithoutColorDidChangeNotification を監視する
  • trueなら色だけで情報を伝えている箇所には、形など他のインジケータを追加する
• また、色だけに意味づけを頼るのは可能な限りやめる

public func UIAccessibility.shouldDifferentiateWithoutColor() -> Bool
public static let UIAccessibility.differentiateWithoutColorDidChangeNotification:
NSNotification.Name