使い慣れたウェブアクセシビリティ API をプラットフォームに依存しない形で提供。
React Native for Web におけるアクセシビリティは、複数の独立した Web API をまとまったシステムとして統合しています。支援技術（VoiceOver、TalkBack といったスクリーンリーダーなど）は、ウェブアプリの構造、目的、対話性について、HTML 要素、属性、および ARIA in HTML から有用な情報を得ます。
React Native for Web には、アクセシブルなアプリを作るための API が含まれています。Web で最も一般的でサポートされているアクセシビリティ機能が、プラットフォームに依存しない accessibility* props として公開されています。
accessibilityActiveDescendant: ?string
accessibilityAtomic: ?boolean
aria-atomic に相当。
accessibilityAutoComplete: ?string
aria-autocomplete に相当。
accessibilityBusy: ?boolean
aria-busy に相当。
accessibilityChecked: ?(boolean | "mixed")
aria-checked に相当。
accessibilityColumnCount: ?number
aria-colcount に相当。
accessibilityColumnIndex: ?number
aria-colindex に相当。
accessibilityColumnSpan: ?number
aria-colspan に相当。
accessibilityControls: ?(string | Array)
aria-controls に相当。
accessibilityCurrent: ?(boolean | "page" | "step" | "location" | "date" | time")
aria-current に相当。
accessibilityDescribedBy: ?(string | Array)
aria-describedby に相当。
accessibilityDetails: ?string
aria-details に相当。
accessibilityDisabled: ?boolean
aria-disabled に相当。
accessibilityErrorMessage: ?string
aria-errormessage に相当。
accessibilityExpanded: ?boolean
aria-expanded に相当。
accessibilityFlowTo: ?(string | Array)
aria-flowto に相当。
accessibilityHasPopup: ?string
aria-haspopup に相当。
accessibilityHidden: ?boolean
aria-hidden に相当。
accessibilityInvalid: ?boolean
aria-invalid に相当。
accessibilityKeyShortcuts: ?Array
aria-keyshortcuts に相当。
accessibilityLabel: ?string
aria-label に相当。
accessibilityLabelledBy: ?(string | Array)
aria-labelledby に相当。
accessibilityLevel: ?number
aria-level に相当。
accessibilityLiveRegion: ?("assertive" | "off" | "polite")
aria-live に相当。
accessibilityModal: ?boolean
aria-modal に相当。
accessibilityMultiline: ?boolean
aria-multiline に相当。
accessibilityMultiSelectable: ?boolean
aria-multiselectable に相当。
accessibilityOrientation: ?("horizontal" | "vertical")
aria-orientation に相当。
accessibilityOwns: ?(string | Array)
aria-owns に相当。
accessibilityPlaceholder: ?string
aria-placeholder に相当。
accessibilityPosInSet: ?number
aria-posinset に相当。
accessibilityPressed: ?boolean
aria-pressed に相当。
accessibilityReadOnly: ?boolean
aria-readonly に相当。
accessibilityRequired: ?boolean
aria-required に相当。
accessibilityRole: ?boolean
role に相当。
accessibilityRoleDescription: ?string
aria-roledescription に相当。
accessibilityRowCount: ?number
aria-rowcount に相当。
accessibilityRowIndex: ?number
aria-rowindex に相当。
accessibilityRowSpan: ?number
aria-rowspan に相当。
accessibilitySelected: ?boolean
aria-selected に相当。
accessibilitySetSize: ?number
aria-setsize に相当。
accessibilitySort: ?("ascending" | "descending" | "none" | "other")
aria-sort に相当。
accessibilityValueMax: ?number
aria-valuemax に相当。
accessibilityValueMin: ?number
aria-valuemin に相当。
accessibilityValueNow: ?number
aria-valuenow に相当。
accessibilityValueText: ?string
aria-valuetext に相当。
Text と View コンポーネントは、リンクとしてレンダリングすることができます。href prop が設定されている場合、要素を presentation として変更することなく、要素は <a> タグとしてレンダリングします。
<Text href="/" />
// <a href="/" ></a>hrefAttrs prop はリンク関連の属性を設定します。
const hrefAttrs = { download: true, rel: "nofollow", target: "blank" };
<Text
href="/document.pdf"
hrefAttrs={hrefAttrs}
/>
// <a download href="/document.pdf" rel="nofollow" target="_blank"></a>focusable prop は、コンポーネントがユーザーフォーカス可能で、キーボードタブフローとして表示されるかどうかを決定します。この prop は、React Native for Android/iOS で見られる accessible prop の代わりに使用する必要がありますが、React Native for Web/Windows/macOS では実装されていません。
<View focusable={true} />
// <div tabindex="0"></div>
<Text focusable={false} href="/" />
// <a href="/" tabindex="-1"></a>ご存知ですか？ UIManager.focus(viewRef.current) により、任意の要素（キーボードタブフローにない要素を含む）をプログラムコードによってフォーカスできるようになります。
React Native for Web コンポーネントは、aria-* 属性と同等の accessibility* prop によってのみセマンティクスを表現します。例えば、accessibilityRole は HTML の role 属性に、accessibilityLabel は aria-label に相当します (React Native の accessibility props との追加互換性も含まれています)。
<View
accessibilityLabel="..."
accessibilityPressed={false}
accessibilityRole="menuitem"
nativeID="abc"
/>
/*
<div
aria-label="..."
aria-pressed="false"
id="abc"
role="menuitem"
/>
*/accessibilityRole の値は、必要に応じて類似した HTML 要素を推論するために使用されます。これは、セマンティクスとアクセシビリティ情報をエンコードするため、十分にサポートされたネイティブのメカニズムに依存するために使われます。
<View accessibilityRole="article">
<Text accessibilityRole="paragraph">これは記事です</Text>
</View>
/*
<article>
<div role="paragraph">これは記事です</div>
</article>
*/Text と View の両方がブロックレベルの子をサポートしているため、"paragraph" role は <p>タグにマッピングされません。なぜなら、要素内にブロックレベルの子を含めることは HTML 適合エラーになるからです。
"heading" role が accessibilityLevel と組み合わされた場合、同等の HTML 見出し要素がレンダリングされます。それ以外の場合は、<h1> としてレンダリングされます。
<Text accessibilityRole="heading" /> /* <h1> */
<Text accessibilityRole="heading" accessibilityLevel={2} /> /* <h2> */注意点: 時間が経過した後やユーザが操作した後に accessibilityRole の値を変更することは避けてください。一般的にアクセシビリティ API は、role が変更された場合に支援技術に通知する手段を提供していません。