有効なアクセシビリティアクションがある
React Nativeコンポーネントがアクセシビリティアクションを正しく定義し処理することを要求するルール
ルール ID: has-valid-accessibility-actions
アクセシビリティアクションは、支援技術がコンポーネントのアクションをプログラムによって呼び出すことを可能にします。アクセシビリティアクションをサポートするには、コンポーネントが次の二つのことを行う必要があります：
accessibilityActionsプロパティを介してサポートするアクションのリストを定義します。- アクションリクエストを処理するために
onAccessibilityAction関数を実装します。
accessibilityActionsプロパティにはアクションオブジェクトのリストが含まれている必要があります。各アクションオブジェクトには以下のフィールドが含まれている必要があります。
| 名前 | タイプ | 必須 |
|---|---|---|
name |
文字列 | はい |
label |
文字列 | いいえ |
標準アクション
nameフィールドは標準アクションの場合、以下のいずれかでなければなりません。
| 名前 | プラットフォームのサポート |
|---|---|
magicTap |
iOSのみ |
escape |
iOSのみ |
activate |
AndroidとiOS |
increment |
AndroidとiOS |
decrement |
AndroidとiOS |
longpress |
Androidのみ |
labelフィールドは標準アクションにおいてはオプションであり、支援技術によっては使用されないことが多いです。
カスタムアクション
nameおよびlabelフィールドはカスタムアクションに必須です。
<View
accessibilityActions={[
{name: 'cut', label: 'cut'}
]}
/>onAccessibilityAction
この関数の唯一の引数は、実行するアクションの名前を含むイベントです。
<View
accessible={true}
accessibilityActions={[
{name: 'cut', label: 'cut'},
{name: 'copy', label: 'copy'},
{name: 'paste', label: 'paste'},
]}
onAccessibilityAction={(event) => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
break;
case 'copy':
Alert.alert('Alert', 'copy action success');
break;
case 'paste':
Alert.alert('Alert', 'paste action success');
break;
}
}}
/>なぜそれが重要か
正しいaccessibilityActions``nameフィールドを使用するか、カスタムアクションにnameとlabelの両方があることを確認することで、支援技術ユーザーが特定のジェスチャーを使用できるようになります。特定のジェスチャーを使用できない場合、アプリ内で購入や予約などの重要なタスクを完了できない可能性があります。
問題の修正方法
標準のアクセシビリティアクションにはnameを指定し、アクションのためのonAccessibilityActionイベントハンドラを実装してください。カスタムアクセシビリティアクションを使用する場合は、labelも定義する必要があります。
成功例
<View
accessibilityActions={[
{name: 'magicTap'},
]}
onAccessibilityAction={(event) => {
switch (event.nativeEvent.actionName) {
case 'magicTap':
Alert.alert('Alert', 'magicTap action success');
break;
}
}}
/>失敗例
カスタムaccessibilityActionは正しく定義されていますが、イベントを処理するためのonAccessibilityAction関数がありません。
<View
accessibilityActions={[
{name: 'cut', label: 'cut'},
]}
/>カスタムアクションが定義され、関連するonAccessibilityAction関数がありますが、labelが設定されていません。
<View
accessibilityActions={[
{name: 'cut'},
]}
onAccessibilityAction={(event) => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
break;
}
}}
/>