Ensure every id attribute value used in ARIA and in labels is unique
This rule checks that all `id` attribute values on a single page are unique.
Autoren: Anne Thyme Nørregaard, Bryn Anderson
Finanzierung: WAI-Tools
This rule applies to any id attribute whose value is not an empty string (""), specified on a HTML or SVG element.
Note: Elements that are neither included in the accessibility tree nor visible are still considered for this rule.
The value of the attribute is unique across all other id attributes specified on HTML or SVG elements that exist within the same document tree or shadow tree as the element on which the applicable id attribute is specified.
There are no assumptions.
There are no accessibility support issues known.
There is only one id attribute within the document context.
<div id="my-div">This is my first element</div>
All id attributes are unique within the document context.
<div id="my-div1">This is my first element</div>
<div id="my-div2">This is my second element</div>
<svg id="my-div3">This is my third element</svg>
Two of the id attributes are the same (my-elt), but they are in different trees (the first one in the document tree and the second in the shadow tree).
<div id="my-elt"></div>
<div id="host"></div>
<script>
var host = document.getElementById('host')
var shadow = host.attachShadow({ mode: 'open' })
shadow.innerHTML = '<b id="my-elt"></b>'
</script>
Both id attributes are the same (my-elt), but they are in different document trees because the iframe is creating a new one.
<div id="my-elt"></div>
<iframe title="Empty frame" srcdoc="<span id='my-elt'></span>"></iframe>
The id attribute label is not unique among all id attributes in the document, resulting in a wrong programmatic label on the input field.
<div id="label">Name</div>
<div id="label">City</div>
<input aria-labelledby="label" type="text" name="city" />
The id attribute label is not unique among all id attributes in the document, resulting in a wrong programmatic label on the input field.
<div id="label">Name</div>
<svg id="label">
<text x="0" y="15">City</text>
</svg>
<input aria-labelledby="label" type="text" name="city" />
The id attribute label is not unique among all id attributes in the document, resulting in a wrong programmatic label on the input field. This rule still considers elements that are neither included in the accessibility tree nor visible.
<span id="label" style="display: none;">Name</span>
<span id="label">City</span>
<input aria-labelledby="label" type="text" name="city" />
There is no id attribute in this document.
<div>This is my first element</div>
The xml:id attribute is not considered by this rule.
<div xml:id="my-div">This is my first element</div>
These id attributes have an empty value.
<span id="">Hello</span> <span id="">world!</span>