Missing ARIA label IDs
Silktide checks elements that take their from other elements by ID, and reports references to IDs that don't exist on the page. A broken reference leaves the element without the name it was meant to have.
The attribute aria-labelledby names an
element by pointing at the id of the element containing its label - a
heading naming a dialog, or a caption naming a control:
<!-- Problem: the reference says "dialog-label" but the heading's id is "dialog-labell" -->
<h2 id="dialog-labell">Important message!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Why this matters
The accessible name is what a
announces when a visitor
reaches an element. When an aria-labelledby reference points at nothing,
the element may be announced with no name at all - an unnamed dialog, an
unnamed button - and the visitor has to guess its purpose. These breaks are
invisible: the page looks identical, and even careful user testing rarely
catches a name that silently failed to attach. IDs get renamed and content
gets restructured, so references rot over time.
How to fix it
- Find the element that was meant to provide the name, and make the
aria-labelledbyvalue match itsidexactly (IDs are case-sensitive):
<!-- Fixed: the reference matches the heading's id -->
<h2 id="dialog-label">Important message!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- If the labelling element was removed, either restore it or switch to an
aria-labelattribute containing the name as text. - When one element is named by several others, list every ID separated by spaces, and check each one.
How Silktide tests this
- Find every element with an
aria-labelledbyattribute on each page. - Split the attribute value into individual IDs.
- Report each referenced ID that does not exist anywhere on the page.