ARIA: mark ロール

mark ロールは、参照目的でマーク/ハイライトされたテキストを含む HTML 要素を意味的に示します。これは、HTML の <mark> 要素と意味的に同等です。可能であれば、この要素を代わりに使用するべきです。

mark の使用例は <mark> 要素と全く同じです。これには、引用文内で特別な関心があるがオリジナルのソース資料ではマークされていないテキストのハイライト（印刷記事の文章をハイライトペンでマークするのと同等）、検索機能で見つかったテキストマッチのハイライトなど、ユーザーの現在の活動に関連するコンテンツの部分を示すことが含まれます。

構文ハイライトなどの純粋に装飾的なスタイリングには mark を使用しないでください。

mark 要素にはアクセシブル名を与えるべきではありません。aria-label と aria-labelledby 属性の両方が mark では禁止されています。

以下の例では、コメントが付けられたドキュメントセクションがあります。コメントされたセクションは <span role="mark"> を使ってマークアップされています。

<p>
  The last half of the song is a slow-rising crescendo that peaks at the
  <span role="mark" aria-details="thread-1">end of the guitar solo</span>,
  before fading away sharply.
</p>

<div role="comment" id="thread-1" data-author="chris">
  <h3>Chris said</h3>
  <p class="comment-text">I really think this moment could use more cowbell.</p>
  <p><time datetime="2022-03-30T19:29">March 30 2022, 19:29</time></p>
</div>

関連するコメントは、role="comment" を含む <div> でラップされた HTML 構造を使ってマークアップされています。

コメントとコメントされているテキストを関連付けるには、コメントされているテキストを aria-details 属性を含む要素でラップする必要があります。その値はコメントの ID である必要があります。

<mark> 要素を使用すると、ノードが mark ロールを持つことが自動的に伝わります。可能な限り、代わりにそれを使用することを推奨します。

まだ草案段階である WAI-ARIA 1.3 の一部になる予定です。

• HTML <mark> 要素