アクセス不可能なアクション

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

インタラクティブ要素がVoiceOverで操作可能であることを確認する

Not for use with personal data

note

これは実験的なルールであるため、その結果はベータテスト中と見なされます。詳細については実験的なルールをご覧いただき、改善にご協力ください。

チェック内容

対話型要素は支援技術によって活性化できるようにする必要があります。このルールは、対話型要素に関連付けられたアクションがVoiceOverを使用してフォーカスされ、に設定し、トリガーされることを確認します。

失敗例 ❌

An iOS Settings screen with a Notifications toggle focused by VoiceOver (red border). VoiceOver announces 'Notifications, on.' with no activation hint, indicating the action cannot be triggered.

VoiceOverは focus 「通知」トグルを cannot activate it

VoiceOverは "Notifications, on." をアナウンスしますが、役割やアクティベーションのヒントが提供されていません

ダブルタップしても何も起こらず、ユーザーが設定を切り替える方法がありません

成功例 ✅

An iOS Settings screen with a Notifications toggle focused by VoiceOver (green border). VoiceOver announces 'Notifications, switch button, on. Double-tap to activate.' indicating the action is accessible.

VoiceOverは focus and activate 「通知」トグルを

VoiceOverは "Notifications, switch button, on. Double-tap to activate."

役割とアクティベーションのヒントが存在し、ユーザーは正確にコントロールに対処する方法を知っています

概要

このルールはユーザーに重大な影響を与えます
このルールは、VoiceOverがフォーカスできないか、アクティブにできないインタラクティブ要素を指摘します
これは、要素自体がフォーカス可能でない場合や、フォーカス可能な親要素内にない場合に発生します
フォーカス可能な親要素内にあるインタラクティブ要素は、アクションやジェスチャーレコグナイザー、またはアクティベーションポイントが検出されない場合、アクセス不可能です

ユーザーへの影響

支援技術ユーザーが最も影響を受けます。VoiceOverがインタラクティブ要素にフォーカスできるが、アクティブにできない場合、ユーザーはフォームの送信、設定の切り替え、または別の画面へのナビゲートなどの重要なアクションを完了できない可能性があります。これは、アプリとのやり取りにVoiceOverのみに依存する人々に対して完全な障壁を作ります。

アクセス不可能なアクションの問題を確認する

VoiceOverをオンにする
要素にフォーカスする
次のうちいずれかが起こります：
- アクセス不可能：ユーザーはVoiceOverを使って要素をアクティブにすることができません
- アクセス可能：ユーザーはVoiceOverを使って要素をアクティブにすることができます

問題の修正

アクセス不可能なアクションの問題が発生するシナリオは様々です。修正は要素の構造に依存します。以下のアプローチを確認し、レイアウトに対応するものを使用してください。

UIKit

要素の構造に応じて、いくつかのアプローチがあります。

Storyboardでの修正 — アクティブなコントロールがアクセシビリティ要素であることを確認してください：

InaccessibleActionの問題を持つ要素を選択してください。
Identity Inspectorを選択します。
別の選択肢として、要素のアクセシビリティパスを変更することができます：を選択してください。
コード上で、アクセシビリティパスにラベルとアクティブコントロールの両方を含めるよう更新します（下記のコード上でのアクセシビリティパスの修正を参照）。の下で、「有効」のチェックボックスがアクティブなコントロール用に選択されていることを確認してください。

問題のある要素を選択します。

Inspectorsパネルが表示されていることを確認します。
アクティブなコントロールを選択します。
Size Inspectorを選択します。

アクティブなコントロールが含む要素内で水平および垂直に中心に配置されていることを確認します。

InaccessibleActionの問題を持つ要素を選択してください。
Identity Inspectorを選択します。
アクティブなコントロールを選択してください。
サイズインスペクターを選択してください。
アクティブなコントロールが含む要素内で水平および垂直にセンタリングされていることを確認してください。

コードで修正：

アクティブなコントロールのisAccessibilityElementがtrueに設定されていることを確認してください：

buttonContainerView.isAccessibilityElement = true

含まれるビューにタップジェスチャーレコグナイザーを追加します：

buttonContainerView.addGestureRecognizer(UITapGestureRecognizer(target: self, selector: #selector(buttonTapped)))

VoiceOverのaccessibilityActivationPointがアクションをトリガーするように、アクティブなコントロールを親ビュー内でセンタリングしてください：

buttonContainerView.button.centerXAnchor.constraint(equalTo: buttonContainerView.centerXAnchor).isActive = true
buttonContainerView.button.centerYAnchor.constraint(equalTo: buttonContainerView.centerYAnchor).isActive = true

アクセシビリティパスを更新して、ラベルとアクティブコントロールの両方を含めます。

ラベルと親要素にisAccessibilityElement=falseを設定し、この場合のtoggleであるコントロール自体だけがアクセシビリティ要素になるようにしてください。

// 1. Only the toggle should be an accessibility element
toggleContainerView.toggle.isAccessibilityElement = true
toggleContainerView.label.isAccessibilityElement = false
toggleContainerView.isAccessibilityElement = false

// 2. Expand the toggle's accessibilityPath to encompass the full container
// so VoiceOver's focus ring covers both the label and the toggle
let containerFrame = toggleContainerView.superview!.convert(toggleContainerView.frame, to: toggleContainerView.superview)
toggleContainerView.toggle.accessibilityPath = UIBezierPath(rect: containerFrame)

SwiftUI

この問題は、ほとんどの標準的なSwiftUIの要素やコントロールでは発生しませんが、カスタムコントロールや要素が誤ってグループ化された場合に発生する可能性があります。

ステッパー、スライダー、またはトグルの動作を模倣するカスタムコントロールを構築する際は、.accessibilityRepresentationを使用して、標準のカウンターパートと同じアクセシビリティ動作をカスタムコントロールに付与してください：

// Add .accessibilityRepresentation on a custom Toggle view
HStack {
    Text("Dark mode is \(getDarkModeStatus().localized)")
    Image(systemName: getDarkModeImage())
}.onTapGesture {
    isOn.toggle()
}
.accessibilityRepresentation {
    Toggle(isOn: $isOn, label: {
        Text("Dark mode is \(getDarkModeStatus().localized)")
    })
}

ビューを一緒にグループ化する際は、.accessibilityElement(children: .combine)または.accessibilityElement(children: .contain)を使用して、子コントロールのすべてのアクションが引き続きアクセス可能であることを確認してください：

VStack(alignment: .leading) {
    Text("Adjust settings below")
        .accessibilityElement(children: .ignore)
    Divider()
    Toggle(isOn: $isOn) {
        Text("Dark Mode is \(toggleStateText())")
    }
    .accessibility(value: Text("Dark Mode is \(toggleStateText())"))
}
.accessibilityElement(children: .combine)
.accessibilityLabel(Text("Adjust settings below"))

含むビューにステッパーやスライダーのような調整可能なコントロールがある場合は、.accessibilityAdjustableActionを使用して最良のアクセシビリティ体験を提供してください：

VStack {
    Text("Adjust the stepper below to update dog petting data".localized)
    Divider()
    HStack {
        Stepper(value: $value) {
            Text("Total dogs pet today \($value.wrappedValue)")
        }.accessibilityElement(children: .ignore)
    }
}
.accessibilityElement(children: .combine)
.accessibilityValue(Text("\($value.wrappedValue)"))
.accessibilityAdjustableAction({ direction in
    switch direction {
    case .increment:
        value += 1
    case .decrement:
        value -= 1
    @unknown default:
        print("unknown direction used")
    }
})

React Native

この問題は、React Nativeの標準的なタッチ可能または押下可能コントロールでは稀ですが、カスタムコントロールで発生する可能性があります。

オプション1: 親ビューにフォーカスを処理させる

含むビューのaccessibleプロパティをtrueに、accessibilityElementsHiddenをfalseに設定し、適切なaccessibilityRoleを割り当ててください：

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
>
  <Image 
    source={DequeLogo}
    style={{ width: 100, height: 100 }} 
  />
</View>

オプション2: 要素自体にフォーカスを処理させる

コントロールに直接accessible、accessibilityElementsHidden、およびaccessibilityRoleを設定してください：

<Image
  source={DequeLogo}
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
  style={{ width: 100, height: 100 }}
/>

Flutter

FlutterのMaterialウィジェット（ElevatedButton、IconButtonなど）は、タップアクションをスクリーンリーダーに自動的に公開します。GestureDetectorでカスタムインタラクティブ要素を構築する場合は、MergeSemanticsとSemanticsウィジェットを組み合わせて包装し、スクリーンリーダーが単一のフォーカスストップで要素を発見し、活性化できるようにしてください。

MergeSemantics(
  child: Semantics(
    button: true,
    label: 'Archive item',
    child: GestureDetector(
      onTap: () {},
      child: Container(
        padding: const EdgeInsets.all(12.0),
        color: Colors.green.shade100,
        child: const Text('Archive item'),
      ),
    ),
  ),
)

このルールを無視してもいいですか？

アクセス不可能なアクションはユーザーにクリティカルインパクトを与え、これらの問題を修正することを強く推奨します。これは実験的なルールであるため、結果を手動で確認する必要があります。要素がVoiceOverによって活性化可能であることを確認した場合、発見を無視することが許容されるかもしれません。ルールを無視することについて詳しく学ぶの詳細をご覧ください。

リソース

Deque University コースページ

2.1.1 キーボード (A)

注：Deque Universityのリソースへの完全なアクセスには、サブスクリプションが必要です。

その他のリソース

ウェブコンテンツアクセシビリティガイドライン (WCAG) 2.1、W3C勧告
- 成功基準 2.1.1 - キーボード
WCAG 2.1 理解文書
- 理解 2.1.1 A - キーボード