aria-labelledby references id that isn't present in DOM (yet)

Question

I wish to provide accessibility information about a form input using aria-labelledby. This property accepts an id list (space delimited) that will contain, naturally, the id of the label element that is 'for' the form input. However, I wish to also include one or more additional ids for elements that may dynamically be added to the form later.

When I run an audit against my markup using https://github.com/GoogleChrome/accessibility-developer-tools it informs me that "ARIA state and property values must be valid". If I re-run the audit after adding the element with the id that referred to nothing, the test passes.

My question is will screen readers barf if they come across an id that points to no element currently in the DOM? I'm not so much caring about the audit results directly (they're there to help me, but aren't my client in the end).

*Mainly I want to know if I can stuff ids in there that I know may be present later on, or if I should update the property's value when I add and remove the elements I want to reference.

Answer 1

The very idea of the attributes is to help users and make the page more accessible, so it would be against the very idea to refer to nonexistent elements with them. If the attribute is used at all, it will be used to refer to elements in a manner that matters to the user, so of course there can be trouble – even if the assistive software or the browser handles the error the best possible way.

It is also formally incorrect, because the attribute has been declared as containing id attribute values, and a string cannot be such a value when the id attribute does not exist.

So, you should simply make your script modify the attribute value to contain an id attribute value as soon as you have added that value, but not sooner.

Answer 2

Screen readers won't "barf", but the experience for the user may be odd. That's the important issue, right? You can check that out yourself using VoiceOver (included with MacOS) or NVDA (free for Windows).