まとめ

React Ariaの実装読むぞ

目次
  1. a11y 対応種類分け
    1. スクリーンリーダーの読み上げ対応
    2. キーボード操作
    3. モバイル端末での操作
    4. i18n
    5. デバイス・ブラウザ・スクリーンリーダーごとの差異への対応
    6. デザイン上の対応
  2. その他
    1. 他のライブラリ・フレームワーク
    2. マイルストーン
  3. まとめ
Warn

この記事は他サイトから移行したものです。

Note

この記事は React Aria の実装読むぞ - Qiita Advent Calendar 2024 の 25 日目の記事です。

こんにちは、フロントエンドエンジニアの mehm8128 です。 今回はまとめ回なので、React Aria での a11y 対応について、いくつかの種類に分けて見ていきます。

a11y 対応種類分け #

していきます。

スクリーンリーダーの読み上げ対応 #

a11y 対応と言って最初にこれが思い浮かぶ人は多かったのではないでしょうか。 HTML タグを正しく使って構造化するとか、accessible name をつけるという基本的なところから、aria-selectedなどのaria-属性を使って要素の状態を表現したり、aria-live="polite"のようなライブリージョンを用いてアナウンスさせたり、ブラウザ側でサポートされていないようなタイミングで読み上げたい場合に独自のLiveAnnouncerオブジェクトを用いてアナウンスさせたりと、様々な方法で Web ページの状態をスクリーンリーダーによって読み上げさせていました。 これによってスクリーンリーダー利用者は Web サービスを利用できるようになります。しかし、このような対応はスクリーンリーダー利用者以外にもメリットをもたらします。HTML の正しい構造化や適切なラベル付けによって accessible name が正しく付与されることで、音声コントロールの利用者が音声によってスムーズに Web サービスを操作できるようになります。適切にラベル付けされたフォーム UI は、支援技術を必要としないユーザーにとっても入力するものが分かりやすく、ユーザー体験を向上させることに繋がります。また開発者目線だと、Testing Library などでコンポーネントのテストを書くときにgetByRoleのような関数で対象の要素を取得しやすくなります。

キーボード操作 #

キーボード操作についても様々な対応がされていました。React Aria は基本的に APG に沿った実装を行っているので、キーボード操作についても APG に書かれている通りに実装されていると思います。Tab キーによる適切なフォーカス制御だけでなく、矢印キーによるナビゲーションや、Dialog を閉じる際の ESC キーなどもサポートされていました。また、フォーカス制御については番外編の Focus Management API でも出てきました。 キーボード操作のサポートは、視覚障害者の方やマウスを正確に操作することが難しいユーザーにとって使いやすくなるのはもちろん、普段キーボードを好んで操作をしている人にとってもサービスの利用が便利になります。

モバイル端末での操作 #

a11y 対応は支援技術を必要とするユーザーのためだけのものではありません。モバイル端末からも Web サービスを利用できるというのも、a11y の一種です。 モバイル端末で快適に操作できるように様々な工夫がされていました。 見てきた中で一番重い実装だったのはusePressでしょう。また、useNumberFieldではモバイルでの仮想キーボードの種類を制御するinputModeが指定されていました。

i18n #

海外のユーザーでもサービスを利用できるというのも a11y の一種です。 番外編でしたが、React Aria で対応されている i18n について一通り見ました。

デバイス・ブラウザ・スクリーンリーダーごとの差異への対応 #

これまで見てきたスクリーンリーダー対応やキーボード対応、モバイル対応はデバイス・ブラウザ・スクリーンリーダー間でサポート状況が微妙に異なり、同じ対応方法をしても環境によって動かないことがあります。React Aria ではできるだけ様々な環境で動くように条件分岐などを駆使して実装が行われています。実装を読んで分かったと思うのですが、そういった箇所にはソースコード上に丁寧にコメントでメモが書かれていました。 また、色々な環境で動くことを確認するために、ドキュメントに書かれているような環境でテストされていることも番外編で見てきました。

デザイン上の対応 #

今回は範囲外としたのですが、React Spectrum では見た目部分にも責務を持っているので、デザイン上の a11y 対応 も行われています。

色やコントラスト、アニメーション、フォントサイズなど、こちらも様々なところに気を遣って実装されています。詳しく知りたい方は以下のページを参照してください。

Inclusive design - Spectrum
We all differ in our abilities to see, perceive colors, hear, control our motions, concentrate, and understand concepts. Inclusive design makes room for as many people as possible.
spectrum.adobe.com

その他 #

上で見てきたように、React Aria では様々な a11y 対応がされていました。これを全て独自実装するのはかなり大変で、様々な環境で問題なく動作していることをテストするのも大変です。そういったことを考えると React Aria というライブラリを用いて基本コンポーネントを作成し、利用していくのは a11y 対応の選択肢としてとても有用なものではないかと考えています。

他のライブラリ・フレームワーク #

React Aria は、実は他の UI フレームワークでも利用されています。

NextUI は Tailwind と React Aria を用いて作成されているフレームワークです。 https://nextui.org/

JollyUI では Rect Aria Components をベースとして、shadcn/ui のようにスニペットのコピペで利用できるコンポーネントを提供しています。 https://www.jollyui.dev/

また、最近 Base UI というライブラリも登場しました。React Aria Components と同様に、headless で accessible なコンポーネントを提供しています。

Base UI
Unstyled UI components for building accessible web apps and design systems.
base-ui.com

マイルストーン #

GitHub Project で、マイルストーンの管理がされています。まだまだやることがありそうですね。 https://github.com/orgs/adobe/projects/19/views/18

また、イントロダクションでも書いたように、React Spectrum は v2 が開発されている途中です。 https://s2.spectrum.adobe.com/

まとめ #

書きたかったものが書けたかというと完全に満足しているわけではないのですが、なんとか一通り React Aria を見ていくことができました。いくつかのaria-属性や i18n、ブラウザ・スクリーンリーダーごとに大きく差異があることなど、知らなかったことをたくさん知ることができてよかったです。

読んで下さった方々、ありがとうございました。