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

動機

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

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

既存APIの問題点

問題点1：まったく異なるのに似ている2つのプロパティ - accessibilityComponentType (Android) と accessibilityTraits (iOS)

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

1. それらは、使用方法が異なりながらも同じ目的を持つ2つの異なるプロパティであることです。以前のAPIでは、これらは（プラットフォームごとに1つずつ）2つの別々のプロパティであり、不便なだけでなく、多くの開発者にとって混乱を招くものでした。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の間の混乱を解決するために、それらを単一のプロパティに統合することを決定しました。これらは技術的に同じ意図された機能を持っていたため、統合することで理にかなっていました。開発者はアクセシビリティ機能を構築する際に、プラットフォーム固有の複雑さを心配する必要がなくなりました。

背景

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」、またはその両方と組み合わせていました。そのため、accessibilityRoleとaccessibilityStateの2つの新しいアクセシビリティプロパティを作成することにしました。

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のヒントの動作を模倣していることですが、欠点は、AndroidではiOSのように設定でこれらのヒントをオフにできないことです。

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. 手動のコードモッドを使用する

AccessibilityTraitsを使用し、AccessibilityRoleに該当する値がない場合、および複数の特性がAccessibilityTraitsに渡された場合は、手動でコードモッドを行う必要があります。

一般的に、

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

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

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

これらのプロパティはすでにFacebookのコードベースで使用されています。Facebookのコードモッドは驚くほどシンプルでした。jscodeshiftスクリプトは約半分のインスタンスを修正し、残りの半分は手動で修正されました。全体として、全プロセスにかかった時間は数時間未満でした。

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