アクセシビリティAPIの更新

動機

テクノロジーが進歩し、モバイルアプリが日常生活においてますます重要になるにつれて、アクセシブルなアプリケーションを作成する必要性も同様に重要性を増しています。

React Nativeの限定的なアクセシビリティAPIは、開発者にとって常に大きな悩みの種でした。そこで私たちは、インクルーシブなモバイルアプリケーションをより簡単に作成できるように、アクセシビリティAPIにいくつかのアップデートを行いました。

既存のAPIの問題点

問題点1：全く異なるが類似した2つのプロパティ - accessibilityComponentType (Android) と accessibilityTraits (iOS)

accessibilityComponentTypeとaccessibilityTraitsは、ユーザーが操作しているUI要素がどのような種類のものであるかをAndroidのTalkBackとiOSのVoiceOverに伝えるために使用される2つのプロパティです。これらのプロパティに関する最大の問題は次の2つです。

1. これらは使用方法が異なる2つの別々のプロパティでありながら、目的は同じです。 以前のAPIでは、これらは（プラットフォームごとに1つずつ）別々のプロパティであり、不便であるだけでなく、多くの開発者を混乱させていました。iOSのaccessibilityTraitsは17種類の異なる値を許可するのに対し、AndroidのaccessibilityComponentTypeは4つの値しか許可しません。さらに、これらの値はほとんど重複していませんでした。これらの2つのプロパティの入力型さえも異なります。accessibilityTraitsは特性の配列または単一の特性を渡すことができますが、accessibilityComponentTypeは単一の値しか許可しません。
2. 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の間の混乱を解決するために、これらを1つのプロパティに統合することにしました。これらは技術的に同じ意図された機能を持っていたため、これは理にかなっていました。統合することで、開発者はアクセシビリティ機能を構築する際にプラットフォーム固有の複雑さを心配する必要がなくなりました。

背景

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要素の役割を伝えるために使用されます。この新しいプロパティは、以下のいずれかの値を取ることができます。

• none
• button
• link
• search
• image
• keyboardkey
• text
• adjustable
• header
• summary
• imagebutton

このプロパティは、UI要素が論理的にこれらのうちの1つ以上を取ることが一般的にないため、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. 手動でのcodemodの使用

AccessibilityRoleに対応する値がないAccessibilityTraitsを使用した場合や、複数の特性がAccessibilityTraitsに渡された場合については、手動でcodemodを行う必要があります。

一般的に、

accessibilityTraits= {[“button”, “selected”]}

は手動で以下のように置き換えられます。

accessibilityRole=“button”
accessibilityStates={[“selected”]}

これらのプロパティはすでにFacebookのコードベースで使用されています。Facebookのcodemodは驚くほど簡単でした。jscodeshiftスクリプトで約半数のインスタンスが修正され、残りの半分は手動で修正されました。全体として、プロセス全体は数時間もかかりませんでした。

更新されたAPIが役立つことを願っています！そして、引き続きアクセシブルなアプリを作り続けてください！#inclusion