サンプルコード


優れたアクセシビリティ体験の提供


VoiceOver などの支援技術をサポートするために、あなたのアプリの操作モデルを改善します。


Download


iOS 12.0+ iPadOS 12.0+ Xcode 11.3+



概観


優れたアクセシビリティ体験を提供するには、アクセシビリティを必要とするユーザがあなたのアプリをどのように操作するかを考える必要があります。たとえば、あなたのアプリは以下のことを行うべきです。


  • VoiceOver などの支援技術を使用して簡単に操作できます。

  • 最も頻繁に使用される機能をユーザが簡単に利用できるようにします。

  • さまざまな要素を適切な文脈で伝えます。

  • ユーザ操作の予測可能性を確保します。つまり、ジェスチャが他のアプリで VoiceOver である程度機能する場合、そのジェスチャはあなたのアプリでも同じように機能する必要があります。

    • このサンプルコードプロジェクトでは、VoiceOver に優れたアクセシビリティ体験を提供する方法を示します。サンプルアプリには、採用可能な犬のギャラリーが含まれています。VoiceOver を有効にしてリストをスワイプすると、システムが各々の犬に関する情報を読み上げます。また、年齢、性別、態度などの犬に関する詳細を聞いて、その犬をお気に入りとしてマークし、愛らしい犬の写真をさらに含むギャラリーを表示できます。



    さあ始めましょう


    サンプルアプリの動作を確認するには、Xcode を使用して iOS デバイス上でアプリをビルドして実行します。VoiceOver を必ずオンにしてください。これは、[Setting(設定)] の [General(一般)] > [Accessibility(アクセシビリティ)] > [VoiceOver] から行うことができます。



    カルーセル(回転木馬)ナビゲーションの改善


    採用可能な各々の子犬をプレビューするには、ユーザはスクリーン上部のコレクションビューを左右にスワイプします。ただし、VoiceOver がオンになっている場合、この操作には問題があり、支援技術はお気に入りボタンやギャラリーボタンなどの目に見える要素を認識せず、ユーザがリストの最後に到達するまで犬の詳細を認識しません。この動作は、優れたアクセシビリティ体験とは程遠いものです。


    犬のコレクションをナビゲートすることがアプリの中心です。これはユーザが使用する主な機能であるため、ユーザにとって簡単に実行できる必要があります。より良いアクセシビリティ体験を提供するために、サンプルでは、accessibilityTraits を adjustable (調整可能) に設定したカスタムクラス CarouselAccessibilityElement を定義します。


    1. override var accessibilityTraits: UIAccessibilityTraits {
    2. get {
    3. return .adjustable
    4. }
    5. set {
    6. super.accessibilityTraits = newValue
    7. }
    8. }


    adjustable な特性は、要素が accessibilityIncrement() および accessibilityDecrement() コールバックメソッドに応答してピッカーのように動作することを VoiceOver に伝えます。



    1. override func accessibilityIncrement() {
    2. // This causes the picker to move forward one if the user swipes up.
    3. _ = accessibilityScrollForward()
    4. }
    6. override func accessibilityDecrement() {
    7. // This causes the picker to move back one if the user swipes down.
    8. _ = accessibilityScrollBackward()
    9. }


    次に、サンプルは CarouselAccessibilityElement のインスタンスを作成し、そのフレームをコレクションビューのフレームに設定します。



    1. let carouselAccessibilityElement: CarouselAccessibilityElement
    2. if let theCarouselAccessibilityElement = self.carouselAccessibilityElement {
    3. carouselAccessibilityElement = theCarouselAccessibilityElement
    4. } else {
    5. carouselAccessibilityElement = CarouselAccessibilityElement(
    6. accessibilityContainer: self,
    7. dog: currentDog
    8. )
    10. carouselAccessibilityElement.accessibilityFrameInContainerSpace = dogCollectionView.frame
    11. self.carouselAccessibilityElement = carouselAccessibilityElement
    12. }


    VoiceOver をオンにすると、カルーセル アクセシビリティ要素は、コレクションビューの上に 2 つの新しいジェスチャを追加します。


  • 上にスワイプしてコレクション内を進めます。

  • 下にスワイプすると、コレクション内を後方に移動します。

    • サンプルで CarouselAccessibilityElement を使用すると、ユーザはリストの最後にあるボタンにのみアクセスできるようになるのではなく、リスト内のすべての犬のお気に入りボタンとギャラリーボタンにスワイプできるようになります。VoiceOver がオンになっている場合、犬のリストをスワイプするジェスチャは異なりますが、この違いにより、支援が必要なユーザが各犬をプレビューすることが容易になります。



    モーダルでないモーダルビューを表示


    ユーザがギャラリーボタンをタップすると、アプリはフルスクリーンのモーダルビューを表示します。ただし、サンプルでは、このモーダルビューは、アプリがモーダルに表示するビューコントローラからのものではありません。そうではなく、アプリのメインビューの上部に表示される透明な背景のビューです。背景が透明なため、基礎となるビューの一部は引き続き VoiceOver で利用できますが、VoiceOver は、それらの表示されている部分が利用できないことを認識しません。


    基になるビューが使用できないことを VoiceOver に伝え、トップビューをモーダルビューとして扱うためには、トップビューは accessibilityViewIsModal プロパティに true を返します。



    1. override var accessibilityViewIsModal: Bool {
    2. get {
    3. return true
    4. }
    6. set {}
    7. }


    グループラベル


    同じコンテキストに属する個別の要素に言及する場合、項目に関する単一の情報セットを伝えることが不可欠です。たとえば、サンプルアプリでは、NAME などのタイトルラベルと、犬の名前などの値ラベルが表示されます。これらは タイトル と 値 という 2 つの別個の要素ですが、同じコンテキストの一部です。


    これら 2 つの要素を同じアクセシビリティコンテキストに配置するには、UIAccessibilityElement を使用して各ラベルからの情報をカプセル化します。たとえば、サンプルプロジェクトの DogStatsView では、各 タイトル と 値 ラベルの組み合わせをアクセシビリティ要素にグループ化しています。また、プロジェクトは、2 つの UILabel オブジェクトからテキストを使用して accessibilityLabel を設定し、両方のラベルを含むフレームに accessibilityFrameInContainerSpace を設定します。これにより、VoiceOver は各 タイトルと値 のラベルのペアを単一のアクセシビリティ要素として認識できるようになります。次に、タイトルと値 のアクセシビリティ要素にフォーカスがあたるたびに、ユーザはタイトルと値を聞きます。


    1. var elements = [UIAccessibilityElement]()
    2. let nameElement = UIAccessibilityElement(accessibilityContainer: self)
    3. nameElement.accessibilityLabel = "\(nameTitleLabel.text!), \(nameLabel.text!)"
    5. /*
    6. This tells VoiceOver where the object should be onscreen. As the user
    7. touches around with their finger, we can determine if an element is below
    8. their finger.
    9. */
    10. nameElement.accessibilityFrameInContainerSpace = nameTitleLabel.frame.union(nameLabel.frame)
    11. elements.append(nameElement)


    カスタムアクションの追加


    サンプルアプリには、犬を収容している動物保護施設の名前も表示されます。保護施設名の横には 2 つのボタンがあります。1 つは保護施設への呼び出しを開始し、もう 1 つは保護施設の場所を表示します。VoiceOver ユーザがボタンを使用できるようにするために、アプリは UIAccessibilityCustomAction を使用して、アクションの名前と、アクションの実行時に使用するオブジェクトおよびセレクタを指定します。カスタムアクションを使用すると、VoiceOver ユーザは、VoiceOver ローターを使用してアクションにアクセスできます。


    1. shelterInfoView.accessibilityCustomActions = [
    2. UIAccessibilityCustomAction(
    3. name: "Call",
    4. target: self,
    5. selector: #selector(activateCallButton)
    6. ),
    7. UIAccessibilityCustomAction(
    8. name: "Open address in Maps",
    9. target: self,
    10. selector: #selector(activateLocationButton)
    11. )
    12. ]




    以下も見よ


    アクション


    UIAccessibilityAction

    アクセシビリティ要素が特定のアクションをサポートするために使用できる一連のメソッド。


    class UIAccessibilityCustomAction (UIAccessibilityCustomAction)

    アクセス可能なオブジェクトに対して実行すべきカスタムアクション。


    typealias UIAccessibilityCustomAction.Handler (UIAccessibilityCustomAction.Handler)

    アクションに対して実行すべきハンドラーを定義するクロージャの型。















    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ