View in English

  • メニューを開く メニューを閉じる
  • Apple Developer
検索
検索を終了
  • Apple Developer
  • ニュース
  • 見つける
  • デザイン
  • 開発
  • 配信
  • サポート
  • アカウント
次の内容に検索結果を絞り込む

クイックリンク

5 クイックリンク

ビデオ

メニューを開く メニューを閉じる
  • コレクション
  • トピック
  • すべてのビデオ
  • 利用方法

その他のビデオ

ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。

  • 概要
  • トランスクリプト
  • 優れたアクセシビリティラベルを作成する

    優れたアクセシビリティラベルは、Appがユーザーに気に入られるか、削除されてしまうかの違いを生み出します。Appのアクセシビリティエンジニアによるデモンストレーションを通して、VoiceOverをご体験ください。複雑なUIの操作方法や、機能を説明するラベルによってAppを簡単に万人向けにする方法を紹介します。

    リソース

      • HDビデオ
      • SDビデオ
    • プレゼンテーションスライド(PDF)

    関連ビデオ

    WWDC20

    • Mac Catalyst用のアクセシビリティの設計
    • Switch ControlのAppアクセシビリティ
  • このビデオを検索

    (音楽)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Developer Footer

  • ビデオ
  • WWDC19
  • 優れたアクセシビリティラベルを作成する
  • メニューを開く メニューを閉じる
    • iOS
    • iPadOS
    • macOS
    • tvOS
    • visionOS
    • watchOS
    Open Menu Close Menu
    • Swift
    • SwiftUI
    • Swift Playground
    • TestFlight
    • Xcode
    • Xcode Cloud
    • SF Symbols
    メニューを開く メニューを閉じる
    • アクセシビリティ
    • アクセサリ
    • App Extension
    • App Store
    • オーディオとビデオ(英語)
    • 拡張現実
    • デザイン
    • 配信
    • 教育
    • フォント(英語)
    • ゲーム
    • ヘルスケアとフィットネス
    • アプリ内課金
    • ローカリゼーション
    • マップと位置情報
    • 機械学習
    • オープンソース(英語)
    • セキュリティ
    • SafariとWeb(英語)
    メニューを開く メニューを閉じる
    • 英語ドキュメント(完全版)
    • 日本語ドキュメント(一部トピック)
    • チュートリアル
    • ダウンロード(英語)
    • フォーラム(英語)
    • ビデオ
    Open Menu Close Menu
    • サポートドキュメント
    • お問い合わせ
    • バグ報告
    • システム状況(英語)
    メニューを開く メニューを閉じる
    • Apple Developer
    • App Store Connect
    • Certificates, IDs, & Profiles(英語)
    • フィードバックアシスタント
    メニューを開く メニューを閉じる
    • Apple Developer Program
    • Apple Developer Enterprise Program
    • App Store Small Business Program
    • MFi Program(英語)
    • News Partner Program(英語)
    • Video Partner Program(英語)
    • セキュリティ報奨金プログラム(英語)
    • Security Research Device Program(英語)
    Open Menu Close Menu
    • Appleに相談
    • Apple Developer Center
    • App Store Awards(英語)
    • Apple Design Awards
    • Apple Developer Academy(英語)
    • WWDC
    Apple Developerアプリを入手する
    Copyright © 2025 Apple Inc. All rights reserved.
    利用規約 プライバシーポリシー 契約とガイドライン