泰延ReactWAI-ARIA473823この記事は『WAI-ARIA対応のタブ型UIを実装する方法』の続きです。WAI-ARIAはアクセシビリティーの改善に役立つと先の記事で紹介しました。この記事ではWAI-ARIAに対応したReactでのタブのユーザーインターフェースを解説します。サンプルをGitHubにアップしているので、デモとソースコードをご覧ください。別ウインドウで再生するGitHubでコードを確認する前提として、create-react-appを使って環境構築したものとします。BabelでES2018環境の構築(Reactのサンプル付き)」で紹介しているようにwebpack等で環境構築されていても構いません。実装の要素としてstateに選択されたタブのIDを保持することとします。'panel1',});※コードは抜粋で掲載しているので、コピーする際はGitHubの「app.js」を参照ください。HTMLの実装HTMLの実装を紹介します。このコードは関にJSXで書いています。カベルネ・ソーヴィニョンはブドウの一品種。赤ワインの中でも渋くて重い味わいが特徴です。メルローはブドウの一品種。味はカベルネ・ソーヴィニョンほど酸味やタンニンは強くなく、芳醇でまろやかで繊細な味わいです。ピノ・ノワールはブドウの一品種。カベルネ・ソーヴィニョンと対照的で比較的軽口な味わいです。</div></div>※説明の簡略化のためにRedux等は利用せずに解説しています。リストの項目は動的に実装できそうですが、あえて静的なJSXとしてコードを書いています。HTMLコーディングのポイントとしては次の通り。要素はデフォルトでタブキーで操作できないためです。Safariでは次のように「Tabキーを押したときにウェブページ上の各項目を強調表示」を選択すると、a要素もタブキーで選択可能になります。このオプションを設定していなくてもタブキーで選択されたほうが望ましいと考えてのことですJavaScriptとReactに絡んでくるポイントは次の通り。タブとなるbutton要素とパネルのdiv要素の関連性を示すためaria-controls属性を指定します。値は任意でid属性を指定しますbutton要素にタブの選択状態を伝えるために、aria-selectedを真偽値で指定しますReactのステートの値で動的とします。aria-hidden属性を真偽値で指定しますボタン要素のイベントハンドラーボタン要素のイベントハンドラーのコードを紹介します。属性で代替するのがベターなやり方と思います。Hooksを使って書いています。クリックしたときのイベントハンドラーです。属性をセレクターとして指定しています。すれば、余計なクラス属性を増やす必要がなくなります。white;}※コードは抜粋で掲載しているので、コピーする際はGitHubの「App.css」を参照ください。CSSの実装はCodeGridの記事「WAI-ARIAを活用したフロントエンド実装」で紹介されている「aria属性をCSSセレクターとして利用する」「独自に名前を付けるくらいなら、意味的に合致するaria属性を利用して、アクセシビリティーを確保しましょう」の提案をアイデアとしています。まとめReactで実装する場合はタブの状態はいずれかのstateかpropsで管理しているはずです。その値を間借りしてaria-*属性に適用すれば、簡単にアクセシビリティーを向上できます。これは一例に過ぎません。さまざまなユーザーインターフェイスに利用できるので応用くださいませ。昨年の記事「脱jQueryのためにしたこと」でも紹介したように、これらのJSライブラリとWAI-ARIAの相性は抜群です。Reactユーザーがほんの少しWAI-ARIAの理解が進めば、簡単に利用できるでしょう。この記事によって、音声読み上げを求めているエンドユーザーへの配慮が少しでも進めばと考えています。この方法はAngularやVue.jsでも実装できます。詳しくは次の記事を参照ください。記事を作成するにあたり複数のサンプルを用意して音声読み上げソフト(macOSの「VoiceOver」や「NVDA日本語版」)で検証しました。平成31年4月17日に内容をメンテナンスしています。