Missing ARIA description IDs
Silktide checks elements that attach extra descriptive text to themselves by referring to other elements by ID, and reports references to IDs that don't exist on the page. A broken reference silently drops the description.
The attribute aria-describedby links an
element to supplementary text elsewhere on the page - help text under a form
field, or an explanation of a control:
<!-- Problem: the reference says "email-help" but the paragraph's id is "email-helpp" -->
<input type="email" aria-describedby="email-help">
<p id="email-helpp">Enter your work email address</p>
Why this matters
Descriptions carry the guidance that stops people making mistakes - format requirements, warnings, explanations of consequences. A reads the description after an element's name, but only if the reference resolves. When it points at nothing, the visitor gets the field without its guidance and has no way to know anything is missing. Sighted visitors still see the help text sitting next to the field, so the break passes every visual review - which is exactly why automated checking matters here.
How to fix it
- Find the element containing the descriptive text, and make the
aria-describedbyvalue match itsidexactly (IDs are case sensitive):
<!-- Fixed: the reference matches the paragraph's id -->
<input type="email" aria-describedby="email-help">
<p id="email-help">Enter your work email address</p>
- If the descriptive element was removed, either restore it or remove the
stale
aria-describedbyattribute. - When one element is described by several others, list every ID separated by spaces, and check each one.
How Silktide tests this
- Find every element with an
aria-describedbyattribute on each page. - Split the attribute value into individual IDs.
- Report each referenced ID that does not exist anywhere on the page.