アクセスできないアクション

チェック項目

インタラクティブ要素は、支援技術によってアクティブ化できるべきです。このルールは、インタラクティブ要素に関連付けられているアクションがフォーカスされ、TalkBackやSwitch Accessを使用してを設定しますトリガーできるかどうかを確認します。

失敗例 ❌

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

TalkBackは "Notifications, on." 発表します - 役割やアクティベーションのヒントは提供されていません

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

成功例 ✅

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

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

役割とアクティベーションのヒントが存在し、ユーザーはコントロールとどのようにやり取りするか正確にわかります

要点

• このルールはユーザーにとって重大な影響があります
• このルールは、支援技術がフォーカスまたはアクティベートできないインタラクティブな要素にフラグを立てます
• Accessibilityにとって重要でないとマークされた場合、インタラクティブな要素はTalkBackで利用できません
• 子要素にテキストが含まれるクリック可能な親は、支援技術から隠されているとアクセスできません

ユーザーへの影響

支援技術のユーザーが最も影響を受けます。TalkBackがインタラクティブな要素にフォーカスできてもアクティベートできない場合、ユーザーは重要なアクションを完了できない可能性があります—例えば、フォームの送信、設定のトグル、別の画面への移動などです。これは、支援技術だけに依存してアプリを操作する人々に完全な障壁を作ります。

アクセスできないアクション問題の確認

1. TalkBackまたはSwitch Accessをオンにする
2. 要素にフォーカスし、インタラクションを試みる
3. 次のいずれかが発生します:
   • アクセス不可: 要素にフォーカスできない、またはそのアクションをトリガーできない
   • アクセス可能: 要素にフォーカスされ、そのアクションをトリガーできる

問題の修正

アクセスできないアクションの問題を解決するには、インタラクティブな要素が支援技術から明示的に隠されていないことを確認します。支援技術を使用しなくてもアクセスできるビューは、使用する人にも平等に利用可能であるべきです。

XML

タップ可能なビューにimportantForAccessibilityプロパティを"no"に設定しないでください。この属性が存在する場合は、削除するか"yes"または"auto"に設定してください。

Compose

タップ可能なComposeビューをinvisibleToUser()としてマークしないでください。この修飾子を削除して、TalkBackおよびSwitch Accessで要素を利用可能にしてください。

Button(onClick = {  },
    modifier = Modifier.semantics {
        // Remove invisibleToUser() to make this element accessible
        invisibleToUser()
    }
) {
    Text("Click here")
}


FloatingActionButton(onClick = {  }) {
    Image(
        painter = painterResource(id = R.drawable.floating_button),
        contentDescription = "floating button",
        Modifier.semantics { 
            // Remove invisibleToUser() to make this element accessible
            invisibleToUser() 
        }
    )
}

React Native

この問題は、React Nativeの標準的なタッチ可能または押下可能なコントロールには稀ですが、カスタムインタラクティブ要素やインタラクティブ要素にimportantForAccessibilityを'no'または'no-hide-descendants'に明示的に設定する場合に発生する可能性があります。

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

包含ビューのimportantForAccessibilityを'yes'に設定し、適切なaccessibilityRoleとaccessibilityLabelを割り当てます。TalkBackが個別にフォーカスしないように、装飾的な子要素にimportantForAccessibilityを'no-hide-descendants'に設定してください。

<View
  importantForAccessibility='yes'
  accessibilityRole='button'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
>
  <Image 
    source={DequeLogo}
    importantForAccessibility='no-hide-descendants'
    style={{ width: 100, height: 100 }} 
  />
</View>

を設定し

直接コントロールにimportantForAccessibility='yes'とaccessibilityRoleを設定します：

<Image
  source={DequeLogo}
  importantForAccessibility='yes'
  accessibilityRole='imagebutton'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
  style={{ width: 100, height: 100 }}
/>

Flutter

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

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'),
      ),
    ),
  ),
)

このルールを無視してもよいでしょうか？

アクセス不可能なアクションはユーザーに重大な影響を引き起こし、これらの問題を修正することを強くお勧めします。これは実験的なルールであるため、結果を手動で確認する必要があります。要素がTalkBackでアクティブ化可能であることを確認した場合、発見を無視しても問題ないことがあります。ルールを無視するについて詳細を学んでください。

リソース

Deque Universityのコースページ

• 2.1.1 キーボード（A）

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

その他のリソース

• ウェブコンテンツアクセシビリティガイドライン（WCAG） 2.1, W3C推薦
  • 成功基準 2.1.1 - キーボード
• WCAG 2.1 理解文書
  • 理解 2.1.1 A - キーボード