ゆみこ:こんにちは!チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ:みあです。よろしくお願いします。
ゆみこ:本日のテーマは、WAI-ARIA解説シリーズPart4
「WAI-ARIA関連文書の全体像と活用法」です。
みあ:WAI-ARIAの基礎やロール、ステート、プロパティについては、前回までで詳しくやってきましたね。
この先は、実際にWAI-ARIAを使用して、それぞれのコンテンツを実装していきたいと思います。
その際に、公式の文書を確認する場面が出てくると思うので、今回は公式文書について整理しておきましょう。
ゆみこ:WAI-ARIAに関する文書って、いくつもあるんですよね。正直、どれから読めばいいのかがわかりません…。
みあ:うーん、そうですよね…。私もそうだったので、その気持ちはとってもわかります。
ですから、今回は文書の全体像を把握して、必要な時に適切なものを参照できるようになりましょう。
ゆみこ:はい、お願いします。その前に、1つ質問があるんですが、いいでしょうか?
みあ:はい、何でしょうか。
ゆみこ:公式文書を見ていると、WAI-ARIAやARIAという表記がたくさん出てきます。
この2つは同じものなんでしょうか?それとも別物なんでしょうか?
文書やサイトによってWAI-ARIAとなっているものがあったり、ARIAだけのものがあったり、ちょっと混乱してしまいます。
みあ:あー、たしかににその部分はわかりにくいですよね。
結論から言うと、WAI-ARIAとARIAは同じものを指していることが多いです。
ウェブの標準を定めているW3Cという団体の中には、さらにWeb Accessibility Initiativeという団体が存在しています。
この団体を略してWAIと呼びます。
WAIは誰でもウェブにアクセスできるようにアクセシビリティを高めることを目的としており、WCAGの策定もしているんですね。
ゆみこ:これまでWCAGはW3Cが定めているというお話でしたよね。
正確に言うと、W3Cの中のWAIが定めているということでしょうか?
みあ:はい、そうなんです。WAIはW3Cの中の部門の1つといった感じですね。
そしてそのWAIが定めたアクセシビリティ向上のための仕様がARIAなんです。
このARIAというのはこれまでやってきたもののことで、HTMLでは表しきれない部分をロール、ステート、プロパティで表現するもののことです。
つまりWAI-ARIAというのはWAIが定めたARIAという仕様のことなんですね。
ただ、正式な略称がARIAではなくてWAI-ARIAだという点に注意が必要です。
ゆみこ:なるほど。ということは、WAI-ARIAとARIAは団体名がついているかどうかの違いで、両方とも同じ仕様を指し示しているということになりますよね。
みあ:はい、そうなります。
ゆみこ:そうだったんですね。ちょっと整理ができてきました。
みあ:はい。それでは名称について整理できたところで、続いて主要な文書をひとつずつ見ていきましょう。
まず、一番基礎となる文書、「Accessible Rich Internet Applications (WAI-ARIA) 1.2」です。
これがWAI-ARIAと呼ばれる文書ですね。
この文書では、ロールやステート、プロパティをHTMLだけでなく、さまざまなマークアップ言語で使えるように定義しています。
ゆみこ:これこそが、先ほどお話ししていたWAIが定めたARIAという仕様のことですね。
そしてWAI-ARIA自体はHTMLだけのものじゃないんですね。
みあ:はい、実はそうなんです。
「それなら、WAI-ARIAをHTMLで使うときはどうすればいいの?」となるかもしれませんが、これが定義されているのが「ARIA in HTML」という文書です。
「ARIA in HTML」では、HTMLとARIAを一緒に使うときの注意点やルールがまとめられています。
例えば、「このHTML要素にこのロールを付けてはいけない」とか「このHTML要素には最初からこのロールが付いているから、重ねて指定する必要はない」といった感じですね。
ゆみこ:うん。HTMLと一緒にWAI-ARIAを使うとき、その要素に暗黙のロールがついているかどうかを確認する場合は、これを読めばいいんですね。
みあ:はい、そうです。
ゆみこ:ん~。すべて読むとなると、結構時間がかかりそうですよね。
この「WAI-ARIA」や「ARIA in HTML」は、コンテンツ制作時にすべて確認する必要があるのでしょうか?
みあ:基本的に、コンテンツ制作時にすべてを読む必要はないと思います。
「特定のロールについて正確な情報を知りたい」というときなどに、活用するのがいいのではないでしょうか。
実装時に一番確認することになるのは、「ARIA Authoring Practices Guide」だと思います。
これは略してAPGと呼ばれます。
APGはウェブコンテンツ制作者向けの実践ガイドで、「このコンポーネントはこうやって作るといいよ」というのが書かれています。
ゆみこ:APGには具体的な例が載っているということですね。
これはかなり重要そうです。
みあ:はい、そうなんです!
例えば、「アコーディオンをアクセシブルに実装するにはどうしたらいいか」「タブを適切に実装するにはどうしたらいいか」と悩んだときに参考になる、サンプルコードが豊富に掲載されています。
これは実際にコードを書く人にとって、とても役に立つと思います。
ゆみこ:おー!これはコンテンツ制作者にとってすごく参考になりますね。
みあ:そうですよね。また、他にもさまざまな文書があるんです。
たとえば、ブラウザがどうやって情報を支援技術に渡すかを定めた「Core Accessibility API Mappings」、略して「Core-AAM」や、そのHTML版である「HTML Accessibility API Mappings」、略して「HTML-AAM」
それから、あらゆる要素の説明や名前はどのような順番で決まるのかがまとめられた「Accessible Name and Description Computation」などがあります。
この辺りは少し複雑な話になってくるので、とりあえずは名前だけ紹介しておきます。
こういった文書もあるというのを知っておいてもらえればと思います。
ゆみこ:こうやって見ると結構たくさんあるんですね…。
みあ:先ほどもお話ししましたが、すべての文書を最初から読む必要はありませんから安心してください。
もちろんすべて読んだ方が理解は深まると思いますが、必要に応じて参照していけば大丈夫だと思います。
特に、初めてWAI-ARIAに触れる際は、まずWAI-ARIAを読むなどで基礎的な概念やロール、ステート、プロパティについて理解することが大切だと思います。
さらに、実際に使う際に「ARIA in HTML」でHTMLとの関係を確認したり、具体的なコンテンツを作っていく際には、APGのコードを参照していくというのがいいのではないでしょうか。
ゆみこ:うん、そのようにすればいいんですね。WAI-ARIAに関する文書の全体像が少し理解できました。
本日のテーマは、WAI-ARIA解説シリーズPart4「WAI-ARIA関連文書の全体像と活用法」でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、エックス(旧Twitter)で投稿してください。また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方やご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。