Chromeの安定版151が7月28日に公開された。大型の目玉機能というより細かい追加が並ぶ回だったが、そのなかにaria-actionsという属性が入っていて、これは現場の作り方に素直に馴染みそうだと感じた。ある要素に付き添っている別の操作ボタンの存在を、スクリーンリーダーなどの支援技術に伝えるための指定である。Chromeのリリースノートによると、W3CのARIA仕様に沿った形で実装されたとされている。

想定されている典型例は、タブの見出しに小さく付いている閉じるボタンだ。マウスで操作していれば見えているので迷わないが、キーボードと読み上げでたどっている人には、そのタブに閉じる手段が添えられていること自体が伝わりにくい。メールの一覧行に並ぶアーカイブや削除のボタン、カード型のリストに乗った編集ボタンなども同じ構図になる。主となる要素と、その脇に置かれた操作との関係を機械が読み取る手がかりがなく、支援技術の側から見つけづらいことは、以前から課題として挙げられていた部分だ。近くにボタンが置いてあることは、画面上の距離では明らかでも、読み上げの順番のなかでは伝わらない。結果として、タブ移動を重ねて偶然行き当たるまで存在に気づけない、という状態が起きていた。

既存のマークアップを壊さずに足せる

使い方は他のARIA属性と似ていて、主となる要素から、関連するボタンのidを指すだけでよい。属性を足しても見た目やクリックの挙動は変わらず、対応していないブラウザは単に無視する。既存のコンポーネントに後から付け足す形で試せるので、導入の判断はしやすい。開発者ツール側でも、他のid参照型のARIA属性と同じように、参照先がどの要素を指しているかを確認できるようになっている。W3C側の仕様もほぼ固まっており、Firefoxはすでに対応済み、WebKitは試作の段階と伝えられている。ChromeはまずWindows、Mac、Linuxのデスクトップで有効になり、モバイル向けは後続になるとのことだ。

もっとも、属性を書けばすぐ読み上げが変わるという話ではない。支援技術の側がこの関係をどう利用者に案内するかは、各社の実装がこれから揃っていく段階にある。ただMicrosoftのUI部品群を手がけるチームが早い時期の取り込みに前向きだと伝えられており、部品ライブラリ経由で静かに広まっていく類の機能ではありそうだ。自前でタブやリストのUIを組んでいるなら、仕様の様子を眺めておく価値はある。

中小企業のサイトでも、同じ形はあちこちにある。予約フォームの入力欄に添えたクリアボタン、実績一覧のカードに置いた詳細ボタン、通知バーの右端にある閉じる印。どれも見えている人には自明で、見えていない人には気づきにくい。ARIAは足しすぎるとかえって読み上げを濁らせるので万能ではないが、これまで説明のしようがなかった関係を素直に書ける手段が増えたのは、地味ながらありがたい変化だと思う。