WAI-ARIAの基礎
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するユミコです。よろしくお願いします。
ミヤです。よろしくお願いします。
本日から、WAI-ARIA解説シリーズに入ります。
パート1の今回は、WAI-ARIAの基礎についてやっていきます。
はい。WCAG 2.0解説シリーズを通して、原則やガイドライン、達成基準について一通り学びました。
次のステップとして、実務で達成基準を満たす実装ができるようになるといいですよね。
そのためには、WAI-ARIAについての知識が必要不可欠なんです。
WAI-ARIA、何度か耳にしたことはありますが、どんなものなのかいまいち理解できていません。
そうですね。WAI-ARIAは一見すると難しいものに見えるかもしれません。
ただ、この使い方がわかると、少し複雑なウェブサイトでもアクセシビリティを高めることができます。
ですから、このシリーズを通してWAI-ARIAに興味を持ってもらえたらと思います。
はい。それではまずは、基本から教えてください。WAI-ARIAとはどんなものなのでしょうか。
WAI-ARIAは、ウェブ Accessibility Initiative Accessible Rich Internet Applicationsの略で、W3Cが定めたアクセシビリティ向上のための仕様のことです。
W3Cは、ウェブの標準を定めている団体ですよね。
そのW3Cが定めたウェブアクセシビリティ向上のための仕様がWAI-ARIAなんですね。
これまでに、セマンティックHTMLで製作するとアクセシビリティが向上するというお話がありましたよね。
セマンティックHTMLだけで達成基準を満たすのは難しいのでしょうか。
確かにセマンティックHTMLはとっても重要です。
ですが、現在のウェブサイトは複雑化していて、JavaScriptなどを使用した動的なコンテンツ更新が一般的になっています。
このようなコンテンツでは、HTMLだけで十分なアクセシビリティが確保できないことがあるため、WAI-ARIAが必要になるんです。
なるほど。HTMLだけではアクセシビリティが確保できない場合があるんですね。
それでは、WAI-ARIAを使用するとどのようなことができるのでしょうか。
通常のHTMLでは伝えられないボタンやメニューの動作、フォームのエラーメッセージ、リアルタイムで更新される情報などを支援技術に適切に伝えることができます。
そして、それが支援技術を使用しているユーザーに伝わり、アクセシビリティの向上につながるんです。
HTMLだけでは足りない部分をWAI-ARIAで補うことでアクセシビリティが向上するんですね。
はい、その通りです。
使い方としては、リンクやフォームといったユーザーインターフェースコンポーネントにロールやステート、プロパティを定義します。
そうすることで、支援技術がそれらを適切に解釈し、ユーザーに情報を伝えられるようになるんです。
今出てきたロール、ステート、プロパティとは何ですか?
WAI-ARIAにおいて要素に意味を持たせるもののことです。
まず、役割を定義するロールがあります。
ロールの例としては、ボタンロールやナビゲーションロールといったものがあります。
このロールを定義することで、これはボタンですよ、これはナビゲーションですよと支援技術に伝えることができるんです。
それから、要素に定義したロールに対して、状態を定義するステートや特性を定義するプロパティをつけることができます。
ステートやプロパティの例としては、チェックボックスがチェックされているかどうかを示すARIAチェックドや、フォームの必須項目であることを示すARIAリクワイヤードなどがあります。
なるほど。まず、要素に役割を定義するロールをつけるんですね。
注意点
そして、そのロールに状態を定義するステートや特性を定義するプロパティをつけることができるんですね。
はい、その通りです。
また、JavaScriptを使用してページの一部が更新される場合も、WAI-ARIAを使用することでスクリーンリーダーに変更を伝えることができます。
WAI-ARIAを使うと、伝えられる情報の数や種類がぐんと増えるんですね。
そうですね。さらに、WAI-ARIAを使えば、HTML要素では表現しきれない複雑なユーザーインターフェースコンポーネントの情報も伝えることができます。複雑なものの例としては、タブが挙げられますね。
確かに、HTMLにはタブを示す要素はないですよね。
そうなんです。ですが、要素に適切なロールを定義することで、支援技術にそれがタブだと伝わるようになります。これにより、テキストリーダーユーザーなどはコンテンツの構造が把握しやすくなるんですね。
うーん、WAI-ARIAってすごく便利なんですね。
そうなんです。しかし、WAI-ARIAを使用する上で注意が必要なこともあります。
ここでは2つ紹介しますね。
1つ目は、WAI-ARIAに頼り切らず、できるだけHTMLで制作すること。
2つ目は、WAI-ARIAを使いすぎないようにすることです。
注意点があるんですね。まず、できるだけHTMLで制作することとはどういうことでしょうか。
基本的には、WAI-ARIAよりセマンティックHTMLを優先して使用した方がいいんです。
例えば、DIV要素にボタンロールをつけることで、その要素をボタンとすることができます。
ただ、ボタンはボタン要素で実装するのが望ましいです。
なぜなら、ボタン要素を使うことで実現できる全ての機能をボタンロールを定義するだけでは実現できないからです。
ボタンロールを定義しても、JavaScriptやCSSなどでさまざまな対応が必要となるので、最初からボタン要素を使用する方がいいんですね。
なるほど。どのような理由からセマンティックHTMLでの制作を基本とするのが良いんですね。
それでは、WAI-ARIAを使いすぎないようにすることとはどういうことでしょうか。
WAI-ARIAはあくまでHTMLの拡張仕様です。
ですから、HTMLの要素や属性で十分な場合は、WAI-ARIAを使わないようにします。
WAI-ARIAをむやみやたらに使わないことが大切なんですね。
うーん、なるほど。WAI-ARIAを使わない方が良い時の例はありますか。
例えば、A要素を使う時ですね。このA要素にはリンクロールをつけない方がいいんです。
そうなんですか。A要素はリンクを貼る時に使う要素なので、リンクロールをつけるのは問題なさそうに見えるんですが。
これには暗黙のロールというものが関わってきます。
WAI-ARIAには明確に示されていないだけで、最初からロールを持っている要素があるんです。
こういったものは暗黙のロールと呼ばれ、二重にロールをつけるのは避けるべきだとされています。
ああ、なるほど。A要素は最初からリンクロールを持っているので、ロールを設定する必要がないということでしょうか。
はい、その通りです。他にも暗黙のロールを持つ要素はいろいろあるのですが、一部だけ紹介すると、ボタンロールを持つボタン要素、ナビゲーションロールを持つナブ要素などがあります。
たくさんあるんですね。こういった要素は最初からロールを持っているので、わざわざ設定する必要がないということでしょうか。
はい。こういった要素は最初からロールを持っているので、わざわざロールをつける必要がないんですね。
はい、そうなんです。今紹介した2点が、WeiARIAを使用する上で最初に注意が必要な事柄です。
WeiARIAの解説記事などを見ると、アリアなしの方が悪いアリアよりも良いという言葉をたびたび目にします。
WeiARIAはウェブアクセシビリティを向上させる上で重要なものですが、適切に使用しないと、かえってアクセシビリティを損なってしまう可能性があるんです。
ですから慎重にかつ適切に使用することが大切なんですね。
今後もう少し詳しく解説していきますので、このシリーズを通して理解を深めていただければと思います。
はい、本日のテーマはWeiARIA解説シリーズパート1、WeiARIAの基礎でした。
お聞きいただきありがとうございました。
感想をいただけるととっても嬉しいです。
ハッシュタグチャコウェブラジオをつけて、ぜひSNS、XQ Twitterで投稿してください。
また概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方やご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
