Accessible Name and Description Computation 1.2 を読む
目次
この記事は アクセシビリティ Advent Calendar 2024 - Adventar の 14 日目の記事です。
この記事は他サイトから移行したものです。
こんにちは、フロントエンドエンジニアの mehm8128 です。 前に Zenn Scrap で調査した、Accessible Name and Description Computation 1.2 の内容を改めて記事としてまとめます。
1 人アドベントカレンダーもやっているのでそちらもよろしくお願いします。 https://qiita.com/advent-calendar/2024/react-aria
Accessible Name and Description Computation とは #
Accessible Name and Description Computation とは、user agent が accessible name や accessible description をどのように計算するかを定義しているドキュメントです。
とある文脈でそれらの計算方法が知りたくなったので調べていたら、このドキュメントに辿りついたので読んでいました。
内容としては主に以下の 4 つです。
- 用語の定義
- accessible name の計算方法
- accessible description の計算方法
- text alternative の計算方法
なお、text alternative とは accessible name と accessible description の両方の計算で使用される、各 HTML 要素に対して計算される文字列のことです。
現在は 2018 年に publish された 1.1 が Recommendation ですが、1.2 が Working Draft として出ていて 2024 年現在も更新中なので、1.1 と 1.2 の間で主に何が更新されているのかを見ていきます。
1.2 での主な変更点 #
変更点はここにまとめられています。
6.1.1 Substantive changes since the last public working draft
僕が気になったものを 3 つ紹介します。
Support aria-description #
Support aria-description by aleventhal · Pull Request #69 · w3c/accname
1.1 では 4.2 Description Computation (1.1) でaria-describedbyが参照する要素の text alternative のみが accessible description になるような説明になっていました。
しかし、
- WAI-ARIA 1.3 で
aria-descriptionが追加された title属性、テーブルのcaption要素、input要素のtypeによってはvalueなども考慮される
などaria-describedby以外のものも考慮されるので、それらを踏まえてどのような優先度で accessible description が計算されるのかが表形式でまとめられています。
4.2 Description Computation (1.2)
ここで、1.1 と 1.2 での accessible name と accessible description の計算方法及びそれらと text alternative の関係についてまとめます。
| name | description | |
|---|---|---|
| 1.1 | その要素の text alternative | aria-describedbyが参照する要素の text alternative |
| 1.2 | その要素の text alternative | 下記の表を上から順に計算。適用できなかったら 1 つ下の行の計算をしていく |
ついでに 1.2 で追加された accessible description の計算方法の表も翻訳＆簡略化して載せておきます（下 2 つはおそらく HTML に限らない説明になっていましたが、分かりやすく HTML の例で書きます）。
| 属性 | 計算方法 |
|---|---|
aria-describedby | 参照している要素の accessible name を計算し、スペース区切り |
aria-description | 指定した文字列をそのまま採用 |
HTML 要素やその属性（inputのvalue、テーブルのcaptionなど） | text alternative か、指定した文字列をそのまま採用 |
title属性 | 指定した文字列をそのまま採用 |
suggested simplification #
suggested simplification by MelSumner · Pull Request #122 · w3c/accname
4.3 Accessible Name and Description Computation (1.1) で説明されていた text alternative の計算ステップの順番が変更されたことにより、説明が簡素化＆バグも修正されました（4.3.2 Computation steps (1.2)）。
add name from prohibited #
add name from prohibited by billybonks · Pull Request #71 · w3c/accname
WAI-ARIA role にはそれぞれ nameFromというプロパティがあり、accessible name がどこから計算されることができるかが決まっています。
5.2.8 Accessible Name Calculation - WAI-ARIA 1.2
nameFromの種類は以下の 3 つです。
| 種類 | 説明 |
|---|---|
author | aria-labelやaria-labelledbyなどから計算されることができる |
contents | 子要素などから計算されることができる |
prohibited | accessible name をつけることができない |
1.1 では text alternative の計算方法にprohibitedについての記述がなかったのですが、1.2 で追加されていたのでprohibitedについての説明も追加されました。
例えば button role だと Accessible Rich Internet Applications (WAI-ARIA) 1.2 を見てみると、表のName Fromの行にcontents, authorとあるので、aria-labelなどを用いて accessible name を指定するか、子要素から計算されることができます。ただし、authorの方が優先されるのでaria-labelなどが与えられていない場合のみにcontentsが採用されます。
計算ステップの詳細 #
text alternative の計算ステップについてまとめます。 と思ったのですが、上手くまとめられなかったので省略します…。
おまけ #
React Aria のソースコード上でも参照されていました。
uhyo さんの記事でも参照されました。 https://zenn.dev/uhyo/articles/aria-label-and-labelledby#%E4%BB%95%E6%A7%98%E6%9B%B8%E3%81%A7%E7%A2%BA%E3%81%8B%E3%82%81%E3%82%8B
まとめ #
accessible name などの計算方法はもちろんですが、nameFromという概念も知らなかったので知ることができてよかったです。
ちょうど最近「caption要素には accessible name をつけられない」みたいな話が出ている issue を見たのですが、どれだか忘れてしまいました…。
それでは、明日以降もアクセシビリティ Advent Calendar 2024 - Adventarをよろしくお願いします。 また、アクセシビリティ - Qiita Advent Calendar 2024 - Qiita もあります。僕は数日前に出した 2024 年の a11y まとめ記事を、もう少し中身増やしたり増やさなかったりして登録します。こちらもよろしくお願いします！