有効なアクセシビリティ値を持つ

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

React Native コンポーネントが有効な accessibilityValue プロパティを使用することを要求するルール

Free Trial
Not for use with personal data

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

WCAG 2.0 (A) 4.1.2

コンポーネントの現在の値を表します。これはコンポーネントの値のテキストによる説明であったり、スライダーやプログレスバーのような範囲ベースのコンポーネントの最小値、現在値、最大値などの範囲情報が含まれていることもあります。

accessibilityValueはオブジェクトです。その中には以下のフィールドがあります。

名前 説明 タイプ 必須
min このコンポーネントの範囲の最小値。 整数 now が設定されている場合は必須です。
max このコンポーネントの範囲の最大値。 整数 now が設定されている場合は必須です。
now このコンポーネントの範囲の現在値。 整数 いいえ
text このコンポーネントの値に関するテキストの説明。設定されている場合、minnowmaxを上書きします。 文字列 いいえ

なぜ重要なのか

accessibilityValue フィールドは正しく綴られ、意図されたアクセシビリティ値を説明するのに適した値に対応しなければなりません。許可されている値に従わないと、支援技術ユーザーが利用できないコンポーネントになります。

問題を修正する方法

accessibilityValue プロパティが、有効な名前と型の値を持つフィールドが設定されているオブジェクトであることを確認してください。

成功例

<TouchableOpacity accessibilityValue={{ min: 0, now: 40, max: 70 }} />
<TouchableOpacity accessibilityValue={{ text: "stuff" }} />

失敗例

<TouchableOpacity accessibilityValue={{ min: 0, now: 50, max: 100, text: "stuff" }} />
<TouchableOpacity accessibilityValue={{ now: 50 }} />
<TouchableOpacity accessibilityValue="stuff" />
<TouchableOpacity accessibilityValue={{ min: "0", now: "50", max: "100" }} />
<TouchableOpacity accessibilityValue={{ text: 0 }} />

リソース