はじめに
こちらは個人開発アプリができるまで by am10 Advent Calendar 2024の 18 日目の記事です。
18 日目はアクセシビリティ対応についてです。
下記の記事を参考に対応していきます。あまり詳しくないですが何も対応しないよりはいいでしょう。
やること
基本的には Accessibility Inspector で警告が出たところの対応をしていきます。
Xcode > Open Developer Tool から Accessibility Inspector を開きます（開く前にシミュレータでアプリを起動しておく）。
- Simulator を選択
- アプリを選択（今回は debug-ExpenseLog）
- 右上の 3 つのアイコンの真ん中をクリック
- Run Audit をクリック
この警告に対応していきます。
コントラスト
まずは色のコントラスト比が低い部分を修正していきます。
Run Audit で「Contrast failed」と表示されるところを修正します。
下記のサイトなどを使ってコントラスト比を確認します。
いい色がわからないときは ChatGPT に聞きます。
Assets Catalog で High Contrast にチェックを入れてハイコントラストモードにも対応します。
ハイコントラストモードはシミュレータ起動時に Environment Overrides の Accessibility > Increase Contrast で確認できます。
タップ領域の確保
iOS ではタップ領域は最低 44 ✕ 44pt のサイズを確保しろ！というガイドラインがあります。
Give all controls and interactive elements a hit target that’s large enough. For example, on touchscreen devices, a hit target needs to measure at least 44x44 pt
Run Audit で「Hit area is too small」という警告が月画面のソートボタンで出ていたので下記のように修正します。
|
1 2 3 4 5 6 |
Button(action: { isAscending.toggle() }, label: { Image(systemName: isAscending ? "arrow.up.right" : "arrow.down.right") .frame(minWidth: 44, minHeight: 44) // ここ追加 }) |
ここで注意が必要なのは Button ではなく label 内の View の Image を指定しないとタップ領域は広がらないということです。
今回 Image はそのままのサイズにしたかったので resizable() はせずに frame を指定しました。
VoiceOver
続いて VoiceOver に対応します。
パーツを指定して吹き出しアイコンをクリックすると読み上げてくれます。
これで見ていって意味が伝わらなそうなところを修正していきます。
Run Audit で「Label not human-readable」と表示されるところも修正します。
今回は登録画面表示のフローティングボタンと月画面のソートボタンが対応必要そうでした。それ以外はわりとそのままでいける感じがしました。
Localizable.xcstrings に文言を追加して下記のように accessibilityLabel を設定します。
|
1 2 3 4 5 |
// 登録画面表示ボタンに追加 .accessibilityLabel("show_register_button_accessibility_label") // ソートボタンに追加 .accessibilityLabel(isAscending ? "sort_button_ascending_accessibility_label" : "sort_button_descending_accessibility_label") |
ねんのため実機でも確認してみます。
実機で VoiceOver を確認する前はまず下記の設定をしてください。
設定アプリ > アクセシビリティ > ショートカットで VoiceOver をチェック。
これで iPhone のサイドボタンを 3 回押すと VoiceOver のオン・オフが切り替えられるようになります。
（ショートカットではなく一番上の VoiceOver をオンにすると戻し方がわからなくなるのでこっちの方が安心です）
iPhone のサイドボタンを 3 回押して動作を確認します。終わったらもう一度サイドボタンを 3 回押して完了です。
Dynamic Type
続いて Dynamic Type に対応します。
Dynamic Type はシミュレータ起動時に Environment Overrides の Dynamic Type で確認できます。
家計簿アプリではフォントサイズは固定していないので何もしなくても文字が拡大・縮小されます。
あとはレイアウトが崩れないように調整していくだけです。
現状は最大にするとこんな感じです。
| 年画面 | 月画面 | 登録画面 |
|---|---|---|
そこまで時間をかけたくないので今回は簡易的な対応にしておきます。
下記のように sizeCategory を使って文字サイズが大きい場合と小さい場合でレイアウトを変えることで対応します。
|
1 2 3 4 5 6 7 8 9 |
@Environment(\.sizeCategory) private var sizeCategory private var isAccessibilityCategory: Bool { sizeCategory >= .accessibilityMedium } if isAccessibilityCategory { // 文字サイズが大きい場合 } else { } |
isAccessibilityCategory は iOS 18.2 以降では Deprecated になっているようなので自前で isAccessibilityCategory を用意しています。
This property is true for accessibilityMedium, accessibilityLarge, accessibilityExtraLarge, accessibilityExtraExtraLarge, and accessibilityExtraExtraExtraLarge. It is false for other values.
上記のように accessibilityMedium 以上で true になるらしいので sizeCategory >= .accessibilityMedium で同じ判定ができます。
isAccessibilityCategory で横並びと縦並びを変えるのと余白の調整をして下記のように修正しました。
| 年画面 | 月画面 | 登録画面 |
|---|---|---|
おわりに
アクセシビリティ対応もしたのでめちゃくちゃ使いやすいアプリになったことでしょう！
明日はユーザーにレビューを求める requestReview を実装します。
コメント