id attribute value is unique

  • Rule Type:atomic
  • Rule Id: 3ea0c8
  • Last modified: Jul 07, 2020
  • Accessibility Requirements Mapping:
    • 4.1.1 Parsing (Level: A)
      • Learn More about 4.1.1 (Parsing)
      • Required for conformance to WCAG 2.0 and above on level A and above.
      • Outcome mapping:
        • Any failed outcomes: success criterion is not satisfied.
        • All passed outcomes: success criterion needs further testing.
        • An inapplicable outcome: success criterion needs further testing.
    • H93: Ensuring that id attributes are unique on a Web page
  • Input Aspects:

Description

This rule checks that all id attribute values on a single page are unique.

Applicability

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.

Expectation

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.

Note: Passing this rule is not enough to pass Success Criterion 4.1.1: Parsing, given that, for example, start and end tags can be incomplete without failing this rule.

Assumptions

There are currently no assumptions.

Accessibility Support

There are no major accessibility support issues known for this rule.

Background

Test Cases

Passed

Passed Example 1

Open in a new tab

There is only one id attribute within the document context.

<div id="my-div">This is my first element</div>

Passed Example 2

Open in a new tab

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>

Passed Example 3

Open in a new tab

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>

Passed Example 4

Open in a new tab

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>

Failed

Failed Example 1

Open in a new tab

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" />

Failed Example 2

Open in a new tab

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" />

Failed Example 3

Open in a new tab

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" />

Inapplicable

Inapplicable Example 1

Open in a new tab

There is no id attribute in this document.

<div>This is my first element</div>

Inapplicable Example 2

Open in a new tab

The xml:id attribute is not considered by this rule.

<div xml:id="my-div">This is my first element</div>

Inapplicable Example 3

Open in a new tab

These id attributes have an empty value.

<span id="">Hello</span> <span id="">world!</span>

Glossary

Included in the accessibility tree

Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet the requirements of the individual user.

The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are included in the accessibility tree can be found in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted with using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

Examples for Included in the accessibility tree

Note: The examples presented here are non-normative and not testable. They serve to illustrate some common pitfalls about the definition and to help implementers of ACT rules understand it.

This span element is included in the accessibility tree (by default, elements are included in the accessibility tree).

<span>ACT rules</span>

This span element is not included in the accessibility tree because it is hidden to everybody by the CSS property.

<span style="display:none">ACT rules</span>

This span element is not included in the accessibility tree because it is explicitly removed by the aria-hidden attribute.

<span aria-hidden="true">ACT rules</span>

This span element is positioned off screen, hence is not visible, but is nonetheless included in the accessibility tree.

<span style="position: absolute; top:-9999em">ACT rules</span>

Although the span element with an id of "label" is not itself included in the accessibility tree, it still provides an accessible name to the other span, via the aria-labelledby attribute. Thus, it is still indirectly exposed to users of assistive technologies. Removing an element from the accessibility tree is not enough to remove all accessibility concerns from it since it can still be indirectly exposed.

<span id="label" style="display:none">ACT rules</span>
<span aria-labelledby="label">Accessibility Conformance Testing rules</span>

Although this input element is not included in the accessibility tree, it is still focusable, hence users of assistive technologies can still interact with it by sequential keyboard navigation. This may result in confusing situations for such users (and is in direct violation of the fourth rule of ARIA (working draft)).

<input type="text" aria-hidden="true" name="fname" />

Outcome

An outcome is a conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

  • Inapplicable: No part of the test subject matches the applicability
  • Passed: A test target meets all expectations
  • Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementations using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such "interim" results can be expressed with the incomplete outcome.

Programmatic Label

Element L is a programmatic label of target element T if either:

  • T is a labeled control of L; or
  • L is referenced by ID in the aria-labelledby attribute of T.

Note: a given element may have more than one programmatic label.

Examples for Programmatic Label

The input element is a labeled control of the label element (implicit label). Therefore the label element is a programmatic label of the input element.

<label>Full name: <input type="text" name="full_name" /> </label>

The input element is a labeled control of the label element (explicit label). Therefore the label element is a programmatic label of the input element.

<label for="fname">Full name:</label> <input type="text" id="fname" name="full_name" />

The span element is referenced by the aria-labelledby attribute on the input element. Therefore, the span element is a programmatic label of the input element.

<span id="label_fname">Full name:</span> <input type="text" name="full_name" aria-labelledby="label_fname" />

Both span elements are referenced by the aria-labelledby attribute on the input element. Therefore, each span element is a programmatic label of the input element.

<span id="billing">Billing</span>
<span id="address">address</span>
<input type="text" name="billing_address" aria-labelledby="billing address" />

The span element is referenced by the aria-labelledby attribute on the input element and the input element is a labeled control of the label. Therefore, the span element and the label are each a programmatic label of the input element.

<span id="label_fname">Full name:</span>
<label>Full name: <input type="text" name="full_name" aria-labelledby="label_fname"/></label>

The div element is not labelable. Therefore, it is not a labeled control for the label element and the label element is not a programmatic label for the div element.

<label for="bond">Full name</label>
<div id="bond">My name is Bond. James Bond.</div>

The span element is referenced by the aria-labelledby attribute on the div element. Therefore, the span element is a programmatic label of the div element. Note that the aria-labelledby attribute works on any element, not just on the labelable elements.

<span id="label_fname">Full name:</span>
<div aria-labelledby="label_fname">My name is Bond. James Bond.</div>

Visible

Content perceivable through sight.

Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

Content is defined in WCAG.

Examples for Visible

Note: The examples presented here are non-normative and not testable. They serve to illustrate some common pitfalls about the definition and to help the implementers of ACT rules understand it.

This span element is visible (by default, elements are visible).

<span>Now you can see me!</span>

This span element is not visible because of the CSS visibility property.

<span style="visibility: hidden">I'm the invisible man</span>

This span element is not visible because of the CSS display property.

<span style="display: none">I'm the invisible man</span>

This span element is not visible because it is positioned off-screen

<span style="position: absolute; top: -9999px; left: -9999px;">Incredible how you can</span>

This span element is not visible because it contains only whitespace and line breaks.

<span>
	<br />
	&nbsp;
</span>

This span element is not visible because it has the exact same color as its background.

<span style="color: #00F; background: #00F;">See right through me</span>

Useful Links


Implementations

This section is not part of the official rule. It is populated dynamically and not accounted for in the change history or the last modified date. This section will not be included in the rule when it is published on the W3C website.

ToolConsitencyCompleteReport
AlfaconsistentYesView Report
axe-coreconsistentYesView Report
QualWebconsistentYesView Report
SortSiteconsistentYesView Report

Acknowledgments

Table of Contents