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

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

TalkBackでインタラクティブな要素をアクティベートできるようにする

Not for use with personal data
note

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

WCAG 2.0 - 2.1.1 A Impact - Critical

チェック項目

インタラクティブな要素は支援技術によってアクティブ化可能であるべきです。このルールは、インタラクティブな要素に関連付けられたアクションがフォーカスされ、 強調 TalkBackまたはSwitch Accessを使用してトリガーされることを確認します。

要点

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

ユーザーへの影響

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

note

Androidのバージョン、デバイス、および製造元が問題の検出に関与する可能性があります。

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

  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を設定し importantForAccessibility により、装飾用の子要素に関する情報をTalkBackが別々にフォーカスしないようにします: 'no-hide-descendants' オプション2: フォーカスを要素自体に処理させる

<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のマテリアルウィジェット（ElevatedButton、 IconButton、その他）は、画面リーダーに対して自動的にタップアクションを公開します。カスタムのインタラクティブ要素を GestureDetectorで構築する際には、 MergeSemantics にラップして、 Semantics ウィジェットを使用し、画面リーダーが1回のフォーカスでその要素を発見し、アクティブ化できるようにします。

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のコースページ

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

その他のリソース

Is this page helpful?

Help us improve this page

Still need help?