有効なアクセシビリティアクションがある
ルール 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;
}
}}
/>