#43「WAI-ARIA 1.2」

佐竹

皆さん、こんにちは！ミツエーリンクスの佐竹です！ それではミツエーテックラジオを始めていきたいと思います。ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。今回はゲストとしてもんどさんこと、中村さんに来ていただきました！もんどさんよろしくお願いします。

中村

よろしくお願いします。

佐竹

はい。今回なぜもんどさんに来ていただいたかと言いますと、3月28日にWAI-ARIA1.2の勧告案が発行されたんですよね？

中村

はい。勧告案が発行されたときに、ミツエーリンクスのアクセシビリティBlogで「WAI-ARIA 1.2の勧告案が発行」というブログ記事を書かせてもらいました。

佐竹

そうですね。他にもブログで「2019年末に更新されたWAI-ARIA 1.2について」だったり、「WAI-ARIA 1.2の勧告候補が公開されました」というのも書かれていましたよね。

中村

はい。WAI-ARIAについては、何か動きがあったときにアクセシビリティBlogで書かせてもらっています。

佐竹

はい。ということで、テックラジオの方ではもんどさんにBlogでは書ききれなかった内容だったり、ポイントなどを聞かせていただければなーと思っています。

佐竹

はい。ではまずWAI-ARIAを知らない、使ったことがないという方もいらっしゃると思いますので、簡単にWAI-ARIAを説明をしていただいてもいいでしょうか？

中村

はい。まず、WAI-ARIAのWAIというのは、Web Accessibility Initiativeという正式名称で、W3Cの中にあるアクセシビリティを推進していきましょうというグループです。そして、WAI-ARIAのARIAは、Accessible Rich Internet Applicationsの略で、リッチなインターネットアプリケーションをアクセシブルにするというものになります。

佐竹

なるほど。ということは、リッチなインターネットアプリケーションをアクセシブルにするには、ARIAが必要ということなんですか？

中村

そうですね。少し長い説明をしますと、HTMLの要素や属性というものは、もともとの意味を持っています。たとえば、h1要素であれば、見出しレベル1という意味です。また、input要素のrequired属性であれば、入力が必須という意味を持ちます。この意味が支援技術、たとえばスクリーンリーダーに伝わるということになります。ここで、複雑なアプリケーション、例えばタブの場合を考えてみます。タブはいくつかの部品で作られていますが、HTMLだけで意味を表すことは困難です。そこでARIAを使って、どのように役割を持つのかという意味づけをすることで、それがタブの部品だということをスクリーンリーダーに伝えるようにする仕組みになっています。

佐竹

具体的に言うと、タブだったらtablistだったりtabpanelとかのrole属性をつけることで部品としての役割を示すことができて、どのボタンでどのコンテンツを操作するのかを紐づけるために、ボタンの方にaria-controls属性を付けて、コンテンツの方にそのaria-controls属性と同じ値をもつidを付けるといった感じであってますか？

中村

そうですね。そうなります。

佐竹

じゃ、そういう仕組みは存在していますということで、えっと次に気になってくるのが、それをどのくらいの人たちが利用しているのかな？っていうところなんですけど。

中村

はい、そのあたりはWeb AlmanacというHTTP Archiveの年次報告書に統計があります。Accessibilityの章では、デスクトップページの72％でARIA role属性が少なくとも1つ含まれていて、アクセシブルな名前を提供するaria-label属性はページの58％に含まれているという、2022年のデータがあります。

佐竹

結構な利用率ですね。

中村

そうですね。ARIAは、使い出すとやたらと使ってしまうというのがよくある話であり、そのことが数値に表れているのかもしれません。ここでrole属性のデータを見てみますと、一番よく使用されているのはrole=”button”で33%となっています。知ってのとおり、HTMLにはbutton要素がありますので、普通、わざわざrole属性でbuttonを使う必要はありません。role属性の使い方の1つとして、div要素やspan要素にbuttonの意味を持たせるというパターンが推測されます。ですので、あるべき姿でARIAが設定されているページとなると、もう少し減ってくるのかなと思います。

佐竹

うーん、そうなんですね。ということはARIAを使ってアクセシブルなサイトを作りたいと思っているけど、使い方を試行錯誤されている制作者の方が多いのかなという印象ですね。

佐竹

はい。ではここからはWAI-ARIA 1.2について話していきたんですが、やっぱりいちばん気になるのは何が変わったのかなってところですよね。

中村

そうですよね。バージョンが単純に1.1から1.2になったわけですから、roleの属性値やaria属性も増えていますね。

佐竹

うん。あの、前々からrole属性とかのARIAが追加になることで疑問だった事がありまして、折角なのでちょっと教えていただきたいんですけど、今回追加になったARIAもそうですけど、既に同じ意味のものがHTML要素として存在していますよね？

中村

そうですね。確かに、存在しています。

佐竹

で、先程もbuttonの例でお話があったように実装するときって、HTML要素とARIAで同じ意味のものがあったら、ARIAではなくってHTML要素のほうを使うわけじゃないですか。で、なのに、同じ意味のARIAが後から追加になるのって、なんでなんですかね。

中村

なるほど。それはですね、WAI-ARIAの仕様を作っているARIA Working Groupがロードマップというものを出しています。そこでは「ホスト言語のセマンティクスとの同等性を実現する」、つまりHTMLで表現されている意味をまだARIAで全部表現できていないので、まずHTMLの持つ意味をARIAで表現できるようにしましょうという目標があるからです。

佐竹

そうなんですね。でも、目標だとしてもやっぱり同じ意味のものを作る必要ってあるんですか？

中村

確かに、制作者にとっては意味がないように見えるかもしれないですね。どうしてそんなことをしてるのかですけども、ARIAの言葉を持つということは、支援技術に意味を伝える言葉ができあがるということになります。具体的には、スクリーンリーダーがARIAの言葉を解釈して読み上げてくれるようになります。つまり、機械に意味を伝えるための土台を作っている。そのように捉えてもらえればいいのかなと思います。

佐竹

あ、なるほど。ARIAが言葉を持つことで支援技術に伝わるようになる。だから、HTMLの意味を支援技術に伝えるために、その間にARIAを追加するというわけなんですね！あ、やっと納得しました！

中村

HTMLがARIAを進化させているというところが面白いですよね。

佐竹

うん、そうですね。ありがとうございます。では他にWAI-ARIA 1.2で変わったことってありますか？

中村

IDL属性が定義されたので、JavaScriptで値を取得するというのが楽になるというのがありますね。

佐竹

ということはgetAttributeメソッドだったり、setAttributeメソッドで属性の値を取得したり設定したりする方法の他に、例えばaria-expandedだったら、element.ariaExpandedという感じでプロパティで値を取得したり、設定したりすることができるようになったっていうことですよね。

中村

そうですね。ただ、仕様で定義されることと、ブラウザが実装しているかは別物になってきますので、ブラウザのサポート状況を確認して使っていきたいですね。

佐竹

はい。現時点だとIDL属性はFirefoxの対応がまだのようですね。使用方法など、詳しくはフロントエンドBlogの「あのWAI-ARIAがIDL属性として実装される！？」という記事がありますので、もし興味のある方は見てみてください。

中村

それから、変更になったところでいうと、comboboxロールというものがあります。仕様では、「ARIA 1.1のcombobox仕様に従うcomboboxは、もはやARIA仕様に適合しない」とわざわざと書いてあるほど、以前の仕様から変わっています。

佐竹

え、そんな注意書きが書いてあるなんてびっくりしますね。comboboxって、ネイティブのHTMLのセレクトボックスに見た目とか機能が似ているものでしたよね。具体的に、どういったことが変更になったんですか？

中村

具体的には、input要素のコンテナ、つまり、input要素の親要素にcomboboxロールを付けるというマークアップだったのですが、今ではinput要素自身にcomboboxロールを付けるというマークアップになっています。

佐竹

なるほど、comboboxロールを付ける要素が変わったということですね。でも実際に実装する時ってこういったARIAの変更点含めて把握してマークアップするのって結構忘れてしまったりすることもあるし難しいですよね。

中村

もし実装に迷う時はARIA Authoring Practices GuideのDesign Patterns and Examplesに標準的な実装方法が載っていますので、参考にしてみるとよいと思います。

佐竹

標準的な実装方法の例があるのは助かりますね！

佐竹

はい。今日はもんどさんに来ていただきましたが、先日イベントでももんどさんスピーカーとして登壇されたんですよね？

中村

はい。「【SmartHR×ミツエーリンクス】アクセシビリティスペシャリストのキャリアってどんな感じ？」というイベントを開催しました。アクセシビリティBlogでも参加レポートを公開する予定ですので、参加できた方も、できなかった方も楽しみにしていただければと思います。

佐竹

Blog記事も公開予定なんですね！楽しみです。

佐竹

最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。

また、このPodcastはApple Podcast、Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。 それでは今日はこの辺で！ありがとうございました！

中村

ありがとうございましたー！