アクセシビリティ

AndroidとiOSの両方で、VoiceOver (iOS) とTalkBack (Android) などのバンドルされたスクリーンリーダーのような支援技術とアプリを統合するためのAPIが提供されています。React Nativeには、アプリがすべてのユーザーに対応できるようにする補完的なAPIがあります。

情報

AndroidとiOSではアプローチが若干異なるため、React Nativeの実装はプラットフォームによって異なる場合があります。

アクセシビリティプロパティ

`accessible`

true の場合、スクリーンリーダーやハードウェアキーボードなどの支援技術によってビューが検出可能であることを示します。これは必ずしもVoiceOverやTalkBackによってビューがフォーカスされることを意味するわけではありません。これにはいくつかの理由があります。たとえば、VoiceOverがネストされたアクセシビリティ要素を許可しない場合や、TalkBackが代わりに親要素をフォーカスすることを選択する場合があります。

デフォルトでは、すべてのタッチ可能な要素はアクセシブルです。

Androidでは、accessible はネイティブのfocusable に変換されます。iOSでは、ネイティブのisAccessibilityElement に変換されます。

tsx
<View>
  <View accessible={true} />
  <View />
</View>

上記の例では、アクセシビリティのフォーカスは、accessible プロパティを持つ最初のサブビューのみに可能であり、accessible を持たない親または兄弟にはできません。

`accessibilityLabel`

ビューがアクセシブルとしてマークされている場合、VoiceOverまたはTalkBackを使用する人がどの要素を選択したかを知るために、ビューに accessibilityLabel を設定することをお勧めします。関連する要素が選択されると、スクリーンリーダーはこの文字列を読み上げます。

使用するには、View、Text、またはTouchableの accessibilityLabel プロパティをカスタム文字列に設定します。

tsx
<TouchableOpacity
  accessible={true}
  accessibilityLabel="Tap me!"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableOpacity>

上記の例では、TouchableOpacity 要素の accessibilityLabel はデフォルトで「押してください！」になります。ラベルは、すべてのTextノードの子をスペースで区切って連結することで構成されます。

`accessibilityLabelledBy`
Android

複雑なフォームを構築するために使用される別の要素のnativeIDへの参照です。accessibilityLabelledBy の値は、関連する要素の nativeID と一致する必要があります。

tsx
<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput
    accessibilityLabel="input"
    accessibilityLabelledBy="formLabel"
  />
</View>

上記の例では、TextInputにフォーカスすると、スクリーンリーダーは「入力、入力フィールドのラベル用の編集ボックス」とアナウンスします。

`accessibilityHint`

アクセシビリティラベルだけではアクションの結果が明確でない場合、アクセシビリティヒントを使用してユーザーに追加のコンテキストを提供できます。

View、Text、またはTouchableに accessibilityHint プロパティをカスタム文字列で指定します。

tsx
<TouchableOpacity
  accessible={true}
  accessibilityLabel="Go back"
  accessibilityHint="Navigates to the previous screen"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Back</Text>
  </View>
</TouchableOpacity>

iOS

上記の例では、ユーザーがデバイスのVoiceOver設定でヒントを有効にしている場合、VoiceOverはラベルの後にヒントを読み上げます。accessibilityHint のガイドラインについては、iOS Developer Docs で詳細を確認してください。

Android

上記の例では、TalkBackはラベルの後にヒントを読み上げます。現時点では、Androidでヒントをオフにすることはできません。

`accessibilityLanguage`
iOS

accessibilityLanguage プロパティを使用すると、スクリーンリーダーは要素の**ラベル**、**値**、**ヒント**を読み上げる際にどの言語を使用するかを理解します。提供される文字列値はBCP 47仕様に従う必要があります。

tsx
<View
  accessible={true}
  accessibilityLabel="Pizza"
  accessibilityLanguage="it-IT">
  <Text>🍕</Text>
</View>

`accessibilityIgnoresInvertColors`
iOS

画面色の反転は、色覚異常、弱視、または視覚障害を持つ人々がiOSおよびiPadOSで利用できるアクセシビリティ機能です。この設定がオンの場合に反転させたくないビュー（写真など）がある場合は、このプロパティを true に設定します。

`accessibilityLiveRegion`
Android

コンポーネントが動的に変更されると、TalkBackがエンドユーザーに警告するようにしたい場合があります。これは accessibilityLiveRegion プロパティによって可能になります。none、polite、assertive に設定できます。

none アクセシビリティサービスは、このビューへの変更をアナウンスしてはなりません。
polite アクセシビリティサービスはこのビューの変更をアナウンスすべきです。
assertive アクセシビリティサービスは進行中の音声を中断して、このビューの変更を直ちにアナウンスすべきです。

tsx
<TouchableWithoutFeedback onPress={addOne}>
  <View style={styles.embedded}>
    <Text>Click me</Text>
  </View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">
  Clicked {count} times
</Text>

上記の例の addOne メソッドは、状態変数 count を変更します。TouchableWithoutFeedbackがトリガーされると、その accessibilityLiveRegion="polite" プロパティのため、TalkBackはTextビュー内のテキストを読み上げます。

`accessibilityRole`

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にグリッドの出入りアナウンスを追加します。

`accessibilityShowsLargeContentViewer`
iOS

ユーザーが要素を長押ししたときに、大きなコンテンツビューアが表示されるかどうかを決定するブール値です。

iOS 13.0以降で利用可能です。

`accessibilityLargeContentTitle`
iOS

大きなコンテンツビューアが表示されたときに、そのタイトルとして使用される文字列です。

accessibilityShowsLargeContentViewer が true に設定されている必要があります。

tsx
<View
  accessibilityShowsLargeContentViewer={true}
  accessibilityLargeContentTitle="Home Tab">
  <Text>Home</Text>
</View>

`accessibilityState`

支援技術のユーザーにコンポーネントの現在の状態を記述します。

accessibilityState はオブジェクトです。以下のフィールドを含みます。

名前	説明	型	必須
disabled	要素が無効かどうかを示します。	ブール値	いいえ
選択済み	選択可能な要素が現在選択されているかどうかを示します。	ブール値	いいえ
チェック済み	チェック可能な要素の状態を示します。このフィールドは、混合チェックボックスを表すためにブール値または「mixed」文字列のいずれかを取ることができます。	ブール値または「mixed」	いいえ
ビジー	要素が現在ビジー状態であるかどうかを示します。	ブール値	いいえ
展開済み	展開可能な要素が現在展開されているか折りたたまれているかを示します。	ブール値	いいえ

使用するには、accessibilityState を特定の定義を持つオブジェクトに設定します。

`accessibilityValue`

コンポーネントの現在の値を表します。これはコンポーネントの値のテキスト説明である場合もあれば、スライダーやプログレスバーのような範囲ベースのコンポーネントの場合は範囲情報（最小値、現在値、最大値）を含みます。

accessibilityValue はオブジェクトです。以下のフィールドを含みます。

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

`accessibilityViewIsModal`
iOS

VoiceOverがレシーバーの兄弟であるビュー内の要素を無視するかどうかを示すブール値です。

たとえば、兄弟ビュー A と B を含むウィンドウで、ビュー B に accessibilityViewIsModal を true に設定すると、VoiceOverはビュー A 内の要素を無視します。一方、ビュー B が子ビュー C を含み、ビュー C に accessibilityViewIsModal を true に設定しても、VoiceOverはビュー A 内の要素を無視しません。

`accessibilityElementsHidden`
iOS

このアクセシビリティ要素内に含まれるアクセシビリティ要素が隠されているかどうかを示すブール値です。

たとえば、兄弟ビュー A と B を含むウィンドウで、ビュー B に accessibilityElementsHidden を true に設定すると、VoiceOverはビュー B 内の要素を無視します。これは、Androidプロパティ importantForAccessibility="no-hide-descendants" に似ています。

`aria-valuemax`

スライダーやプログレスバーなど、範囲ベースのコンポーネントの最大値を表します。

`aria-valuemin`

スライダーやプログレスバーなど、範囲ベースのコンポーネントの最小値を表します。

`aria-valuenow`

スライダーやプログレスバーなど、範囲ベースのコンポーネントの現在の値を表します。

`aria-valuetext`

コンポーネントのテキストによる説明を表します。

`aria-busy`

要素が変更中であり、支援技術がユーザーに更新を通知する前に変更が完了するのを待つ可能性があることを示します。

型	デフォルト
ブール値	false

`aria-checked`

チェック可能な要素の状態を示します。このフィールドは、混合チェックボックスを表すためにブール値または「mixed」文字列のいずれかを取ることができます。

型	デフォルト
ブール値、'mixed'	false

`aria-disabled`

要素が知覚可能であるが無効であり、編集またはその他の操作ができないことを示します。

型	デフォルト
ブール値	false

`aria-expanded`

展開可能な要素が現在展開されているか折りたたまれているかを示します。

型	デフォルト
ブール値	false

`aria-hidden`

このアクセシビリティ要素内に含まれるアクセシビリティ要素が非表示であるかどうかを示します。

たとえば、兄弟ビュー A と B を含むウィンドウで、ビュー B に aria-hidden を true に設定すると、VoiceOverはビュー B 内の要素を無視します。

型	デフォルト
ブール値	false

`aria-label`

インタラクティブな要素にラベルを付ける文字列値を定義します。

型
文字列

`aria-labelledby`
Android

適用されている要素をラベル付けする要素を識別します。aria-labelledby の値は、関連する要素のnativeID と一致する必要があります。

tsx
<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput aria-label="input" aria-labelledby="formLabel" />
</View>

型
文字列

`aria-live`
Android

要素が更新されることを示し、ライブ領域からユーザーエージェント、支援技術、およびユーザーが期待できる更新の種類を記述します。

off アクセシビリティサービスはこのビューの変更をアナウンスすべきではありません。
polite アクセシビリティサービスはこのビューの変更をアナウンスすべきです。
assertive アクセシビリティサービスは進行中の音声を中断して、このビューの変更を直ちにアナウンスすべきです。

型	デフォルト
enum(`'assertive'`, `'off'`, `'polite'`)	`'off'`

`aria-modal`
iOS

VoiceOverがレシーバーの兄弟であるビュー内の要素を無視するかどうかを示すブール値です。

型	デフォルト
ブール値	false

`aria-selected`

選択可能な要素が現在選択されているかどうかを示します。

型
ブール値

`importantForAccessibility`
Android

同じ親を持つ2つの重なり合うUIコンポーネントの場合、デフォルトのアクセシビリティフォーカスは予測できない動作をする可能性があります。importantForAccessibility プロパティは、ビューがアクセシビリティイベントを発火するかどうか、およびアクセシビリティサービスに報告されるかどうかを制御することでこれを解決します。auto、yes、no、および no-hide-descendants (最後の値はアクセシビリティサービスにコンポーネントとそのすべての子を無視させます) に設定できます。

tsx
<View style={styles.container}>
  <View
    style={[styles.layout, {backgroundColor: 'green'}]}
    importantForAccessibility="yes">
    <Text>First layout</Text>
  </View>
  <View
    style={[styles.layout, {backgroundColor: 'yellow'}]}
    importantForAccessibility="no-hide-descendants">
    <Text>Second layout</Text>
  </View>
</View>

上記の例では、yellow レイアウトとその子孫はTalkBackやその他のすべてのアクセシビリティサービスから完全に非表示になります。したがって、TalkBackを混乱させることなく、同じ親を持つ重なり合うビューを使用できます。

`onAccessibilityEscape`
iOS

このプロパティにカスタム関数を割り当てます。この関数は、誰かが「エスケープ」ジェスチャ（2本指のZ字型ジェスチャ）を実行したときに呼び出されます。エスケープ関数は、ユーザーインターフェイスで階層的に戻る必要があります。これは、ナビゲーション階層で上に移動したり、モーダルユーザーインターフェイスを閉じたりすることを意味します。選択された要素に onAccessibilityEscape 関数がない場合、システムは、それを見つけるか、見つけられないことを示すまで、ビュー階層を上にたどろうとします。

`onAccessibilityTap`
iOS

このプロパティを使用して、アクセシブルな要素が選択されているときにダブルタップしてアクティブにしたときに呼び出されるカスタム関数を割り当てます。

`onMagicTap`
iOS

このプロパティにカスタム関数を割り当てます。この関数は、誰かが「マジックタップ」ジェスチャ（2本指でのダブルタップ）を実行したときに呼び出されます。マジックタップ関数は、ユーザーがコンポーネントに対して行うことができる最も関連性の高いアクションを実行する必要があります。iPhoneの電話アプリでは、マジックタップは電話に応答したり、現在の電話を切ったりします。選択された要素に onMagicTap 関数がない場合、システムは、それを見つけるまでビュー階層を上にたどります。

`role`

role はコンポーネントの目的を伝え、accessibilityRole プロパティよりも優先されます。

role は以下のいずれかになります。

alert 要素にユーザーに提示する重要なテキストが含まれている場合に使用します。
button 要素がボタンとして扱われるべき場合に使用します。
checkbox 要素が、チェック済み、未チェック、または混合チェック状態を持つことができるチェックボックスを表す場合に使用します。
combobox 要素が、ユーザーがいくつかの選択肢の中から選択できるコンボボックスを表す場合に使用します。
grid ScrollView、VirtualizedList、FlatList、または SectionListと組み合わせてグリッドを表します。AndroidのGridViewにグリッドの出入りアナウンスを追加します。
heading 要素がコンテンツセクションのヘッダーとして機能する場合（例：ナビゲーションバーのタイトル）に使用します。
img 要素が画像として扱われるべき場合に使用します。例えば、ボタンやリンクと組み合わせることができます。
link 要素がリンクとして扱われるべき場合に使用します。
list 項目のリストを識別するために使用します。
listitem リスト内の項目を識別するために使用します。
menu コンポーネントが選択肢のメニューである場合に使用します。
menubar コンポーネントが複数のメニューのコンテナである場合に使用します。
menuitem メニュー内の項目を表すために使用します。
none 要素にロールがない場合に使用します。
presentation 要素にロールがない場合に使用します。
progressbar タスクの進捗状況を示すコンポーネントを表すために使用します。
radio ラジオボタンを表すために使用します。
radiogroup ラジオボタンのグループを表すために使用します。
scrollbar スクロールバーを表すために使用します。
searchbox テキストフィールド要素が検索フィールドとしても扱われるべき場合に使用します。
slider 要素が「調整」できる場合（例：スライダー）に使用します。
spinbutton 選択肢のリストを開くボタンを表すために使用します。
summary アプリが最初に起動したときに、アプリの現在の状態の簡単な概要を提供するために要素を使用できる場合に使用します。
switch オンとオフを切り替えられるスイッチを表すために使用します。
tab タブを表すために使用します。
tablist タブのリストを表すために使用します。
timer タイマーを表すために使用します。
toolbar ツールバー（アクションボタンまたはコンポーネントのコンテナ）を表すために使用します。

アクセシビリティアクション

アクセシビリティアクションにより、支援技術はプログラムによってコンポーネントのアクションを呼び出すことができます。アクセシビリティアクションをサポートするには、コンポーネントは2つのことを行う必要があります。

accessibilityActions プロパティを通じてサポートするアクションのリストを定義します。
アクションリクエストを処理するための onAccessibilityAction 関数を実装します。

accessibilityActions プロパティには、アクションオブジェクトのリストが含まれている必要があります。各アクションオブジェクトには、以下のフィールドが含まれている必要があります。

名前	型	必須
name	文字列	はい
label	文字列	いいえ

アクションは、ボタンのクリックやスライダーの調整などの標準的なアクション、または電子メールメッセージの削除などの特定のコンポーネントに固有のカスタムアクションのいずれかを表します。name フィールドは標準アクションとカスタムアクションの両方に必須ですが、label は標準アクションにはオプションです。

標準アクションのサポートを追加する場合、name は以下のいずれかである必要があります。

'magicTap' - iOSのみ - VoiceOverのフォーカスがコンポーネント上または内部にある間に、ユーザーが2本指でダブルタップした。
'escape' - iOSのみ - VoiceOverのフォーカスがコンポーネント上または内部にある間に、ユーザーが2本指でスクラブジェスチャー（左、右、左）を実行した。
'activate' - コンポーネントをアクティブ化します。これは、支援技術の有無にかかわらず、同じアクションを実行する必要があります。スクリーンリーダーユーザーがコンポーネントをダブルタップすると起動します。
'increment' - 調整可能なコンポーネントをインクリメントします。iOSでは、コンポーネントのロールが 'adjustable' で、ユーザーがそれにフォーカスを当てて上方向にスワイプすると、VoiceOverはこのアクションを生成します。Androidでは、ユーザーがコンポーネントにアクセシビリティフォーカスを当てて音量アップボタンを押すと、TalkBackはこのアクションを生成します。
'decrement' - 調整可能なコンポーネントをデクリメントします。iOSでは、コンポーネントのロールが 'adjustable' で、ユーザーがそれにフォーカスを当てて下方向にスワイプすると、VoiceOverはこのアクションを生成します。Androidでは、ユーザーがコンポーネントにアクセシビリティフォーカスを当てて音量ダウンボタンを押すと、TalkBackはこのアクションを生成します。
'longpress' - Androidのみ - このアクションは、ユーザーがコンポーネントにアクセシビリティフォーカスを当て、画面をダブルタップして指を1本保持したときに生成されます。これは、支援技術の有無にかかわらず、同じアクションを実行する必要があります。
'expand' - Androidのみ - このアクションはコンポーネントを「展開」し、TalkBackが「展開済み」ヒントをアナウンスするようにします。
'collapse' - Androidのみ - このアクションはコンポーネントを「折りたたみ」し、TalkBackが「折りたたみ済み」ヒントをアナウンスするようにします。

label フィールドは標準アクションにはオプションであり、支援技術によって使用されないことがよくあります。カスタムアクションの場合、ユーザーに提示されるアクションの説明を含むローカライズされた文字列です。

アクションリクエストを処理するには、コンポーネントは onAccessibilityAction 関数を実装する必要があります。この関数の唯一の引数は、実行するアクションの名前を含むイベントです。以下のRNTesterの例は、いくつかのカスタムアクションを定義および処理するコンポーネントを作成する方法を示しています。

tsx
<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;
    }
  }}
/>

AccessibilityInfo APIを使用すると、スクリーンリーダーが現在アクティブであるかどうかを判断できます。詳細については、AccessibilityInfoドキュメントを参照してください。

アクセシビリティイベントの送信
Android

UIコンポーネントでアクセシビリティイベントをトリガーすることが便利な場合があります（例：カスタムビューが画面に表示されたとき、またはビューにアクセシビリティフォーカスを設定したとき）。ネイティブのUIManagerモジュールは、この目的のために「sendAccessibilityEvent」メソッドを公開しています。これは、ビュータグとイベントタイプの2つの引数を受け取ります。サポートされているイベントタイプは typeWindowStateChanged、typeViewFocused、および typeViewClicked です。

tsx
import {Platform, UIManager, findNodeHandle} from 'react-native';

if (Platform.OS === 'android') {
  UIManager.sendAccessibilityEvent(
    findNodeHandle(this),
    UIManager.AccessibilityEventTypes.typeViewFocused,
  );
}

TalkBackサポートのテスト
Android

TalkBackを有効にするには、Androidデバイスまたはエミュレーターの[設定]アプリに移動します。 [ユーザー補助]をタップし、[TalkBack]をタップします。 [サービスを使用]スイッチを切り替えて、有効または無効にします。

Androidエミュレーターには、デフォルトでTalkBackがインストールされていません。Google Playストア経由でエミュレーターにTalkBackをインストールできます。Google Playストアがインストールされているエミュレーターを選択してください。これらはAndroid Studioで利用できます。

音量キーショートカットを使用してTalkBackを切り替えることができます。音量キーショートカットをオンにするには、設定アプリに移動し、[ユーザー補助]に移動します。上部で、音量キーショートカットをオンにします。

音量キーショートカットを使用するには、両方の音量キーを3秒間押して、ユーザー補助ツールを起動します。

さらに、必要に応じて、コマンドラインからTalkBackを切り替えることができます。

シェル
# disable
adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService

# enable
adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService

VoiceOverのサポートのテスト
iOS

iOSまたはiPadOSデバイスでVoiceOverを有効にするには、設定アプリに移動し、一般をタップし、次にアクセシビリティをタップします。そこには、VoiceOverを含め、人々がデバイスをより使いやすくするための多くのツールがあります。VoiceOverを有効にするには、「視覚」の下にあるVoiceOverをタップし、上部に表示されるスイッチを切り替えます。

アクセシビリティ設定の一番下には、「アクセシビリティショートカット」があります。これを使用して、ホームボタンをトリプルクリックすることでVoiceOverを切り替えることができます。

VoiceOverはシミュレーターでは利用できませんが、Xcodeのアクセシビリティインスペクターを使用して、macOSのVoiceOverをアプリケーション経由で使用できます。ただし、macOSのVoiceOverでは異なるエクスペリエンスになる可能性があるため、常にデバイスでテストすることをお勧めします。

その他のリソース

React Nativeアプリをアクセシブルにする

アクセシビリティプロパティ​

accessible​

accessibilityLabel​

accessibilityLabelledBy Android​

accessibilityHint​

accessibilityLanguage iOS​

accessibilityIgnoresInvertColors iOS​

accessibilityLiveRegion Android​

accessibilityRole​

accessibilityShowsLargeContentViewer iOS​

accessibilityLargeContentTitle iOS​

accessibilityState​

accessibilityValue​

accessibilityViewIsModal iOS​

accessibilityElementsHidden iOS​

aria-valuemax​

aria-valuemin​

aria-valuenow​

aria-valuetext​

aria-busy​

aria-checked​

aria-disabled​

aria-expanded​

aria-hidden​

aria-label​

aria-labelledby Android​

aria-live Android​

aria-modal iOS​

aria-selected​

importantForAccessibility Android​

onAccessibilityEscape iOS​

onAccessibilityTap iOS​

onMagicTap iOS​

role​

アクセシビリティアクション​

スクリーンリーダーが有効になっているかどうかの確認​

アクセシビリティイベントの送信Android​

TalkBackサポートのテストAndroid​

VoiceOverのサポートのテストiOS​

その他のリソース​