<ins>, <del> 要素のアクセシビリティオブジェクト対応が進む

公開日:

文書の追加、削除を示す <ins>, <del> 要素は、新聞、TVなどの従来型メディアと比べて、いくらでもアップデートが可能なウェブならではの特性を活かせる要素と言えますが、これまで積極的に使用するメリットを見出せませんでした。

その理由の一つとして、多くのブラウザが専用のアクセシビリティオブジェクトに対応していなかったという事情が挙げられまして、

<p>ほげほげ<ins cite="https://example.com/update20180919" datetime="2018-09-19">追加テキスト</ins>ほげほげ</p>

と書いても、あくまで「追加テキスト」の部分はただのテキスト扱い、すなわち以下と同義でした。

<p>ほげほげ<span style="text-decoration: underline">追加テキスト</span>ほげほげ</p>

ところが今では Chrome はすでに対応、 Firefox も10月リリース予定のバージョン63で対応するようです。

スクリーンリーダー側の対応も進んでいて、例えば NVDA では9月にリリースされたバージョン2018.3で対応されました。

Chrome 69 + NVDA 2018.3jp または Firefox 63.0b7 + NVDA 2018.3jp で試してみると、 <ins>追加テキスト</ins> は「追加マークあり 追加テキスト」、 <del>削除テキスト</del> は「削除マークあり 削除テキスト」と読み上げられます。

ちなみに、 cite 属性と datetime 属性は読み上げられませんが[1]、HTML仕様書にはこんな記述があります。

The cite attribute may be used to specify the URL of a document that explains the change.

(中略)

User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site's edits), not for readers.

cite属性は、変更を説明する文書のURLを指定するために使用してもよい。

(中略)

ユーザーエージェントは、ユーザーがそのような引用のリンクをたどることを可能にしてもよいが、これは主に読者のためでなく、(サイトの編集に関する統計を収集するサーバーサイドスクリプトによってなど)私的使用のために意図される。

The datetime attribute may be used to specify the time and date of the change.

(中略)

This value may be shown to the user, but it is primarily intended for private use.

datetime属性は、変更の日付と時刻を指定するために使用してもよい。

(中略)

この値はユーザーに示してもよいが、値は主に私的使用のために意図される。

それらがユーザーにとって認識されうるべき情報であるなら、 <a> 要素や <time> 要素などを使い、画面上に見える形で情報提供するのが良いというでしょう。

  • [1]読み上げられる環境もあります。手元の環境で確認できた範囲では、 iOS 12 で VoiceOver をオンにすると 、<ins datetime="2018-09-19">追加テキスト</ins> は「追加テキスト 2018年9月19日」と読み上げられました。