アクセシビリティ API 更新
動機
テクノロジーの進歩とモバイルアプリの日常生活における重要性の増大に伴い、アクセシブルなアプリケーションを作成する必要性も同様に高まっています。
React Native のアクセシビリティ API の制限は、常に開発者にとって大きな問題点でした。そこで、アクセシビリティ API をいくつか更新し、インクルーシブなモバイルアプリケーションの作成を容易にしました。
既存 API の問題点
問題 1：全く異なるのに類似したプロパティ - accessibilityComponentType (Android) と accessibilityTraits (iOS)
accessibilityComponentType と accessibilityTraits は、Android の TalkBack と iOS の VoiceOver に対して、ユーザーが操作している UI 要素の種類を伝えるために使用される 2 つのプロパティです。これらのプロパティに関する 2 つの大きな問題は、
- 目的は同じなのに、使用方法が異なる 2 つの異なるプロパティであること。以前の API では、これらは 2 つの別々のプロパティ（プラットフォームごとに 1 つ）であり、不便であるだけでなく、多くの開発者にとって混乱を招いていました。iOS の
accessibilityTraitsは 17 個の異なる値を許容するのに対し、Android のaccessibilityComponentTypeは 4 個の値しか許容しません。さらに、ほとんどの場合、値に重複はありませんでした。これらの 2 つのプロパティの入力タイプでさえ異なっています。accessibilityTraitsは、複数の特性の配列または単一の特性を渡すことができますが、accessibilityComponentTypeは単一の値しか許容しません。 - Android の機能が非常に限定されていること。古いプロパティでは、TalkBack が認識できる UI 要素は「button」、「radiobutton_checked」、および「radiobutton_unchecked」のみでした。
問題 2：アクセシビリティヒントが存在しないこと
アクセシビリティヒントは、TalkBack または VoiceOver を使用しているユーザーが、アクセシビリティラベルだけでは明らかではないアクセシビリティ要素に対してアクションを実行したときに何が起こるかを理解するのに役立ちます。これらのヒントは設定パネルでオンオフを切り替えることができます。以前は、React Native の API はアクセシビリティヒントを全くサポートしていませんでした。
問題 3：反転カラーが無視されること
視覚障害のある一部のユーザーは、画面のコントラストを高めるために、モバイルフォンで反転カラーを使用しています。Apple は、開発者が特定のビューを無視できるようにする iOS 用の API を提供しています。これにより、ユーザーが反転カラーの設定を有効にしている場合でも、画像や動画が歪むことはありません。この API は現在、React Native ではサポートされていません。
新しい API の設計
解決策 1：accessibilityComponentType (Android) と accessibilityTraits (iOS) の統合
accessibilityComponentType と accessibilityTraits の間の混乱を解決するために、これらを単一のプロパティにマージすることにしました。これは、技術的に同じ機能を意図していたため意味があり、マージすることで、開発者はアクセシビリティ機能を構築する際にプラットフォーム固有の複雑さを心配する必要がなくなりました。
背景
iOS では、UIAccessibilityTraits は、任意の NSObject に設定できるプロパティです。JavaScript プロパティからネイティブに渡される 17 個の特性のそれぞれは、Objective-C の UIAccessibilityTraits 要素にマップされます。特性はそれぞれ long int で表され、設定されているすべての特性は OR されます。
一方、Android では、AccessibilityComponentType は React Native によって作成された概念であり、Android のプロパティに直接マップされるわけではありません。アクセシビリティはアクセシビリティデリゲートによって処理されます。各ビューにはデフォルトのアクセシビリティデリゲートがあります。アクセシビリティアクションをカスタマイズする場合は、新しいアクセシビリティデリゲートを作成し、カスタマイズする特定のメソッドをオーバーライドしてから、処理しているビューのアクセシビリティデリゲートを新しいデリゲートに関連付ける必要があります。開発者が AccessibilityComponentType を設定すると、ネイティブコードは渡されたコンポーネントに基づいて新しいデリゲートを作成し、そのビューにそのアクセシビリティデリゲートを設定しました。
行われた変更
新しいプロパティについては、2 つのプロパティのスーパーセットを作成することを目指しました。accessibilityTraits には値がはるかに多いため、新しいプロパティは既存のプロパティ accessibilityTraits をほぼモデルにすると決めました。これらの特性に関する Android の機能は、アクセシビリティデリゲートを変更することでポリフィルされます。
iOS の accessibilityTraits に設定できる UIAccessibilityTraits の値は 17 個ありますが、新しいプロパティにはそれらのすべてを可能な値として含めませんでした。これは、これらの特性の設定の効果があまりよく知られておらず、これらの値の多くは事実上使用されないためです。
UIAccessibilityTraits に設定された値は、一般的に 2 つの目的のいずれかを取っていました。UI 要素が持つ役割を記述するか、UI 要素の状態を記述するかです。観察された以前のプロパティのほとんどの使用例では、役割を表す 1 つの値が使用され、「state selected」、「state disabled」、またはその両方が組み合わされていました。そのため、2 つの新しいアクセシビリティプロパティ accessibilityRole と accessibilityState を作成することにしました。
accessibilityRole
新しいプロパティ accessibilityRole は、TalkBack または VoiceOver に UI 要素の役割を伝えるために使用されます。この新しいプロパティは、次のいずれかの値を取ることができます。
nonebuttonlinksearchimagekeyboardkeytextadjustableheadersummaryimagebutton
このプロパティは、UI 要素は一般的にこれら以上の役割を論理的に持つことがないため、1 つの値しか受け入れません。例外は image と button なので、両方の組み合わせである imagebutton という役割を追加しました。
accessibilityStates
新しいプロパティ `accessibilityStates` は、TalkBack または VoiceOver に UI 要素の状態を伝えるために使用されます。このプロパティは、以下の値のいずれか、または両方を含む配列を取ります。
selected（選択済み）disabled（無効）
解決策2：アクセシビリティヒントの追加
これのために、新しいプロパティ `accessibilityHint` を追加しました。このプロパティを設定すると、TalkBack または VoiceOver がユーザーにヒントを読み上げることができます。
accessibilityHint
このプロパティは、読み上げるアクセシビリティヒントを文字列として受け取ります。
iOSでは、このプロパティを設定すると、ビューの対応するネイティブプロパティ `AccessibilityHint` が設定されます。iPhoneでアクセシビリティヒントが有効になっている場合、ヒントはVoiceOverによって読み上げられます。
Androidでは、このプロパティを設定すると、ヒントの値がアクセシビリティラベルの最後に追加されます。この実装のメリットは、iOSのヒントの動作を模倣することですが、デメリットは、iOSのようにAndroidの設定でこれらのヒントを無効にできないことです。
Androidでこの決定をした理由は、通常、アクセシビリティヒントは特定のアクション（例：クリック）に対応しており、プラットフォーム間で動作を統一したかったためです。
問題3の解決策
accessibilityIgnoresInvertColors
AppleのAPI `AccessibilityIgnoresInvertColors` をJavaScriptで使用できるようにしたので、色を反転させたくないビュー（例：画像）がある場合、このプロパティをtrueに設定すると、反転されなくなります。
新しい使用方法
これらの新しいプロパティは、React Native 0.57 リリースで利用可能になります。
アップグレード方法
現在 `accessibilityComponentType` と `accessibilityTraits` を使用している場合、新しいプロパティにアップグレードするには、次の手順を実行できます。
1. jscodeshift の使用
最も単純なユースケースは、jscodeshift スクリプトを実行することで置き換えることができます。
このスクリプトは、次のインスタンスを置き換えます。
accessibilityTraits=“trait”
accessibilityTraits={[“trait”]}
以下で置き換えます。
accessibilityRole= “trait”
このスクリプトは、`AccessibilityComponentType` のインスタンスも削除します（`AccessibilityComponentType` を設定する場合は常に `AccessibilityTraits` も設定すると仮定しています）。
2. 手動コードモッドの使用
`AccessibilityRole` に対応する値を持たない `AccessibilityTraits` を使用したケースと、複数のトレイトが `AccessibilityTraits` に渡されたケースでは、手動でのコードモッドを行う必要があります。
一般的に、
accessibilityTraits= {[“button”, “selected”]}
は手動で以下で置き換えます。
accessibilityRole=“button”
accessibilityStates={[“selected”]}
これらのプロパティはすでにFacebookのコードベースで使用されています。Facebookのコードモッドは驚くほどシンプルでした。jscodeshiftスクリプトで約半分のインスタンスが修正され、残りの半分は手動で修正されました。全体として、プロセス全体に数時間かかりませんでした。
更新されたAPIが役に立つことを願っています！そして、アクセシビリティの高いアプリを作り続けてください！ #inclusion