Appを視覚的にアクセシブルにする

Appを視覚的にアクセシブルにする

アクセシビリティを考慮にいれたデザインをすると、Appを使う人全員にパワーを与えることができます。Appに適応性の高いインターフェースを作り、思慮深いアプローチから色を選び、読みやすいテキストを提供し、全体に優れた体験を提供できるような視覚的設定を採用する方法をお伝えします。このセッションは、ユーザーインターフェースを作るような気持ちでデザインしました。つまり、誰にでもアクセシブルです。アクセシビリティとデザインをもっと知りたい場合は、"Visual Design and Accessibility"、"Accessibility Inspector"、"Building Apps with Dynamic Type"、"Introducing SF Symbols"をご覧いただけます。

リソース
- Accessibility for UIKit
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- アクセシブルな空間体験の実現
WWDC21
- watchOSにおけるアクセシブルな体験の実現
WWDC19
ダウンロード

こんにちは WWDCへようこそ “アプリケーションを視覚的にアクセシブルにする” アクセシビリティチームのエンジニアを務めるドゥルー･ハースです本日はアプリを視覚的に利用可能にする方法をお伝えします “視覚アクセシビリティ”と言えば iOS内蔵のVoiceOverが代表的ですね画面上の項目を読み上げてくれるためユーザーは画面を見ずにデバイスを操作することができますしかし視覚アクセシビリティには他にも種類があります
視力喪失にはさまざまな程度があり人によって経験する症状に違いがあります完全に見える人もいれば弱視や盲目の人などもいますその他にも色覚異常や光感受性など多くの症状が存在するのです視力喪失の程度は人によって異なるので各自に合ったカスタマイズができるよう iOSは幅広い設定を用意しています私のヒントを参考にしていただければ皆さんのアプリですべての人が視覚体験を楽しめるようになりますまずアプリで色やシェイプを活用しブランディングを行う方法をご紹介します次にテキストの“読みやすさ”についてご説明しますアプリでレイアウト変更などを行えば万人にとって読みやすいテキストを作成できますまたアクセシビリティ設定で表示設定を変更しアプリの外観を変えられますではアプリを視覚的に利用可能にする方法をお伝えします例えばあなたがアプリを作る際あるUI要素を目立たせたいとします色を使って強調するのも手ですが色だけに頼りたくはありませんよね色覚異常や低視力の人は色だけでは強調された部分を判別しにくいためですそのため優れたデザインにするためにはシェイプを使うとよいでしょう Apple ArcadeにSneaky Sasquatchというゲームがあります App Storeではボタンに青色を使用し強調のためにシェイプを使う場合もあります
例えば“START PLAYING”ボタンは色やシェイプが施されており― ユーザーも標準のラベルではないと分かります実際私はこのデザインを見て興味を抱き引きつけられました他の例もご紹介します使用中のタブを示すため色のみが使われていますが設定でボタンの形を変更すれば更なる可視化を実現できます Button Shapes設定がオンの時にボタンをより目立たせたい場合は iOS 14に搭載される新たなAPIをご利用くださいボタンの形をデフォルト設定に適用できない場合は Button Shapes設定を有効にし別の外観を用意しましょう設定を確認するには UIAccessibilityで buttonShapesEnabledを呼び出しますまたは buttonShapesEnabled StatusDidChangeNotificationを監視しこの設定が変更された際アプリの実行中にあるコードを実行します昨年 iOS 13に追加された新しいAPIの Differentiate without Colorではボタン以外でも表示の差別化ができますこうしたデザインはステータスアイコンや特徴的な色のテキスト― また色だけに頼っている表示にも適応すべきですどこから始めるべきか不明な場合は SF Symbolsをお試しください 1500個以上のシンボルを皆さんの作るアプリにお使いいただけますこの中からぴったり合うものが見つからなければ SF Symbolsのアイコンを元に独自のシンボルを作成できます
SF Symbolsはウエイトやスケールを問わずに見栄えがよく非常に効果的ですつまりテキストサイズやスタイルに合ったシンボルを作ることも可能なのです私自身は色とシェイプを使った視覚的なUIの設計を始めたところです星座追跡アプリ Starstruckの作成に取り組んでいます視覚アクセシビリティ対応を検討する時期は開発の初期段階がベストですが後で取り掛かっても大丈夫です私は黄道十二星座にそれぞれ色を設定して区別をつけていますが色覚異常の方は色を判別できないでしょう各項目を目立たせるためには色だけでは不十分だと気づきアプリ内で使用する独自のシンボルを設計し各星座に区別をつけました色とシェイプを活用したのですこの結果より多くの方にアプリを楽しんでもらえるようになりました
他に太字のテキストも使いましたがこの点については後で説明しますアプリで色を使用する場合は色の対比が読みやすさに大きく影響するため対比の度合いによっては各要素を識別できない場合もあります Increase Contrastのアクセシビリティ設定では色の対比を強調し各要素を目立たせます iOSが提供する幅広い種類のシステムカラーは Increase Contrastの設定などに自動適用されますアプリの視覚体験を向上させる際に必要となる設定なので覚えておいてください原則として色はライトモードでより暗くなりダークモードではより明るくなります分かりやすいように例を挙げて説明しますデフォルトの設定では星座のシンボルに私が作成した色を使用していますしかし Increase Contrastをオンにしている場合もう少し暗い色が必要になりますでは Increase Contrastを有効にするので各セルのシンボルをよく見ていてください行きますよ
どうですかこのわずかな変化こそが非常に重要なのです人によってはこれでコントラストが高まり見え方が大きく変わるでしょうこうしたカスタムカラーとシンボルをアプリで使用している方もいますよねその場合はティントカラーを更新するかハイコントラストの外観用に代わりのアセットを提供する必要があります
プロジェクトのアセットカタログでは Attributes Inspectorで変更を行いシンボルの外観を設定できます “Appearances”で“High Contrast”のチェックボックスを選択するとお使いのシンボルの別バージョンが現れます
Increase Contrastがオンの場合 High Contrastの外観が適用されます XcodeのAccessibility Inspectorには便利なColor Contrast Calculatorがありますこのツールを使えば２つの色のコントラストを計算できますそれでは最前面にある白いシンボルと背景にある紫色のシンボルのコントラストを計算してみます 4.5対１という比率でしたがこれは許容できるギリギリの比率ですではハイコントラストの外観にしてみましょうシンボルがポップになるように背景色をより暗くしたので比率は大幅に改善され 7.5対１になりました
これらのバリエーションを用意できたので作業は完了です iOSではユーザーの表示設定に基づきこれらを自動的に切り替えますまた Smart Invert Colorsはダークモードに似た機能で明るい白色のUI要素を暗くします Smart Invert Colorsではダークモードよりもコントラストが高くなるため光感受性者はこちらを好むでしょう推奨はアプリ側のダークモード対応ですが Smart Invert ColorsはアプリUIを反転表示する設定です Smart Invert Colorsを好むユーザーもいるでしょう写真やビデオアプリのアイコンなどは反転されないようフラグを付けてください UIViewサブクラスでaccessibilityIgnores InvertColorsを設定すれば完了です
色とシェイプでデザインを際立たせる方法はいろいろありますそれがアプリのブランディングになりますしまた同時に豊かな視覚体験も実現するのですデザインがユーザーのニーズに即しているか常に確認し対応しましょう次はテキストの読みやすさについてです
iOSではデバイス上でテキストサイズが変更できます小さいテキストはコンテンツの密度を上げることができますし大きなテキストは読みやすくなりますより大きなテキストが必要なユーザーも存在します
アプリデザインでは文字をくっきりと読みやすくするよう留意しましょうこの点をデザインの初期段階に意識してください見やすいアプリになりますコンテンツの量だけでなく各種の画面サイズにも合わせられます大きなテキストで設計しましょう文章量が増えても切り詰めるのは避けたいもの情報が見逃されてしまいます代わりにラベルを付け表示幅を使いきりましょう
先にお話ししたシンボルもテキストサイズに合わせます traitCollectionDidChangeはオーバーライドでき画面上で表示が調整されると呼び出されます UITraitCollectionはデバイスごとの推奨サイズを表示しますそして比較演算子でこの列挙型上の比較ができます私のお気に入りの機能です Starstruckでユーザーがテキストサイズを変更したら規定値なのかより大きくしたのかを把握したいですよね既定サイズの場合シンボルとラベルを含むスタックビューは水平軸上に中央揃えで設定されます大きな文字の場合は垂直軸上で行頭揃えを選択しますこれでディスプレイの幅を最大限利用したラベル表示ができますラベルの行カウントは１でなく０にしておきますすると長くなっても折り返せますからね
読みやすさのためには太字も有効とお伝えしました太字はラベルがシンボルと並んでいる時だけでなく他のテキストと並んでいる時にも有効です Starstruckのユーザーは星のデータに夢中になりますこのように太字を使って見出しと詳細情報を視覚的に区別しています太字で強調する技は使えますよシステムに組み込まれたフォントスタイルを使えばテキストのウェート変更はとても簡単です
Bold Text設定はすべてのテキストに太字を適用します既定の細いフォントは読みにくい場合もあります Bold Text設定の効果がうまく反映されない場合は UIAccessibilityでBoldTextEnabledを呼び出し手動で更新します最後にアプリの外観を変える他の表示設定をご紹介します
私のアプリでは星座表示画面に視差効果を設定しました視差効果は UIMotionEffectで手前にある星の画像と背景の宇宙の画像の間に奥行き感を作りますデバイスを動かすと星の画像が背景に対してズレて動きます視差効果はホーム画面でおなじみですねこの効果は楽しいものですが乗り物酔いのような状態になる人もいますそうした画面の動きに敏感な人向けの表示設定機能がありますユーザーはこの機能を使って画面上の動きを調整できますアイドルアニメーションや視差効果などの動作の抑制動画の自動再生やGIFも制御できます視覚効果はアプリ体験をリッチにしてくれます一方で表示調整機能が必要なユーザーへの配慮は必須です動きの激しいアニメーションを使っているなら UIAccessibilityでisReduceMotionEnabledを設定しましょう reduceMotionStatusDidChangeNotificationでは設定変更を確認できます
その中のPreferCrossFadeTransitions について説明しますナビゲーションコントローラでは push segueが実行され画面はかぶさるように遷移します PreferCrossFadeTransitionはその動きを控えめにしますあなたにもできますよ iOS 14ではこの機能の設定用に新しいAPIを用意しています UINavigationController利用者には無償提供されますカスタムの遷移動作にはこのAPIが役立つでしょうこの機能が必要か確認するには prefersCrossFadeTransitionsを呼び出すか通知を確認します最後は Reduced Transparency設定ですぼやけた背景を不透明にする機能ですこの機能は文字を読みやすくしますぼやけた背景ではコントラストが乱れ可読性が下がるのです私のアプリでは星の情報画面の背景にぼかし効果を取り入れました没入感は出せましたがすべての人に適切とは言えません背景のコントラストを乱す場合もありますそこに文字が重なるとめまいを覚えるユーザーもいるでしょう Reduced Transparencyはぼかしの濃淡を均一に調整しますずっと読みやすくなりますねぼかしなどの視覚効果を使用していない場合 Reduced Transparencyの設定確認用APIが無償提供されていますこれらの表示設定であなたのアプリの見え方は改善されますこれはとても重要ですユーザーを限定しないアプリの提供はお客様の可能性を広げるからです誰にも使いやすいアプリ開発の努力に感謝しますさあアクセシビリティ設定画面を開いてご紹介した設定をオンにしてくださいアプリの外観の変化を確認できます見栄えが良くなっていますよね次に取り組むべき課題も見えてきたのではないでしょうかご清聴に感謝します

func observeButtonShapesNotification() {
    // Make buttons more visible by using shapes.
    // If your default design does not include button shapes, observe this notification to make visual changes.
    NotificationCenter.default.addObserver(self, selector: #selector(updateButtonShapes), name: UIAccessibility.buttonShapesEnabledStatusDidChangeNotification, object: nil)
}

@objc func updateButtonShapes() {
    if UIAccessibility.buttonShapesEnabled {
        // Use extra visualizations for buttons.
    } else {
        // Use default design for buttons.
    }
}

3:31 - Differentiate Without Color

func observeDifferentiateWithoutColorNotification() {
    // Use symbols or shapes to convey meaning instead of relying on color alone.
    // If your default design does not differentiate without color, observe this notification to make visual changes.
    NotificationCenter.default.addObserver(self, selector: #selector(updateColorAndSymbols), name: NSNotification.Name(UIAccessibility.differentiateWithoutColorDidChangeNotification), object: nil)
}

@objc func updateColorAndSymbols() {
    if UIAccessibility.shouldDifferentiateWithoutColor {
        // Use symbols or shapes to convey meaning.
    } else {
        // Use default design.
    }
}

7:47 - Smart Invert Colors

extension UIView {
    @available(iOS 11.0, tvOS 11.0)
    var accessibilityIgnoresInvertColors: Bool { get set }
}

9:57 - Large Text

// ZodiacConstellationCell.swift


override func traitCollectionDidChange (_ previousTraitCollection: UITraitCollection?) {

     if (traitCollection.preferredContentSizeCategory       
         < .accessibilityMedium) { // Default font sizes

         stackView.axis = .horizontal
         stackView.alignment = .center

     } else { // Accessibility font sizes

         stackView.axis = .vertical
         stackView.alignment = .leading

     }
}

11:33 - Bold Text

func observeBoldTextNotification() {
    // Update labels to use bold or heavy font styles.
    // If you aren't using system font styles, observe this notification to make visual changes.
    NotificationCenter.default.addObserver(self, selector: #selector(updateLabelWeight), name: UIAccessibility.boldTextStatusDidChangeNotification, object: nil)
}

@objc func updateLabelWeight() {
    if UIAccessibility.isBoldTextEnabled {
        // Use bold or heavy font weight
    } else {
        // Use font weight that is default to your design.
    }
}

13:08 - Reduce Motion

func observeReduceMotionNotification() {
    // Observe this notification to reduce or remove the frequency and intensity of motion effects.
    NotificationCenter.default.addObserver(self, selector: #selector(updateMotionEffects), name: UIAccessibility.reduceMotionStatusDidChangeNotification, object: nil)
}

@objc func updateMotionEffects() {
    if UIAccessibility.isReduceMotionEnabled {
        // Reduce or remove extraneous motion effects.
    } else {
        // Use default motion effects.
    }
}

13:51 - Prefers Cross-fade Transitions

func observeCrossFadeTransitionsNotification() {
    // Reduce or remove sliding animations for transitioning views.
    // If you aren't using system-provided navigation, observe this notification to make visual changes.
    NotificationCenter.default.addObserver(self, selector: #selector(updateTransitionEffects), name: UIAccessibility.prefersCrossFadeTransitionsStatusDidChange, object: nil)
}

@objc func updateTransitionEffects() {
    if UIAccessibility.prefersCrossFadeTransitions {
        // Replace sliding transitions with cross-fade animations.
    } else {
        // Use default sliding transitions.
    }
}

15:07 - Reduce Transparency

func observeReduceTransparencyNotification() {
    // Reduce or remove transparency by adjusting these effects to be completely opaque.
    // If you aren't using system-provided visual effects for blurs or vibrancy, observe this notification to make visual changes.
    NotificationCenter.default.addObserver(self, selector: #selector(updateTransparencyEffects), name: UIAccessibility.reduceTransparencyStatusDidChangeNotification, object: nil)
}

@objc func updateTransparencyEffects() {
    if UIAccessibility.isReduceTransparencyEnabled {
        // Make transparency effects opaque.
    } else {
        // Use default transparency.
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC23

WWDC21

WWDC19