html - aria-controls requires id, id must be document-unique, how to write templates? - Stack Overflow

admin管理员组

文章数量:1333479

Let's take a look at the W3 ARIA toolbar example:

<div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="textarea1">…</div>
…
<textarea id="textarea1" rows="20" cols="80" style="font-family: sans-serif">…</textarea>

aria-controls of the toolbar refers to a textarea using id.

Though I heard that id must be unique in its parent element only now, according to MDN it still “must be unique in the whole document”.

OK, but how to make a template of a widget, consisting of an area and its toolbar then?

An obvious solution is generating pointless id values every time I instantiate the template, just for referencing sake:

<template class="text-editor">
    <div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="{textarea-id}">…</div>
    …
    <textarea id="{textarea-id}" rows="20" cols="80" style="font-family: sans-serif">
</template>

Maybe, there is a better way?

Let's take a look at the W3 ARIA toolbar example:

<div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="textarea1">…</div>
…
<textarea id="textarea1" rows="20" cols="80" style="font-family: sans-serif">…</textarea>

aria-controls of the toolbar refers to a textarea using id.

Though I heard that id must be unique in its parent element only now, according to MDN it still “must be unique in the whole document”.

OK, but how to make a template of a widget, consisting of an area and its toolbar then?

An obvious solution is generating pointless id values every time I instantiate the template, just for referencing sake:

<template class="text-editor">
    <div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="{textarea-id}">…</div>
    …
    <textarea id="{textarea-id}" rows="20" cols="80" style="font-family: sans-serif">
</template>

Maybe, there is a better way?

• html
• accessibility
• wai-aria

Share Improve this question Follow asked Nov 20, 2024 at 18:27 ShtoleShtole 34822 silver badges1515 bronze badges 8

• yep, not only are ids required to be unique but only the first one counts. id has always been only one per page. so, just use classes to avoid and/or be sure to have unique ids where you use them. – admcfajn Commented Nov 20, 2024 at 21:16
• Hello @admcfajn, have you really read the question? Using id is required by aria-controls specification. – Shtole Commented Nov 20, 2024 at 22:37
• if you have 2 text area us 2 id. <textarea id="teaxtarea-01"> ... <textarea id="teaxtarea-02">. You state that "Though I heard that id must be unique in its parent element only now"... That is untrue. Each id in the document must be unique. consider: <script>alert(document.getElementById('num1'). innerHTML)</script><div id="num1">001</div><div id="num1">002</div>. I would expect 001, not 002. How to accomplish would be to reference index of element in the dom + or a pre or suffix, or reference another suitable unique id. – admcfajn Commented Nov 21, 2024 at 2:21
• I invite you to be clearer what is your problem exactly. Yes, ID must be unique and all ARIA attributes referencing an ID must point to something unique, but it has never been any big problem for template generators or scripts. Those ID are never shown to the user normally, so you can pick whatever technical automatically constructed name you like. – QuentinC Commented Nov 21, 2024 at 5:10
• @QuentinC, @admcfajn The problem is I don't really need ids for anything, but the ARIA accessibility technology. And I'd like to keep my code id-free. The id attribute is the infamous “Singleton” pattern, applied to HTML, especially in templates. So I'm looking for a way to avoid using ids, but still be friendly for users with screen readers. – Shtole Commented Nov 21, 2024 at 13:06

 |  Show 3 more comments

1 Answer 1

Sorted by: Reset to default 0

Right now my best approach is the following. I just added variables to a template instantiating code. One of them is {autoid}:

<template class="text-editor">
    <div class="format" role="toolbar" aria-label="Text Formatting"
     aria-controls="{autoid}">…</div>
    …
    <textarea id="{autoid}" rows="20" cols="80" style="font-family: sans-serif">
</template>

Then I replace {autoid} with a result of crypto.randomUUID() call.

This technique lets me have multiple instances of the template and keep id uniqueness.

本文标签：