<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="1" class="code-line">この記事は <a href="https://qiita.com/advent-calendar/2024/react-aria" target="_blank" rel="nofollow noopener noreferrer">React Aria の実装読むぞ - Qiita Advent Calendar 2024</a> の 1 日目の記事です。</p>
</div></aside>
<p data-line="4" class="code-line">こんにちは、フロントエンドエンジニアの mehm8128 です。</p>
<p data-line="6" class="code-line">これから 25 日間、1 人アドベントカレンダーとして React Aria を読んでいきます。<br>
今日は具体的な話はしないので idea の方に投稿させてもらっています。</p>
<p data-line="9" class="code-line">僕は大学を半年早期卒業して今は就職先の会社で内定者アルバイトをさせてもらっています。そこで、来年正社員として新卒入社するまで暇だからなんかやることあるかなって話をしていたら、先輩社員の方に勧められて 1 人アドベントカレンダーなるものを始めてしまいました...。ですが知り合い含めて意外とやる人が多くてびっくりしました。特に社内の先輩方だと、React Aria に関係ありそうな <a href="https://adventar.org/calendars/10555" target="_blank" rel="nofollow noopener noreferrer">i18n の話</a> や <a href="https://adventar.org/calendars/10293" target="_blank" rel="nofollow noopener noreferrer">Open UI の話</a> を書く方がいるのでそちらの記事も楽しみにしています。</p>
<p data-line="11" class="code-line">Qiita の方でカレンダーを作っていて（<s>完走賞ほしい</s> Qiita で投稿しないともらえないらしいです 😭）、購読者が少しずつ増えていってちゃんといい記事を書けるか不安ではあるのですが、あまり気にせずに自分の書きたいことを書いていこうと思います。あと、カレンダーに入ってるタイトルはあくまでも予定なので結構変わったりずれたりします（公開したタイミングで直します）。</p>
<p data-line="13" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__dab06dc425156" src="https://embed.zenn.studio/card#zenn-embedded__dab06dc425156" data-content="https%3A%2F%2Fqiita.com%2Fadvent-calendar%2F2024%2Freact-aria" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/advent-calendar/2024/react-aria" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/advent-calendar/2024/react-aria</a></p>
<p data-line="15" class="code-line">また、Adventar の方にアクセシビリティのカレンダーがあったので、そちらにも参加させていただいています。<br>
<a href="https://www.w3.org/TR/accname-1.2/" target="_blank" rel="nofollow noopener noreferrer">Accessible Name and Description Computation 1.2</a> についてまとめていて、既に記事は完成しているので、お楽しみに。</p>
<p data-line="18" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a2e6f3a6fb879" src="https://embed.zenn.studio/card#zenn-embedded__a2e6f3a6fb879" data-content="https%3A%2F%2Fadventar.org%2Fcalendars%2F9957" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://adventar.org/calendars/9957" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://adventar.org/calendars/9957</a></p>
<p data-line="20" class="code-line">今回は初回なので、まずは React Aria について自分が理解している範囲で軽く説明していこうと思います。</p>
<h2 id="web-%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%81%A8%E3%81%AF" data-line="22" class="code-line">
<a class="header-anchor-link" href="#web-%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Web アクセシビリティとは</h2>
<p data-line="24" class="code-line">Web アクセシビリティを知らない方も読んでいるかもしれないので念の為、僕が考えている Web アクセシビリティ（以降 a11y と略します）を簡単に説明します。<br>
a11y とは全ての人が Web サービスを利用できる状態のことです。全ての人とは、障害や言語、年齢、利用環境などに関係なく全ての人を対象としています。<br>
これを実現するために、例えば目の見えない方が Web サイトの情報にアクセスできるようにするにはスクリーンリーダーによって Web サイトの内容が適切に読み上げられたり、スクリーンリーダーを操作できるようにするためにキーボードのみで画面を操作できるようにしたりする必要があります。また、マウスもキーボードも使えないような障害を手や腕などに抱えている方は、音声コントロールによってサイトを操作することがあり、意図したオブジェクトを音声コントロールによって操作できるような構造にしておく必要があります。外国の方が利用できるようにするための国際化対応（以降 i18n と略します）も a11y の一部だと考えています。このように、全ての人が Web サービスを利用できるようにするためには様々なことを考慮する必要があります。<br>
もっと a11y について知りたい方は『Web アプリケーションアクセシビリティ』を読むことをおすすめします。量は多いですが、1、2 章だけ（なんなら 1 章だけでも）読むのでも a11y 自体への理解は深まります。</p>
<p data-line="29" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ead82d251d1e8" src="https://embed.zenn.studio/card#zenn-embedded__ead82d251d1e8" data-content="https%3A%2F%2Fwebapp-a11y.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://webapp-a11y.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://webapp-a11y.com/</a></p>
<p data-line="31" class="code-line">そして、その考慮しなければならない多くの事項を少しでもライブラリ側で解決・共通化し、Web サイトの制作者が楽に、そして accessible なサイトを制作できるようにしようとしているのが、React Aria です。</p>
<h2 id="react-aria-%E3%81%A8%E3%81%AF" data-line="33" class="code-line">
<a class="header-anchor-link" href="#react-aria-%E3%81%A8%E3%81%AF" aria-hidden="true"></a> React Aria とは</h2>
<p data-line="35" class="code-line">Adobe が OSS として公開しているデザインシステムの React Spectrum と共に公開されている、ヘッドレスな React components（React Aria Components） と hooks ライブラリです。<br>
a11y に重点を置いて実装されており、React Spectrum 内でも利用されています。<br>
また、React Stately というパッケージと組み合わせて利用することでコンポーネントに必要な状態管理も簡単に行うことができるようになっています。</p>
<p data-line="39" class="code-line">また、React Spectrum は<a href="https://s2.spectrum.adobe.com/" target="_blank" rel="nofollow noopener noreferrer">v2</a>が準備されている途中です。知らなくて開発環境の Storybook で謎の<code>s2</code>というのが気になっていたので一応。</p>
<p data-line="41" class="code-line">その他の機能はまっつーさんのスライドや記事をご覧ください。</p>
<p data-line="43" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4b83da077a414" src="https://embed.zenn.studio/card#zenn-embedded__4b83da077a414" data-content="https%3A%2F%2Fspeakerdeck.com%2Fryo_manba%2Freact-aria-deshi-xian-suruci-shi-dai-noakusesibiritei" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/ryo_manba/react-aria-deshi-xian-suruci-shi-dai-noakusesibiritei" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/ryo_manba/react-aria-deshi-xian-suruci-shi-dai-noakusesibiritei</a></p>
<p data-line="45" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__97b4946dde67e" src="https://embed.zenn.studio/card#zenn-embedded__97b4946dde67e" data-content="https%3A%2F%2Fzenn.dev%2Fryo_manba%2Farticles%2Fccd0fddcb5e02c" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/ryo_manba/articles/ccd0fddcb5e02c" style="display:none" target="_blank">https://zenn.dev/ryo_manba/articles/ccd0fddcb5e02c</a></p>
<p data-line="47" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__834db4bef529d" src="https://embed.zenn.studio/card#zenn-embedded__834db4bef529d" data-content="https%3A%2F%2Fzenn.dev%2Fcybozu_frontend%2Farticles%2Freact-aria-component-design" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/cybozu_frontend/articles/react-aria-component-design" style="display:none" target="_blank">https://zenn.dev/cybozu_frontend/articles/react-aria-component-design</a></p>
<h2 id="%E6%9B%B8%E3%81%8F%E3%81%93%E3%81%A8%E3%81%A8%E6%9B%B8%E3%81%8B%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" data-line="49" class="code-line">
<a class="header-anchor-link" href="#%E6%9B%B8%E3%81%8F%E3%81%93%E3%81%A8%E3%81%A8%E6%9B%B8%E3%81%8B%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" aria-hidden="true"></a> 書くことと書かないこと</h2>
<h3 id="%E6%9B%B8%E3%81%8F%E3%81%93%E3%81%A8" data-line="51" class="code-line">
<a class="header-anchor-link" href="#%E6%9B%B8%E3%81%8F%E3%81%93%E3%81%A8" aria-hidden="true"></a> 書くこと</h3>
<p data-line="53" class="code-line">実装を読むというタイトルにはしましたが、</p>
<ul data-line="55" class="code-line">
<li data-line="55" class="code-line"><a href="https://github.com/adobe/react-spectrum/issues?q=sort%3Aupdated-desc+is%3Aissue+is%3Aopen" target="_blank" rel="nofollow noopener noreferrer">React Aria の issue</a></li>
<li data-line="56" class="code-line"><a href="https://react-spectrum.adobe.com/react-aria/getting-started.html" target="_blank" rel="nofollow noopener noreferrer">React Aria のドキュメント</a></li>
<li data-line="57" class="code-line"><a href="https://www.w3.org/WAI/ARIA/apg/" target="_blank" rel="nofollow noopener noreferrer">ARIA Authoring Practices Guide (APG)</a></li>
<li data-line="58" class="code-line"><a href="https://www.w3.org/TR/wai-aria-1.2/" target="_blank" rel="nofollow noopener noreferrer">Accessible Rich Internet Applications (WAI-ARIA) 1.2</a></li>
</ul>
<p data-line="60" class="code-line">なども読みつつ、ソースコードを読んで実際にどのような a11y 対応がサポートされているかを見ていき、深掘りたいところは深掘ったり、深掘りたくないところはスルーしたりしながら進めていきます。<br>
解説というよりは自分の勉強メモという感じになると思いますがよろしくお願いします。</p>
<p data-line="63" class="code-line">また、<s>枠稼ぎ</s> 番外編として React Aria でのテストの話や i18n の話なども挟んでいく予定です。</p>
<h3 id="%E6%9B%B8%E3%81%8B%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" data-line="65" class="code-line">
<a class="header-anchor-link" href="#%E6%9B%B8%E3%81%8B%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" aria-hidden="true"></a> 書かないこと</h3>
<p data-line="67" class="code-line">デザインシステムである React Spectrum や、 React Aria Components の実装・インターフェースなどについてはあまり書きません。今回は hooks に焦点を当てていこうと思います。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="69" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="71" class="code-line">明日の担当は <a href="https://zenn.dev/mehm8128" target="_blank">@mehm8128</a> さんで、 Button についての記事です。お楽しみにー</p>


イントロダクション - React Ariaの実装読むぞ

rana_kualu

mehm8128

<p data-line="0" class="code-line">完走賞は<a href="https://blog.qiita.com/adventcalendar-2024-qiitapresents/" target="_blank" rel="nofollow noopener noreferrer">Qiita上に記事を書いた者だけが対象</a>なのでした。残念！</p>


<p data-line="0" class="code-line">ほんとですね！ちゃんと読んでませんでした😱😱<br>
完走できたら自分で自分に何か買うことにします🙃</p>


Discussion