ロールの復習と重要性
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ゆみこ：本日のテーマは、WAI-ARIA解説シリーズPart3「ステートとプロパティについて」です。
みあ：前回はロールについて解説しましたが、WAI-ARIAの解説ではロール、ステート、プロパティがセットになって出てくることが多くあります。
そこで、今回はWAI-ARIAの重要な要素である「ステートとプロパティ」について詳しく解説していきます。
ゆみこ：はい、お願いします。
みあ：まず、ロールについて簡単におさらいしておきましょう。
ロールというのは、HTML要素に役割を与えることができるもので、
例えばdiv要素にbuttonロールを付けると「これはボタン」だと支援技術に伝えることができるというものです。
より詳しい説明や種類については、前回・前々回で解説しましたね。
ゆみこ：はい、そうですね。
みあ：今回詳しく紹介するステートとプロパティは、このロールと並ぶ重要なものです。
ゆみこ：そうなんですね。たしかに、WAI-ARIAについて学ぶとき、ロールの他にステートとプロパティというものがよく登場しますね。
みあ：そうですよね。ロール、ステート、プロパティというのはそれぞれ役割や使われる場面が分かれており、WAI-ARIAの基本になっています。
ゆみこ：ステートとプロパティについては、第42回で少しだけ出てきましたよね。
ステートが状態を定義するもので、プロパティが特性を定義するものという説明だったと思います。
みあ：はい、その通りです。ステートは「今どうなっているか」という状態を示します。
例えば、開いているか閉じているかといった状態です。
そして、プロパティは「どんな特性があるか」を示します。
例えば、それが必須か任意かなどです。
ここでのポイントは、「ステートやプロパティはHTML要素自体ではなく、そのロールに意味を与える」という考え方です。
ゆみこ：そういえば、「HTML要素に役割を定義するロールを付け、そのロールに状態や特性を示すステートやプロパティを付ける」という説明が第42回でもありましたね。
これが重要なポイントなんでしょうか？
みあ：はい、そうなんです。ロールごとに使用できるARIA属性が決まっているため、この考え方が重要と言われています。
例えば、div要素にcheckboxロールをつけた場合、この要素は「チェックボックス」という役割を持ちます。
このcheckboxロールにaria-checkedというARIA属性を付け、値をtrueにすることで、「このチェックボックスは、今チェックされている状態です」と伝えることができます。
ゆみこ：なるほど。ここでロールがcheckboxのようにaria-checkedを使用できるロールになっていなければ、aria-checkedを付けても意味がないということですね。
ロールがあって初めてステートやプロパティが意味を持つんですね。
ステートの詳細
みあ：その通りです。それでは、ステートについて、さらに詳しく見ていきましょう。
先ほどもお話ししたように、ステートは「要素の状態」をリアルタイムで伝えるものです。ユーザーの操作によって変化するのが特徴です。
ゆみこ：具体的には、どんなものがありますか？
みあ：例えば、チェックボックスがチェックされているかどうかを示すaria-checked、タブなどが選択されているかどうかを示すaria-selected、
入力欄の入力内容が無効かどうかを示すaria-invalidなどがあります。
このようなステートは、ユーザーインターフェースコンポーネントが変化したときに、スクリーンリーダーなどにその変化を伝える重要な手がかりになります。
ただし、すべてが自動的に変わるわけではなく、多くの場合はJavaScriptを使用して値を変更する必要があります。
たとえば、「フォームの検証結果に基づいてJavaScriptでaria-invalidの値を書き換える」といった感じですね。
ゆみこ：んー、なるほど。ステートはユーザーが操作して状態が変わるものに使うんですね。
ただし、JavaScriptなどで書き換える必要があるということですね。
リアルタイムで状態を知ることができるのは、支援技術ユーザーにとってかなり重要になりそうです。
みあ：そうですよね。
続いてプロパティについてですが、こちらは「この要素にはこういう特性がある」という、比較的変化しにくい情報を伝えます。
具体例としては、入力が必須であるかどうかを示すaria-requiredや、要素とラベルの関係を示すaria-labelledby、要素と説明文の関係を示すaria-describedbyなどがあります。
プロパティはステートと違って、ページ読み込み時から決まっていることが多く、ユーザーの操作で変わることは少ないです。
ゆみこ：なるほど。ページ読み込み時から決まっていることが多く、ユーザーの操作で変化しにくいのがプロパティなんですね。
みあ：はい、その通りです。
それでは、実際の使い方をいくつか見ていきましょう。
まずはステートの例として、div要素でチェックボックスを作る場合を考えてみましょう。
この場合、はじめにdiv要素にcheckboxロールを設定し、支援技術にチェックボックスであることが伝わるようにします。
そして、aria-checkedというステートを付けます。値がtrueならチェックされている、falseならチェックされていない状態です。
ゆみこ：aria-checkedをtrueにした場合、この要素はチェックされているチェックボックスだと支援技術に伝わるようになるんですね。
aria-checkedがfalseなら、チェックされていないチェックボックスだということですね。
みあ：その通りです。ただし、これはあくまでdiv要素でチェックボックスを作るときに、aria-checkedを使用してチェック状態を支援技術に伝えるようにする方法です。
これまでにもお伝えしていますが、基本的にはセマンティックHTMLでのマークアップを優先すべきですから、
どうしてもという場合以外は、input要素のtype属性をcheckboxに設定して、チェックボックスを制作した方がよいと思います。
ゆみこ：その場合、ロールやARIA属性はどうしたらよいんでしょうか？
みあ：input要素はtype属性に設定するものによって暗黙のロールが設定されます。
type属性をcheckboxにした場合、その要素はcheckboxロールになるので、ロールの付与は不要です。
また、支援技術にも状態が伝わるようになっているので、aria-checkedも不要です。
ゆみこ：なるほど。ここでもセマンティックHTMLが重要なんですね。
みあ：そうなんです。次に、プロパティの例として、フォームに必須入力欄がある場合を考えてみましょう。
この場合、type属性がtextとなっているinput要素に、aria-requiredを設定します。
そして、値はtrueとします。これで、「この入力欄は必須です」とスクリーンリーダーなどが伝えてくれるようになります。
ゆみこ：これも先ほどの例と同じで、type属性がtextとなっているinput要素は、暗黙のロールがtextboxロールになるので、ロールは設定しなくてよいということでしょうか？
みあ：はい、その通りです！
ゆみこ：なるほど。以前からセマンティックHTMLは大切だと感じていましたが、WAI-ARIAとも深い関わりがあるんですね。
それから、ステートやプロパティはロールが前提となっているというのも、少し分かってきました。
みあ：おっ、それはよかったです！ステートやプロパティはロールとセットで考えることが非常に大切です。
たとえば、aria-checkedはcheckboxロールやradioロールなどと一緒に使わないと意味がありません。
特に、div要素などをカスタマイズして、独自のチェックボックスやラジオボタンを作るような場合には注意が必要です。
ゆみこ：なるほど。ステートやプロパティを設定する上で、他に注意することはありますか？
みあ：そうですね。まず、必要以上に属性を付けすぎないことが大切です。意味のない属性をつけると、かえって混乱を招くことがあります。
それから、ブラウザや支援技術による違いにも注意が必要です。環境によってサポート状況が異なるため、
可能なら実際にスクリーンリーダーなどを使用して、動作を確認した方がよいと思います。
ゆみこ：はい。本日のテーマは、WAI-ARIA解説シリーズPart3「ステートとプロパティについて」でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、エックス（旧Twitter）で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方やご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに！
