概要
Full Keyboard Access は、タッチ操作が難しいユーザーでも、キーボードだけでアプリを操作できるようにするアクセシビリティ機能です。
主なポイントは、すべてを独自実装するのではなく、Apple が提供しているアクセシビリティ・フォーカス・キーボード操作の仕組みに乗りつつ、足りない部分を補うことです。
Full Keyboard Access とは
Full Keyboard Access は、画面上の要素をキーボードで移動・操作できるようにする機能です。
ユーザーはキーボードを使って、以下のような操作ができます。
- 画面上の要素へ移動する
- ボタンやセルなどをアクティベートする
- アクションメニューを開く
- 画面上の要素を検索する
- ドラッグ操作などを行う
重要な考え方
Full Keyboard Access 対応で大事なのは、以下の3つです。
- 操作できるものは、キーボードでも操作できるようにする
- 操作できないものには、キーボードフォーカスを当てない
- アイコンだけのボタンなどは、検索・音声・キーボード操作で見つけやすくする
つまり、単に isAccessibilityElement = true を付けるだけでは不十分です。
ユーザーがキーボードで移動したときに、そこが本当に操作できる要素なのか を意識する必要があります。
1. よく使う操作には Custom Action / Keyboard Shortcut を用意する
たとえば、カードやセルに対して以下のような操作がある場合、タップだけでなくキーボードからも実行できるようにします。
- 追加
- 削除
- 保存
- ピン留め
- 共有
- 既読 / 未読
- お気に入り追加
このような操作には、主に以下の2つの方法があります。
UIAccessibilityCustomAction
UIAccessibilityCustomAction を使うと、VoiceOver / Switch Control / Full Keyboard Access など、複数のアクセシビリティ機能から同じアクションを利用できます。
Full Keyboard Access では、アクションメニューから実行できます。
let addAction = UIAccessibilityCustomAction(
name: "Add",
image: UIImage(systemName: "plus.square")
) { _ in
self.addCard()
return true
}
cardView.accessibilityCustomActions = [addAction]
使うとよいケース
- セルに対する追加操作がある
- 長押しメニュー相当の操作がある
- スワイプアクション相当の操作がある
- 画面上にボタンとして常時表示されていない操作がある
ポイント
Custom Action を設定すると、タッチ以外の操作手段を使っているユーザーにも、その機能を提供できます。
UIKeyCommand
UIKeyCommand を使うと、物理キーボード向けのショートカットを定義できます。
これは Full Keyboard Access を使っているユーザーだけでなく、通常の外部キーボード利用者にも便利です。
let addCommand = UIKeyCommand(
title: "Add",
image: UIImage(systemName: "plus.square"),
action: #selector(addFocusedCard),
input: "A",
discoverabilityTitle: "Add Card"
)
使うとよいケース
- よく使う操作がある
- キーボードショートカットとして提供したい操作がある
- Command キー長押しで表示されるショートカット一覧に出したい操作がある
ポイント
頻繁に使う操作は、タップだけではなくキーボードショートカットでも実行できると便利です。
2. 操作できない要素にキーボードフォーカスを当てない
VoiceOver 対応のために isAccessibilityElement = true を設定している要素があると、Full Keyboard Access のカーソルもその要素に移動することがあります。
しかし、その要素が実際には操作できない場合、ユーザーが Space や Enter を押しても何も起きません。
これはユーザーにとって混乱の原因になります。
accessibilityRespondsToUserInteraction
操作できない要素だけど、VoiceOver などでは読み上げ対象にしたい場合は、accessibilityRespondsToUserInteraction を使います。
itemView.isAccessibilityElement = true
itemView.accessibilityLabel = "Triangle"
itemView.accessibilityRespondsToUserInteraction = false
使うとよいケース
- 読み上げ対象にはしたい
- ただし、タップやキーボード操作の対象ではない
- 装飾的な情報ではないが、操作可能な UI でもない
例
- 説明用の図形
- 状態を示すだけのアイコン
- 読み上げたいが操作はできない画像
- 情報表示用のラベル
ポイント
キーボードフォーカスは、実際に操作できるものにだけ当たるべきです。
canBecomeFocused を安易に上書きしない
Full Keyboard Access のためだけに canBecomeFocused を無理に上書きするのは避けた方がよいです。
理由は、canBecomeFocused は Full Keyboard Access だけでなく、通常のフォーカスエンジンにも影響するためです。
その結果、Full Keyboard Access を使っていない通常の Tab ナビゲーションにも影響が出る可能性があります。
ポイント
Full Keyboard Access のために無理やりフォーカス対象を増やすのではなく、まずはアクセシビリティ要素として正しく整理することが大事です。
Full Keyboard Access には Find 機能があり、画面上の要素を検索できます。
たとえば、歯車アイコンだけの設定ボタンがある場合、accessibilityLabel が "Settings" だけだと、ユーザーが以下のように検索しても見つからない可能性があります。
そのため、ユーザーが呼びそうな別名を accessibilityUserInputLabels に設定します。
settingsButton.accessibilityUserInputLabels = [
"settings",
"prefs",
"preferences",
"gear"
]
使うとよいケース
- アイコンだけのボタン
- 複数の呼び方がありそうな機能
- 見た目と機能名が一致しにくい UI
- Voice Control でも操作しやすくしたい UI
ポイント
accessibilityUserInputLabels は、Full Keyboard Access の Find だけでなく、Voice Control でも役に立ちます。
4. accessibilityPath でフォーカス範囲を調整する
ボタンや UI の形が四角ではない場合、accessibilityPath を設定すると、Full Keyboard Access のカーソル表示や VoiceOver のフォーカス範囲を実際の形に近づけられます。
たとえば、丸いボタンの場合は以下のように設定できます。
let rect = circleButton.convert(circleButton.bounds, to: nil)
circleButton.accessibilityPath = UIBezierPath(ovalIn: rect)
使うとよいケース
- 丸いボタン
- 三角形のボタン
- 不規則な形のタップ領域
- 見た目と実際の矩形領域が大きく違う UI
ポイント
フォーカス表示が UI の見た目と大きくズレていると、ユーザーがどこを操作しているのか分かりにくくなります。
スクロールビュー内の accessibilityPath / accessibilityFrame
スクロールビュー内の要素は、スクロールによって画面上の位置が変わります。
そのため、accessibilityPath や accessibilityFrame を固定値で設定すると、スクロール後に位置がズレる可能性があります。
スクロールビュー内で使う場合は、必要に応じて override し、常に正しい画面座標を返すようにします。
実装時のチェック観点
アプリで Full Keyboard Access 対応を確認する場合は、以下を見るとよいです。
| 観点 |
確認すること |
| キーボード移動 |
Tab / Shift + Tab で主要な操作要素に移動できるか |
| 操作実行 |
Space / Enter でボタンやセルを実行できるか |
| 不要なフォーカス |
操作できないテキスト・画像・装飾にカーソルが当たらないか |
| Custom Action |
長押し相当、削除、保存、ピン留めなどがアクションメニューから実行できるか |
| Keyboard Shortcut |
よく使う操作に UIKeyCommand があるか |
| Find |
Full Keyboard Access の検索で主要機能を見つけられるか |
| ラベル |
画像ボタンに accessibilityLabel / accessibilityUserInputLabels があるか |
| フォーカス範囲 |
フォーカス表示が UI の見た目とズレていないか |
シミュレーターでのテスト方法
物理キーボードが手元になくても、iOS Simulator / iPadOS Simulator 上で Full Keyboard Access の確認ができます。
基本的には、Simulator 内の Settings アプリから Full Keyboard Access を有効化し、Mac のキーボードを使って操作を確認します。
Full Keyboard Access を有効にする
Simulator で以下を開きます。
Settings > Accessibility > Keyboards > Full Keyboard Access
Full Keyboard Access を ON にします。
有効にすると、画面上の要素にキーボードフォーカスの枠が表示されるようになります。
Simulator のキーボード入力を有効にする
Mac のキーボード操作が Simulator に渡らない場合は、Simulator のメニューから以下を確認します。
I/O > Keyboard > Connect Hardware Keyboard
Connect Hardware Keyboard が有効になっている状態で確認します。
参考