あらゆるユーザー向けにMacアプリのアクセシビリティを高める方法

macOSのパワーと柔軟性を最大限に活用したアクセシビリティ機能を統合する方法を解説します。VoiceOverやVoice Controlをサポートする方法、ビューのレイアウトを改善する方法、支援技術によるコンテンツのナビゲーションの方法など、より発展的な内容を学ぶことができます。

リソース

関連ビデオ

WWDC24

SwiftUIにおけるアクセシビリティの最新情報

WWDC21

SwiftUIのアクセシビリティ: 基礎を超えて

こんにちは Nicholasです Accessibilityチームのエンジニアですアクセシビリティは作成したアプリを多くの人に利用してもらうために非常に重要です今日は基本だけでなく Macアプリのアクセシビリティを高める方法を説明します Macアプリは主にキーボードとマウスで操作するよう設計されており高密度のユーザーインターフェイスと強力なマルチタスク機能があります今日はこのMac特有の性質によるアクセシビリティ関連の重要な検討事項についてお話しします

まずアクセシビリティを高めるようなアプリのレイアウトを検討しアプリ内のナビゲーションを高速化しアプリの操作のアクセシビリティを強化します Macのアプリにはコンテンツ等を表示するスペースが十分にありますインターフェイスのレイアウトをわかりやすく直感的なものにするにはその要素がアクセシビリティ技術でどう表示されるかを考えることが重要です SwiftUIはアプリを構成する個々のビューをアクセシビリティ要素として表しますアクセシビリティ要素にはアクセシビリティ技術でアプリを理解し操作するために必要な情報が含まれていますアクセシビリティ要素に慣れていなければ WWDC 2024のSwiftUIのアクセシビリティの最新情報をご視聴ください今テキスト文書の編集用の MacアプリをSwiftUIで構築しています

サイドバーではページを切り替えたり重要なページにしおりを付けたりできます

コントロールのあるインスペクタでは選択したテキストを書式設定できますまたスタイルプリセットのリストを使うと複数の書式オプションを同時に適用できます

本当に良いアプリにしたいのですべての人が使えるものにしなければなりませんそのため初めからアクセシビリティの基本事項を実装し VoiceOverを使用する新機能をテストしてきました

VoiceOverは画面読み上げ機能なのでさまざまな視力の人がアプリを使えるようになります VoiceOverを使うとインターフェイスを音声で聞くことができます VoiceOverはこのように聞こえますまた点字での表示も可能です VoiceOverを使うとアプリのアクセシビリティを効果的にテストできます VoiceOverはアプリのアクセシビリティ情報をフル活用するからです VoiceOverがうまく機能すれば音声コントロールやスイッチコントロールなど他のアクセシビリティ技術ともうまく連携できるでしょう

Macでは VoiceOverは主にキーボードショートカットで操作しますたとえばショートカットで画面上の次の要素や前の要素に移動できますこのショートカットを使えば VoiceOverの焦点を 1要素ずつ移動してその説明を聞くことができます

「最小化、ボタン、フルスクリーン、ボタン、ツールバー、テキスト文書、サイドバー、表、垂直スプリッター、テキストの編集、テキスト末尾への挿入、垂直スプリッター、フォーマットインスペクタ、スクロール領域」画面上でマウスをさっと動かすだけの操作も VoiceOverのユーザーはキーを何回も押すことになる場合があります

バックグラウンドでは VoiceOverは SwiftUIによる次のアクセシビリティ要素に移行しています

VoiceOverでのナビゲーションを高速化するため SwiftUIではアクセシビリティ要素をコンテナのアクセシビリティ要素にグループ化します

コンテナのフォーカスはキーボードで操作できます Macのデフォルトでは VoiceOverはコンテナ単位で移動するためアプリ内を移動しながら必要なときだけコンテナにフォーカスするほうが高速です Macのアクセシビリティが iPhoneやiPadなど他のプラットフォームと異なるのは主に Macに入れ子のコンテナがあるためですそれによりアクセシビリティ要素のツリー構造が生成されアプリのインターフェイスを表しますアプリでは関連する要素をコンテナにグループ化して VoiceOverでのナビゲーションを高速化できます

ただし同時に入れ子のコンテナのレベルが多くなりすぎないように注意してくださいアプリで要素を見つけることが難しくなりコンテナへのフォーカスの繰り返しにかかる時間が長くなるからです

アプリ内のコンテナを絞り込むにはアクセシビリティ要素の子修飾子を使います

修飾子をビューに適用すると指定された動作によってビューとそのサブビューがどのように表現されるが決まります動作のオプションは3つあります

Containはビューをアクセシビリティコンテナとして表現しますサブビューはコンテナ内のアクセシビリティ要素です

Combineはビューとそのサブビューをすべての属性とアクションをマージする 1アクセシビリティ要素として表現します Ignoreはビューを 1アクセシビリティ要素として表現しこの要素はサブビューを完全に無視します

VoiceOverでアプリをテストしていたときいくつか再確認したい点に気づきましたまず右側のフォーマットインスペクタで VoiceOverを1つずつ移動します「フォーマットインスペクタのスクロール領域、 22項目、見出しスタイル、、ボタン、、ボタン、、ボタン、、ボタン、ボールドトグルボタン」ここでボールドトグルボタンに到達するにはスタイルプリセットをすべて経由する必要があることがわかりましたスタイルプリセットは VStackを使用して表示されます

VStackでアクセシビリティ要素の子修飾子を Contain動作とともに使用してコンテナを作成しますアクセシビリティラベル修飾子を使用してこのコンテナに名前を付けることもできます

ここでもう一度右側のフォーマットインスペクタで VoiceOverを1つずつ移動させます「フォーマットインスペクタ、スクロール領域、15項目、見出しスタイル、スタイルプリセット、グループ、ボールド、トグルボタン」いいですねすべての項目を経由する必要はありません探しているものだけで十分ですこのコンテナ内でのナビゲーションが機能することを確認するため VoiceOverをこのスタイルプリセットのコンテナにフォーカスさせ 1つずつ移動します

「スタイルプリセット内、グループ、 8項目、ボタン、、ボタン、、ボタン、、ボタン」うまくいきましたが VoiceOverは各スタイルプリセットのタイトルと「Apply」ボタンに別個にフォーカスしています

スタイルプリセットはタイトルとボタンの各ビューを含むHスタックとして表されます

アクセシビリティ要素の子修飾子と ageスタックで組み合わせた動作を使用して 1つのアクセシビリティ要素を作成しますこれによりタイトルビューとボタンビューのプロパティがマージされます

ここでもう一度スタイルプリセットコンテナ内で VoiceOverを1つずつ移動させます「スタイルプリセット内、グループ、 4項目、、ボタン、、ボタン、、ボタン、、ボタン」これで各プリセットを1つの要素として確認できますこれなら移動も容易で理解しやすいです

この構造で調整できるもう1つの側面は要素の順序ですこの例ではがの前にありますが VoiceOverにはを先に読んで欲しいとしますたくさんの本のタイトルをざっと頭に入れたいからですアクセシビリティ要素の順序を変更するには accessibilitySortPriority修飾子を使用します

本のタイトルビューの優先度を高くすると最初にソートされますデフォルトではビューの並べ替え優先度は0です優先度の等しいビューが視覚的な位置に基づいてソートされますこれでまず本のタイトルと次に著者と説明が読み上げられますアプリでVoiceOverをテストする際この順序が不適当なら accessibilitySortPriority修飾子を使用します

アクセシビリティ構造を改良できたのでローターを使用してさらにナビゲーションを進めます

アプリのブックマーク機能を使用するとページリストにざっと目を通してブックマーク済みのページを確認できますでも VoiceOverを使っているユーザーはブックマークを確認するためだけにすべてのページを移動する必要があります「2ページブックマークあり」「3ページ」「4ページ」「5ページブックマークあり」「6ページ」「7ページ」「8ページブックマークあり」「9ページ」「10ページ」この操作を見える場合と同様に簡単にするには VoiceOverでもブックマーク済みのページだけを移動できる機能が必要です

これにはローターを使います VoiceOverを使用するユーザーにとってローターは動作の円滑化に不可欠ですローターを使用するとアプリ内で素早くジャンプできるビューのコレクションやテキスト範囲を定義できますブックマークのローターをマイページリストに追加するには accessibilityRotor修飾子を使用して Bookmarksという名前を付けます条件付きでページを宣言します Bookmarksローターに含めるページですこれでVoiceOverをサイドバーのリストに合わせるとキーボードショートカットでローターメニューを開きすべてのブックマークを素早く読み上げて目的のブックマークページにジャンプできます「ブックマークメニュー」「2ページ」「5ページ」「5ページブックマークあり」

アクセシビリティローターは VoiceOverを使用するユーザーにとって時間がかかったり複雑だったりした操作を素晴らしい体験に変化させます

VoiceOverでアプリを操作するときは VoiceOverフォーカスと呼ばれるものを動かしています VoiceOverのようなアクセシビリティ技術ではキーボードとは別の独自のフォーカスを維持します

macOSおよびiOS 26では accessibilityDefaultFocus修飾子を使用すればアプリでVoiceOverのようなアクセシビリティ技術の最初のフォーカスを提案できます新しいシーンが表示されると SwiftUIがビューを提案し修飾子がフォーカスされて一方アクセシビリティ技術は引き続きユーザーの目的に基づいて最善の決定を下します

これでアプリ内の要素への移動が簡単になったのでその操作も簡単にできるようにしたいと思いますこのアプリではページのサムネールにポインタを合わせると出るボタンでブックマークできる機能を追加しましたこれの良い点はボタンが不要な時にはサムネールの表示が遮られないことですただし VoiceOverのユーザーはポインタを動かさないためボタンにアクセスできません

アプリでポインタを要素上に移動する必要がある操作やトラックパッドジェスチャーの実行は誰もが行えるとは限りませんそうした操作を見つけて実行する別の方法を提供する必要があります

幸い SwiftUIならこれを簡単な方法で行えますビューにはVoiceOverのようなアクセシビリティ技術がアクセシブルな方法で実行できるアクションを追加できますアクセシビリティアクションをビューに追加するにはその修飾子を使用します修飾子を使ってページリストのビューにブックマークアクションを追加します非常に簡単です

次に VoiceOverでページのサムネールをフォーカスし新しいアクセシビリティアクションを使用してみます「3ページ」「メニュー」「2つの項目があります」「別の項目を表示します」「3ページをブックマーク」「3ページをブックマーク」

キーボードショートカットを使ってメニューを開きページを簡単にブックマークできました音声コントロールなど他のアクセシビリティ技術もこのアクションに依存しています

アプリの操作感を改善する別の簡単な方法がキーボードショートカットです一般的なタスクをキーボードで操作できることは優れた機能であると同時にアクセシビリティにも大きな影響を与え特にマウスを使用できない人の役に立ちます最後に独自のカスタムコントロールを作成する場合他のコントロールのように組み込みのアクセシビリティ情報がありません SwiftUIでコントロールを簡単にアクセス可能にする方法については「SwiftUI Accessibility: Beyond the basics」をご確認ください WWDC 2021です皆さんもぜひ MacでVoiceOverを使用してアプリ内のコンテナを改良しカスタムローターを追加してみてくださいそして最後に Accessibility Nutrition Labelを使えばアプリのアクセス性を強調できます詳細については「Evaluate your app for Accessibility Nutrition Labels」をご覧くださいありがとうございました

4:15 - Contain subviews within accessibility container

// Contain subviews within accessibility container

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .contain)
  }
}

4:23 - Combine subviews into one accessibility element

// Combine subviews into one accessibility element

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .combine)
  }
}

4:33 - Hide subviews from accessibility

// Hide subviews from accessibility

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .ignore)
  }
}

5:12 - Contain style presets in accessibility container

// Contain style presets in accessibility container

import SwiftUI

struct FormattingInspectorView: View {
  var body: some View {
    Form {
      VStack {
        StylePresetView(type: .title)
        StylePresetView(type: .heading)
        StylePresetView(type: .subHeading)
        StylePresetView(type: .body)
      }
      .accessibilityElement(children: .contain)
      .accessibilityLabel("Style Presets")
    }
  }
}

6:21 - Merge Title View and Button into one accessibility element

// Merge Title View and Button into one accessibility element

import SwiftUI

struct StylePresetView: View {
  let preset: StylePreset
  
  var body: some View {
    HStack {
      PresetTitleView(preset: preset)
      Button("Apply") { /* ... */ }
    }
    .accessibilityElement(children: .combine)
  }
}

7:01 - Set the order of accessibility elements

// Set the order of accessibility elements

import SwiftUI

struct BookDetailsView: View {
  let book: Book

  var body: some View {
    VStack {
      Text(book.author)
      Text(book.title)
        .accessibilitySortPriority(1)
      DescriptionView(book: book)
    }
    .accessibilityElement(children: .combine)
  }
}

8:43 - Add an accessibility rotor for bookmarked pages

// Add an accessibility rotor for bookmarked pages

import SwiftUI

struct PagesView: View {
  @Binding var pages: [Page]
  
  var body: some View {
    List(pages) { page in
      PageListItemView(page: page)
    }
    .accessibilityRotor("Bookmarks") {
      ForEach(pages) { page in
        if page.isBookmarked {
          AccessibilityRotorEntry(page.title, id: page.id)
        }
      }
    }
  }
}

9:33 - Set the default VoiceOver focus

// Set the default VoiceOver focus

struct MyView: View {
  @AccessibilityFocusState(for: .voiceOver) var focusedForVoiceOver

  var body: some View {
    FirstView()
    SecondView()
      .accessibilityDefaultFocus($focusedForVoiceOver, true)
    ThirdView()
  }
}

10:28 - Add an accessibility action to bookmark the page

// Add an accessibility action to bookmark the page

import SwiftUI

struct PageListItemView: View {
  var page: Page
  
  var body: some View {
    VStack() {
      ThumbnailView(page: page)
      Text(page.title)
    }
    .onHover { /* ... */ }
    .accessibilityAction(named: page.isBookmarked ? "Remove Bookmark" : "Bookmark") {
      page.isBookmarked.toggle()
    }
  }
}

あらゆるユーザー向けにMacアプリのアクセシビリティを高める方法

関連する章

リソース

関連ビデオ

WWDC24

WWDC21