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

ルール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