<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で対応するようです。
- 903187 - implement accessibility of HTML ins and del elements(
bugzilla.mozilla.org
)
スクリーンリーダー側の対応も進んでいて、例えば NVDA では9月にリリースされたバージョン2018.3で対応されました。
Chrome 69 + NVDA 2018.3jp または Firefox 63.0b7 + NVDA 2018.3jp で試してみると、 <ins>追加テキスト</ins>
は「追加マークあり 追加テキスト」、 <del>削除テキスト</del>
は「削除マークあり 削除テキスト」と読み上げられます。
ちなみに、cite
属性と datetime
属性は読み上げられませんが[1]、HTML仕様書にはこんな記述があります。
それらがユーザーにとって認識されうるべき情報であるなら、 <a>
要素や <time>
要素などを使い、画面上に見える形で情報提供するのが良いというでしょう。
脚注
-
1.
読み上げられる環境もあります。手元の環境で確認できた範囲では、 iOS 12 で VoiceOver をオンにすると 、
<ins datetime="2018-09-19">追加テキスト</ins>
は「追加テキスト 2018年9月19日」と読み上げられました。 ↩ 戻る