Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native for Webアクセシビリティ(日本語訳)

https://github.com/necolas/react-native-web/blob/master/docs/guides/accessibility.md の日本語訳

アクセシビリティ

Web上では、支援技術(VoiceOver、TalkBackスクリーンリーダーなど)は、そのHTML要素、属性、およびARIA in HTMLから、アプリケーションの構造、目的、および対話性に関する有用な情報を導き出します。React Native for Webには、アプリをよりアクセスしやすくするためのサポートを開発者に提供するように設計されたAPIが含まれています。ウェブの最も一般的な、最高のサポートアクセシビリティ機能はpropsとして公開されています。例えば、accessibleaccessibilityLabelaccessibilityLiveRegionaccessibilityRole、とimportantForAccessibility

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

accessible

trueになったとき、はビューがアクセシビリティ要素であることを示します。ビューがアクセシビリティ要素の場合は、その子を単一のフォーカス可能コンポーネントにグループ化します。デフォルトでは、すべてのタッチ可能な要素、ボタン、およびリンクは「アクセス可能」です。使用して優先するaccessibilityRole(例えばbuttonlink可能な限りフォーカス可能なHTML要素を作成します)。Web上で、tabIndexを使用してaccessible={true}実装されています。

accessibilityLabel

ビューがaccessibleとしてマークされているときは、ビューにaccessibilityLabelを設定することをお勧めします。これにより、スクリーンリーダーを使用する人々が自分が選択した要素を認識できるようになります。accessibilityLabelは、Web上ではaria-labelを使用して実装されています。

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

accessibilityLiveRegion

コンポーネントが動的に変化するときは、ユーザーに通知する必要があります。accessibilityLiveRegionプロパティは、この目的を果たすとに設定することができ nonepoliteそしてassertiveaccessibilityLiveRegionは、Web上でaria-liveを使用して実装されています。

  • none: アクセシビリティサービスはビューの変更を提示されるべきではありません。
  • polite: アクセシビリティサービスはビューの変更を提示されるべきです。
  • assertive: アクセシビリティサービスは現在進行中の発表を中断して、ビューに対する変更を直ちに提示するべきです。
<TouchableWithoutFeedback onPress={this._addOne}>
  <View style={styles.embedded}>
    <Text>Click me</Text>
  </View>
</TouchableWithoutFeedback>

<Text accessibilityLiveRegion="polite">
  Clicked {this.state.count} times
</Text>

上記の例では、methodの_addOnestate.count変数を変更します。 accessibilityLiveRegion="polite"の性質上、エンドユーザーがをクリックするTouchableWithoutFeedbackとすぐに、そのスクリーンリーダーはTextビューにテキストを提示します。

accessibilityRole

場合によっては、選択されたコンポーネントの種類についてエンドユーザーに警告する必要があります(つまり、それが「ボタン」であること)。Web上のスクリーンリーダーにさらにコンテキストを提供するには、このaccessibilityRoleプロパティを使用する必要があります。(注:React Native for WebもaccessibilityRoleと同等のaccessibilityTraits値とaccessibilityComponentType値の互換性マッピングを提供します)。

可能であれば、accessibilityRoleのpropは類似したHTML要素とARIA roleを推定するために使用してください。ほとんどの場合、HTML要素とARIA roleの両方がレンダリングされます。これはARIAのいくつかの推奨と矛盾するかもしれませんが、それはまた特定のブラウザのバグ、HTML5の適合性の誤り、そしてアクセシビリティのアンチパターン(例えばbutton要素へのheading roleの付与)を避けるのを助けます。Web上でaccessibilityRoleは、React NativeがAndriodおよびiOSに対して行うよりも多くの価値をサポートします。

簡単な例:

  • <View accessibilityRole="article" /> => <article role="article" />
  • <View accessibilityRole="banner" /> => <header role="banner" />
  • <Text accessibilityRole="label" /> => <label />
  • <Text accessibilityRole="link" /> => <a role="link" />
  • <View accessibilityRole="main" /> => <main role="main" />

headingのroleはaria-levelと組み合わせることができます:

  • <Text accessibilityRole="heading" /> => <h1 />
  • <Text accessibilityRole="heading" aria-level="3" /> => <h3 />

このbutton roleはアクセス可能なボタンをレンダリングしますが、ブラウザによっては、その子の中でflexboxレイアウトの使用が制限されるため、ネイティブbutton要素を使用して実装されていません。

  • <View accessibilityRole="button" /> => <div role="button" tabIndex="0" />

以下の例では、TouchableHighlightはスクリーンリーダーによってボタンとしてアナウンスされ、タッチ、マウス、およびキーボードの操作に応答します。

<TouchableHighlight accessibilityRole="button" onPress={this._handlePress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableHighlight>

注:accessibilityRoleの値は、時間の経過またはユーザーの操作後に値を変更しないでください。一般的に、アクセシビリティAPIは、支援技術にrole値の変化を通知する手段を提供していません。

accessibilityStates

accessibilityStatespropは、類似のARIA状態を推測するために使用される値の配列です。例えばaria-disabledaria-pressedaria-selected。Web上でaccessibilityStatesは、React NativeがAndriodおよびiOSに対して行うよりも多くの価値をサポートします。

importantForAccessibility

このimportantForAccessibilityプロパティは、ビューがユーザー補助ツリーに表示されるかどうか、およびユーザー補助サービスに報告されるかどうかを制御します。Web上では、noの値でタブフローからフォーカス可能な要素を削除し、no-hide-descendantsの値、または支援技術からサブツリー全体を隠します(これはaria-hiddenを使って実装されます)。

Spatial navigation

フォーカスベースのWeb UIでは、例えば、テレビやゲーム機などの既存の指向性フォーカスライブラリを使用して、Reactの外部でテレビのリモコンナビゲーションを実装できます。React Nativeがフォーカス可能と見なすすべてのDOM要素は、data-focusable="true"属性によって一致させることができます。

const focusableElements = document.querySelectorAll('[data-focusable="true"]');

その他

その他のARIAプロパティは直接操作またはpropsで設定できます(これは将来変更されるかもしれません)。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.