優れたアクセシビリティラベルを作成する

(音楽)

おはようございます おはようございます 私はジョーディン アクセシビリティのデザインと 品質を管理するチームの一員です

Apple製品はアクセシビリティに配慮し 作られています

アクセシビリティは人権であり Appleが重視する価値観です アプリケーションをダウンロードした時 私は期待します VoiceOverで ボタンやコントロールに アクセスできるはずと 正直に言うとアプリケーションを 30秒使ってみて 機能が使えないと判断したら 削除します 私はアプリケーションを 使いたいのですが それを実現するには あるものが必要です VoiceOverや画面の読み上げ 音声コントロールは アプリケーションの操作に 使いますが 機能させるにはAppの要素に ラベルを付ける必要があります

今日はアクセシビリティラベルの概要と コンテキストを理解する大切さ そして実例を紹介します

ではアクセシビリティラベルとは？

定義は簡単です アクセシビリティ要素を識別する ローカライズされた配列です 詳しく見ましょう アクセシビリティ要素の認識とは どういう意味でしょう これはアプリケーションの要素に ラベルを付け コンテキストや意味を 与えることです

コードも非常に簡単で 配列を１行書けば完了です しかし思います 適切なラベルを付けるのは とても難しいと すべてはコンテキストによって 変わるからです

これから話す内容を聞けば コンテキストの大切さを 実感しますよ

さっそく例題です このボタンに ラベルを付けるとしたら？

普通なら“プラス”でしょうか それも悪くありません では少しコンテキストを 加えてみましょう

ナビゲーションバーにある 十字形の場合は？ iOSのAppでよく見ますね この十字形のラベルは？ “追加”ですか？ それも素晴らしいですね メモアプリケーションで “追加”と聞けば “新規メモを追加”と 理解します しかしラベルは 簡潔であるべきです

買い物の場面では “お気に入りに追加”のような 別のアクションと 混同しないようなラベルにします

ここでは“カートに追加”です

では“カートに追加”が 複数ある時は？ この場合は“ピーナッツバターを カートに追加”でしょう 粒なしピーナッツバターが 希望です

最初の例に戻ります このボタンに 適切なラベルとは？ そうです コンテキストにより異なります

ではどのようなラベルが適切か 実例をご紹介しましょう

まず大切なのは アプリケーションにラベルを加えること これは絶対です ラベルがないと 次のように読み上げます “ボタン　ボタン　ボタン” “データを消去ボタン” かもしれませんから 怖くて押せません

ラベルがなく ボタン内に イメージが含まれている場合は こう読み上げるでしょう

“プラス アイコン アウトライン #999999.” 今何て？　意味不明ですね ですから必ずラベルを 付けてください

VoiceOverは要素タイプを 認識済みのため 配列に“ボタン”や“タブ”と 記述する必要はありません もし書いてしまうと こう読み上げます “追加ボタンボタン” 次はどうでしょう “追加ボタン” この方が明快ですね

UIの変更時はラベルも更新を 追加ボタンがあるとします “追加ボタン” これを削除に変えます

“削除ボタン” 正しく読み上げられるよう ラベルも更新しましょう

同じアクションを示すボタンが 複数ある場合は コンテキストを加えます では追加する商品が 不明な例を “追加ボタン” これはピーナッツバターを追加？ それともバナナ… それともクッキー？ 私の大好物です

次はもう少し明白です “ピーナッツバターを 追加ボタン” ピーナッツバターを 選択中でしたか 粒々はニガテです

不要なラベルは省略を 音楽プレイヤーを使う場面では 扱うものは曲ですね では読み上げさせてみます “曲をプレイボタン” “次の曲”という表現も 不要ですから 次の方が適切でしょう “プレイボタン” “プレイ”のみです

スピナーのようなアニメーションに ラベルを加えると VoiceOverはAppの状態を こう伝えます “ローディング中” 大切な情報です

次はどうでしょう “アイテムを削除 ゴミ箱へボタン” 言葉が多すぎますね どうかラベルは できる限り簡潔にしてください コンテキストで内容は 明らかなので 次のようにします “削除ボタン” これだけで十分です

長いラベルが 常に悪いわけではなく ふさわしい状況で使用すれば 面白いアプリケーションになり 人々の記憶に残せます クッキーモンスターの ステッカーには 長くて面白いラベルが 付けられています では聞いてみましょう “クッキーで幸せ ムシャムシャボタン” とてもステキですよね このステッカーには 人を笑顔にする狙いがあります 絵でも音声でも 笑わせてくれますね では まとめです

必ずラベルを付け “ボタン”とだけ 読み上げないようにします

要素タイプの情報は VoiceOverが得ているので “ボタン”のような要素の追加は 不要です

UIの変更時はラベルも更新を “追加”を“削除”に 変更した場合は ラベルの更新も 忘れないようにします

“次の曲”“前の曲”のような 不要な言葉は省きましょう コンテキストを加えれば 買い物中に何をカートに追加したか 分かりやすくなります

アニメーションに ラベルを付けると ローディング中などの アプリケーションの状態を伝えられます

“削除しゴミ箱へ移動”のように 長いラベルは避け 長くするなら 意図的に使いましょう

皆さんがラベルを付ける上で この話が役に立てば幸いです 自分のアプリケーションが どんな風に読まれるのかは VoiceOverで 確認してみてください 使いやすいアプリケーションに 変わることでしょう ありがとうございます (拍手)