自作iOSアプリをVoiceOverで操作してみた

社命により、今月からiOSアプリ制作の学習を始めました。iOSアプリに詳しい方から1日レクチャーを受けたり、「本気ではじめるiPhoneアプリ作り Xcode 7.x+Swift 2.x対応 黒帯エンジニアがしっかり教える基本テクニック (ヤフー黒帯シリーズ)」を読んだりした結果、路線・駅・方面を選択すると時刻表を表示する試作アプリが完成したところです。
試作アプリの画面例。東京メトロ副都心線池袋駅の渋谷方面時刻表が表示されている。

ここで、アクセシビリティに興味がある私はVoiceOverをオンにして、自作アプリを読み上げさせてみました。(読み上げだけにこだわるわけではないのですが。)まずはほぼ参考書通りに書いたコードを読み上げさせた例の動画です。画面上のUITableViewCellにUILabelを4つ配置し、時刻・列車種別・行先・備考を表示しています。(相変わらず字幕がなくてすみません。)

時刻→列車種別→行先→備考と読み上げると思いきや、時刻→備考→列車種別→行先と読み上げられます。コード上ではそのような順番で記載しているところがなく、なぜそうなるのかは原因不明です。

古いガイドなのですがAppleのサイトに「iOSアクセシビリティ プログラミングガイド(PDF)」があるので少し読んでみました。すると、「Table Viewのアクセシビリティの改善」の項に次のようにありました。

Table Viewの行ごとに複数の情報を表示する場合、情報を1つの理解しやすいラベルに集約することでVoiceOverユーザの体験を改善することができます。

テーブルに、それぞれ大量の情報を提供するセルが含まれている場合は、これらの中からの情報を組み合わせてLabel属性にすることを検討するべきです。こうすれば、VoiceOverユーザはセルの内容の意味を1つのジェスチャで得ることができ、個々の情報にそれぞれアクセスする必要がなくなります。

そこで、次のようになコードでaccessibilityLabelを付けてみました。(Swiftのコーディングについてはまだ研究中なので、おかしくてもご容赦ください。Optional型周りがまだまだ苦手。)

let timeForRead = itemData.itemTime!.stringByReplacingOccurrencesOfString("(\\d{2}):(\\d{2})", withString: "$1時$2分", options: NSStringCompareOptions.RegularExpressionSearch)
var a11yLabel = "\(itemData.itemTrainType!) \(itemData.itemDest!)行き \(timeForRead)発"
if let note = itemData.itemNote {
    a11yLabel = a11yLabel + "(\(note))"
}
cell.accessibilityLabel = a11yLabel

その結果、VoiceOverの読み上げ結果は次の動画のようになりました。

列車種別→行先→時刻→備考の順で読み上げられました。これはcell.accessibilityLabelで指定した通りの内容です。最初の時刻→備考→列車種別→行先と読み上げられるよりは分かりやすいのかな、と考えました。

都度読み上げのためのLabelを用意するのか、などまだ疑問はありますがこれをきっかけにネイティブアプリのアクセシビリティについても調べていきたいと考えました。今日はここまで。

この記事のタグ