有効なアクセシビリティロール

ルールID: has-valid-accessibility-role

WCAG 2.0 (A) 4.1.2

accessibilityRole コンポーネントの目的を支援技術のユーザーに伝えます。

accessibilityRole 以下のいずれかになります：

• adjustable 要素が「調整可能」である場合に使用します（例: スライダー）。
• alert 要素にユーザーに提示する重要なテキストが含まれている場合に使用します。
• button 要素をボタンとして扱う必要がある場合に使用します。
• checkbox 要素がチェックボックスを表し、チェック、未チェック、または混在したチェック状態が可能な場合に使用します。
• combobox 要素がコンボボックスを表し、ユーザーが複数の選択肢から選べる場合に使用します。
• header 要素がコンテンツセクションのヘッダー（例: ナビゲーションバーのタイトル）として機能する場合に使用します。
• image 要素を画像として扱う必要がある場合に使用します。ボタンやリンクと組み合わせて使用可能です。
• imagebutton 要素がボタンで、かつ画像である場合に使用します。
• keyboardkey 要素がキーボードキーとして機能する場合に使用します。
• link 要素をリンクとして扱う必要がある場合に使用します。
• menu コンポーネントが選択肢のメニューである場合に使用します。
• menubar コンポーネントが複数のメニューのコンテナである場合に使用します。
• menuitem メニュー内の項目を表すために使用します。
• none 要素にロールがない場合に使用します。
• progressbar タスクの進行状況を示すコンポーネントを表すために使用します。
• radio ラジオボタンを表すために使用します。
• radiogroup 複数のラジオボタンのグループを表すために使用します。
• scrollbar スクロールバーを表すために使用します。
• search テキストフィールドの要素を検索フィールドとしても扱う必要がある場合に使用します。
• spinbutton 選択肢のリストを開くボタンを表すために使用します。
• summary アプリが初めて起動した際に現在の状況の簡単な要約を提供するために使用される場合に使用します。
• switch オンとオフを切り替えできるスイッチを表すために使用します。
• tab タブを表すために使用されます。
• tablist タブのリストを表すために使用されます。
• text 要素が変更できない静的テキストとして扱われるべきときに使用されます。
• timer タイマーを表すために使用されます。
• togglebutton トグルボタンを表すために使用されます。ボタンがオンかオフかを示すために、accessibilityState checkedと共に使用する必要があります。
• toolbar ツールバー（操作ボタンやコンポーネントのコンテナ）を表すために使用されます。
• grid ScrollView、VirtualizedList、FlatList、またはSectionListと共に使用され、グリッドを表します。AndroidのGridViewにグリッドの出入りをアナウンスします。

なぜ重要か

無効な役割値が割り当てられた要素は、支援技術によって開発者が意図したとおりに解釈されません。

スクリーンリーダーや他の支援技術が各要素の役割を把握していないと、それに対して知的に対話することができず、役割をユーザーに伝えることもできません。役割値が無効な場合、要素の機能、プロパティ、情報をユーザーに伝えるまたはユーザーから受け取る方法は支援技術を通じて伝達できません。

問題の修正方法

値が有効な役割であることを確認してください。 accessibilityRole

通過例

<TouchableOpacity accessibilityRole="button">
  <Text>Increase Count</Text>
</TouchableOpacity>

失敗例

<TouchableOpacity accessibilityRole="secondary-button">
  <Text>Increase Count</Text>
</TouchableOpacity>

リソース

• React Native accessibilityRole