React Spectrum
先週、percelの作者でAdobeのエンジニアのDevonさんのtweetが話題になりました。
🚀 Super excited to announce:
— Devon Govett (@devongovett) July 15, 2020
♿️ React Aria — Accessible UI primitives for your design system.
👑 React Stately — State and core logic for your design system.
🌈 React Spectrum — Adobe’s design system.
Learn more: https://t.co/ucVguh3rqp
Github: https://t.co/e8aOfLgCVK
-
React Spectrum— A React implementation of Spectrum, Adobe’s design system. -
React Aria— A library of React Hooks that provides accessible UI primitives for your design system. -
React Stately— A library of React Hooks that provides cross-platform state management and core logic for your design system.
アクセシビリティ(accessibility, a11y)
Webサイト上における、情報やサービスへのアクセスのしやすさのこと。高齢者や障碍者など身体の状態や能力の違いに関わらず、様々な人が、様々な環境下で柔軟にWebサイトを利用できるように構築する必要があるという考え方。
なぜ必要か
- 多くの人にとって使いやすいサイトになる、利益にもつながる
- 倫理とモラルを誇示することになり、公的イメージが良くなる
- セマンティックなHTMLを意識することでSEOの改善になる
- ある場所では法律となっている
アクセシビリティの基本
- ページの内容が分かるページタイトルを記述する
- 見出しやリストなどの文書構造をマークアップする
- リンクテキストは、リンク先が分かる文言にする
- 情報を伝えている画像に代替テキストを提供する
- 情報を伝える色の使い方に注意する
- ユーザーがコンテンツを拡大表示できるようにする
- キーボードだけでも操作できるようにする
- フォーム・コントロールのラベルや説明をマークアップする
- エラーメッセージではエラー箇所と修正方法を明示する
- 動画に字幕を提供する
どういう人に向けて考慮する必要があるか
視覚
視覚が弱い方はズーム機能を使ったり、全盲の方はスクリーンリーダーで読み上げを行う。 (macユーザーはcommand + F5 でVoiceOverというスクリーンリーダーを起動することが出来る。)また、色盲の方には色のコントラストに気を使ったCSSマークアップが必要。
身体
マウスを使った正確な手の動きが難しい人は、例えばTabキーを使ってのコントロールなど、キーボードからのアクセスが可能である必要がある。
セマンティックなHTML
CSSとJavaScriptで、望みどおりの動きや見た目を実現できるが、アクセシビリティには適切なHTML要素を使うことが重要。
<div>動画を再生する</div>
<a>動画を再生する</a>
<button>動画を再生する</button>
<button> 要素は、デフォルトのスタイルが適用されているだけでなく、組み込みのキーボード・アクセシビリティも備えている。例えばボタン要素同士の間をタブで移動できたり、 return/enter を使ってボタン要素をアクティブにできる。
見出しや段落、リストなどの適切なコンテンツ構造
<header>
<h1>見出し</h1>
</header>
<nav>
<!-- ナビゲーション -->
</nav>
<!-- 主要コンテンツ -->
<main>
<!-- 記事 -->
<article>
<h2>下位見出し</h2>
<!-- 記事の中身はここです。 -->
</article>
<aside>
<h2>下位見出し</h2>
<ol>
<li>リストアイテム 1</li>
<li>リストアイテム 2</li>
<li>リストアイテム 3</li>
</ol>
</aside>
</main>
<footer>
<!-- フッター -->
</footer>
見出しや段落やリストなどの適切なコンテンツ構造でマークアップされていたら、スクリーンリーダーを通したアクセシビリティもよくなる。
- 各ヘッダを読み上げて、どれが見出しでどれが段落なのかといったことを知らせてくれる
- 次の見出し/前の見出しへとジャンプできる
- すべての見出しの一覧を取り出すことができ、それらの見出しを、特定のコンテンツを見つけるための目次のようにも使える
React Spectrum Libraries
React Aria
アクセシビリティ対策への課題
- いろんな会社がスクラッチからデザインを行なっているが、全てのサイトでアクセシビリティを考慮して実装するのは難しい
- 例えば
divのような要素はスタイルを当てやすいが、セマンティックさに欠け、アクセシビリティが考慮されてない - たとえ、ARIAを考慮して全てのセマンティックさを与えても、キーボード操作などのインタラクションをデバイスをまたいで制御するのは難しい
- 残念ながら多くの企業はアクセシビリティやaccessibility, internationalization, full keyboard navigation, touch interactionsなどをやる余裕はない
- Webアプリはネイティブに比べてアクセシビリティ観点で劣ってることが多い
React Ariaの特徴
- アクセシビリティに必要な属性の付与、キーナビゲーション操作、多言語化対応のサポートなどをReact Hooksとしてロジックを外出しししながら、再利用可能な形で提供している
- ブラウザの標準UIはデザイン性が悪く、開発者はスタイリングのためにスクラッチから実装する必要があるが、ReactAriaは多くのOSSコンポーネントライブラリと異なり、ただ挙動とアクセシビリティだけの機能を追加し、レンダリングについては何も提供しない（どんなDOM構造やスタイリング方法も課さない）
- hooksは小さく、組み立てやすい
- 通常、input要素やチェックボッックスやセレクトボックスには視認できるラベルがあるが、React Ariaは自動でラベルをコントロールに紐づけて、適切にアシストする
- 何かの理由で視認できるラベルがないような場合やビルトインのラベルを持たないコントロールを行うような場合は
aria-labelaria-labelledbyのようなpropsを明示的にしないといけない。その際、もし視認できるラベルもARIAラベルもない時、コンソールでwarningを表示する
hooksで適切なpropsを展開して、アクセシブルでセマンティクスでキーナビゲーションにも優れた実装を、より簡単に、よりスタイリングしやすい形で提供する！
CodePen - Tailwind React Aria by Devon Govett
感想
- 理解しやすい
- ドキュメントがとにかく丁寧でわかりやすい
- UIとロジックが切り離されているので、ドム構造を深く考える必要性がなく、マークアップ観点でもロジック観点でも実装しやすい
- hooksが小さく分かれているので、必要になったものを必要なタイミングで理解しながら使えるのはよい
- 小さいhooksを組み合わせながら、1つのコンポーネントを作っていく感じもよい
- WAI-ARIA等、アクセシビリティは何が正解なのか分かりにくい。なのでアクセシビリティに対する理解がない状態だと、正解が分からない状態でアクセシビリティの正しい答え探しと実装とを同時に進めないといけないが、React-Ariaであればドキュメントに沿って実装することで、（アクセシビリティへの理解はある程度は必要になるが）対応出来るのは素晴らしい
- 指定が不足しているラベルがあればwarningが出るなどもよい
- セレクトボックスのようなコンポーネントをタブ移動などのキーボード操作まで考慮して実装するのは時間がかかるが、React-Aria使えば間違いのない実装を手軽に出来る
Adobeがやってる安心感もあって、メンテもされそうだし、今後のReact使ったアクセシビリティ対応の本命になるんじゃないかと思います。