ロールの概要と分類
ゆみこ：こんにちは！チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ゆみこ：本日のテーマは、WAI-ARIA解説シリーズPart2「6種類のロールについて」です。
みあ：第1回では、WAI-ARIA全体のイメージや基本的な考え方をお話ししました。
今回はもう少し具体的に、「ロール」に焦点を当てて解説していこうと思います。
ゆみこ：はい、お願いします。
みあ：はい。では初めに、前回少しだけやりましたが、ロールとはどんなものだったか覚えていますか?
ゆみこ：はい、要素の役割を定義するためのものでしたよね。
ロールを使うことで、支援技術に「これはボタン」「これはナビゲーション」と役割を伝えることができるんですよね。
みあ：はい、その通りです。
HTMLだけでは支援技術に伝えきれないウェブページやコンテンツの構造を、WAI-ARIAのロールで補うことでより分かりやすく伝えられるんですね。
ゆみこ：明確に示されていないだけで、最初からロールを持っている暗黙のロールというのも存在するんですよね。
そう考えると、HTML要素とロールの関係性は深いように思うので、ここをしっかり理解したいですね。
みあ：はい。ロールをしっかり理解してもらうと、WAI-ARIAを使っていく上で、それが適切なロールの付け方なのかどうか判断しやすくなると思います。
それでは、ここからはロールの分類についてお話ししたいと思います。
ランドマークロールと文書構造ロール
みあ：ロールには6つのカテゴリーがあります。
それは、ランドマークロール、文書構造ロール、ウィジェットロール、ウィンドウロール、ライブリージョンロール、抽象ロールの6つです。
ゆみこ：うーん、そんなに種類があるんですね。
まず、ランドマークロールについて教えてください。
みあ：はい。ランドマークロールはウェブページ全体の構造を示すロールです。
bannerロール、navigationロールなどがあり、支援技術に対して「ここがページのヘッダー」「ここがナビゲーション」といったように情報を伝えることができます。
また、スクリーンリーダーなどでは、ランドマークロールを使用して、ジャンプ操作で目的の場所に効率的に移動できるようになっています。
HTML要素で十分なこともあるので、暗黙のロールとの兼ね合いに注意する必要があります。
ゆみこ：「ランドマーク」とは目印や象徴になるものを表す言葉ですよね。
ページ全体の構造を理解する上で、目印になるような重要なロールがランドマークロールなんですね。
しかも適切に設定すると、支援技術でジャンプ操作などが行えるようになるんですね。
それでは、文書構造ロールとはどのようなものでしょうか？
みあ：文書構造ロールは、ウェブページ上の文書構造などコンテンツの構造を示すためのロールです。
headingロール、listロールなどがあり、それぞれが見出しなのか、リストなのかといった部分を明確にすることで、支援技術がより正確にコンテンツ構造を把握できるようにするものです。
最新バージョンのHTMLでは、対応する要素が多くあるため、HTML要素で事足りることが多いです。
HTMLに対応するものがないロール、例えばtoolbarロール、tooltipロールのようなものは、支援技術に文書構造を伝える上で大切です。
ゆみこ：ランドマークロールのように、ページ全体ではなく、コンテンツの構造を明確にするためのロールなんですね。
ただ、こちらもランドマークロール同様、HTML要素で表せる場合が多いので、基本はそちらを優先して使うということですね。
ウィジェットロールと動的ロール
ゆみこ：それでは、ウィジェットロールとはどのようなものでしょうか？
みあ：ウィジェットロールとは、ユーザーインターフェースコンポーネントを示すロールです。
例えば、buttonロール、checkboxロールなどがあります。
こちらも最新バージョンのHTMLでは、対応する要素が多くあるため、暗黙のロールに注意する必要があります。
HTMLに対応するものがないロール、例えばtabロール、tabpanelロールのようなものは、支援技術に情報を伝えるために使用されます。
ゆみこ：うーん、なるほど。ウィジェットロールの中でも、フォームコントロールは対応しているHTML要素がたくさんありそうですね。
ですが、タブを表すHTML要素は今のところないので、tabロール、tabpanelロールなどが使えるのはとても便利そうです！
みあ：そうなんですよね。タブパネルを切り替えるタブ部分は、セマンティックなマークアップだとボタン要素で実装することが多いと思います。
そうすると、スクリーンリーダーでは普通のボタンだと認識されるんです。
それが、tabロールを付与しているとタブコントロールとして認識されるので、これはとても便利だと思います。
ゆみこ：うーん、そういう使い方ができるんですね。それでは次に、ウィンドウロールについて教えてください。
みあ：はい。ウィンドウロールは、ブラウザやアプリケーションのウィンドウ、ダイアログといった独立した画面領域を示すためのロールです。
dialogロールや、alertdialogロールがあります。
ダイアログなどが表示されているときに、それが支援技術に伝わるため、支援技術を使用しているユーザーが操作可能範囲を把握しやすくなります。
ゆみこ：HTMLにはダイアログを示す要素がないですし、視覚情報がない場合、突然ダイアログが現れても気づかなかったり混乱したりする可能性がありますよね。
そう考えると、これも重要なロールですね。
それでは次に、ライブリージョンロールとはどのようなものでしょうか？
みあ：ライブリージョンロールは、コンテンツが動的に更新されたときに通知するロールです。
支援技術に即座に伝わるため、ユーザーが更新情報をすぐに知ることができます。
alertロール、statusロールなどがあり、用途に応じて使い分けることが重要です。
ゆみこ：このロールを使えば、テキストリーダーなどの支援技術でもリアルタイムで更新情報を得られるんですね。
それでは最後に、抽象ロールについて教えてください。
みあ：はい。抽象ロールは、ブラウザが文書を整理するために使用するロールです。
他のロールの基礎的な概念を定義するために存在するロールであり、
制作者がHTML要素に直接定義することは想定されていません。
commandロール、rangeロールなどがあります。
ゆみこ：おー、なるほど。ブラウザが使用するもので、制作者が使用するロールではないのですね。
聞き慣れない言葉も多いんですが、どのロールもHTMLの構造を支援技術に分かりやすく伝えたり、
補足するものという理解で大丈夫でしょうか？
みあ：そうですね。基本的にはそんな感じです。
原則として、セマンティックHTMLでマークアップをして、
HTML要素では表せないものがあれば、ロールを付与するようにすれば良いと思います。
ゆみこ：うん、あくまでロールは補足的なものということですね。
みあ：はい、そうなります。ただ、ライブラリを導入しているウェブサイトや、
古いウェブサイトの改修を行う場合には少し事情が異なります。
こういった場合、div要素で制作したボタンなどに遭遇することがあります。
ここでセマンティックに作り変えることができれば一番良いのですが、
状況によっては難しい場合があるんですね。
ゆみこ：たしかに、ページ数の多いサイトで全て作り変えるのは、時間がかかったり、予算的に難しい場合がありますね。
ライブラリの要素を変更してしまうと、動作しなくなったり、表示崩れを引き起こす可能性もありますし。
みあ：そうなんです。ですから、そのような時は、既存の要素にウィジェットロールを適切に付与することが重要になります。
ゆみこ：そうなんですね。ちなみに、よく出てくるロールというのはあるんでしょうか?
みあ：そうですね。例えば、buttonロールがあります。
HTMLにはbutton要素があるので、基本的にはそちらを使うべきなんですが、
やむを得ず、div要素やspan要素でボタンを作るような場合は、buttonロールを設定します。
ゆみこ：そうすると、テキストリーダーにボタンとして認識されるようになるということですね。
みあ：はい、そうなんです。ただし、キーボード操作ができるようにする必要があるので、
CSSやJavaScriptも使って、しっかり対応することが必要となります。
ゆみこ：はい。本日のテーマは、WAI-ARIA解説シリーズPart2「6種類のロールについて」でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、エックス（旧Twitter）で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、
ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに！
