ARIA: comment 角色
comment 角色在語義上表示對頁面上某個內容,或對先前評論的評論/反應。
注意: comment 角色是在 WAI-ARIA 1.3 中提議的(最新 ARIA 草案),目前仍在起草中。
示例
在下面的示例中,我們有一個被評論過的文件部分。被評論的部分使用 <span role="mark"> 標記。
相關的評論使用一個包裹在 <div> 中的 HTML 結構來標記,該 <div> 包含 role="comment"。
html
<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="2019-03-30T19:29">March 30 2019, 19:29</time></p>
</div>
為了將評論與被評論的文字關聯起來,我們需要將被評論的文字包裹在一個包含 aria-details 屬性的元素中,該屬性的值應該是評論的 ID。
多個評論
由於 aria-details 現在可以接受多個 ID,我們可以將多個評論與同一個註釋關聯起來,如下所示:
html
<p>
The last half of the song is a slow-rising crescendo that peaks at the
<mark aria-details="thread-1 thread-2">end of the guitar solo</mark>, 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="2019-03-30T19:29">March 30 2019, 19:29</time></p>
</div>
<div role="comment" id="thread-2" data-author="chris">
<h3>Marcus said</h3>
<p class="comment-text">
The guitar solo could do with a touch more chorus, and a slightly lower
volume.
</p>
<p><time datetime="2019-03-29T15:35">March 29 2019, 15:35</time></p>
</div>
巢狀評論
可以將評論巢狀在彼此內部,如下所示:
html
<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="2021-03-30T19:29">March 30 2021, 19:29</time></p>
<div role="comment" data-author="marcus">
<h3>Marcus replied</h3>
<p class="comment-text">
I don't know about that. I think the cowbell could distract from the solo.
</p>
<p><time datetime="2021-03-30T21:02">March 30 2021, 21:02</time></p>
</div>
</div>
可訪問性考慮
無。
規範
將成為 WAI-ARIA 1.3 的一部分,該版本仍在起草中。