About This HTML Issue
An aria-labelledby attribute on a div must list at least one element ID, so an empty value, or one made only of spaces, is invalid.
The attribute takes an IDREFS value: one or more id values, separated by spaces, that point at the elements whose text names the div. Screen readers use that text as the name of the div, which is often the heading of a dialog or a page region. A value of "" or " " points at nothing, so the div gets no name from it. The validator reports both with the same message and prints the bad value between the quotes, so one report shows “” and another shows spaces between them.
The usual cause is a shared component or template that writes every ARIA attribute on its wrapper div and fills each one only when the caller passes a value. When the caller passes no label ID, the template still prints the attribute, just empty. Change the template so it leaves aria-labelledby out when it has no ID to point at.
When the div has a role that takes a name, such as dialog or region, give the labeling element an id and reference it. When the div has no role, delete the attribute: aria-labelledby isn't allowed on a plain div, and the validator flags that in a separate message too. An empty role="" is invalid as well and gets its own message.
Invalid example
The dialog has a visible heading, but the empty aria-labelledby doesn't reference it.
<div role="dialog" aria-modal="true" aria-labelledby="">
<h2>Sign in</h2>
<p>Enter your email address to continue.</p>
</div>
Valid example
The heading has an id, and aria-labelledby references it, so screen readers announce the dialog as "Sign in".
<div role="dialog" aria-modal="true" aria-labelledby="signin-title">
<h2 id="signin-title">Sign in</h2>
<p>Enter your email address to continue.</p>
</div>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.