What does this mean?
The element referenced by aria-labelledby has no content.
Impact on users
Generally this will be because content has not been generated.
In the example below a heading is missing its content but it is being used by another element as its accessible name via aria-labelledby:
<dialog aria-labelledby="dialog-heading">
<h2 id="dialog-heading"></h2>
It is the use of the other element as accessible name which makes this quite serious.
This can have a double impact on a user as shown by the above example:
- the
dialogis now missing an accessible name (because that was being provided by theh2) - the element it was referencing (the
h2) is also missing its content / accessible name
As aria-labelledby can have more than one element referenced it could be that the element with the aria attribute still has an accessible name, but it might be incomplete or misleading. You will need to determine he potential impact for a user.
How to fix
Check to see if the correct element has been referenced.
Then check if the content which should be in that element is missing.
If the missing content is not there by design (ie dynamic), then look at using aria-label instead of aria-labelledby to ensure the accessible name is always present.
When working with id attributes you should also check that there is only one element with that id on the page as the browser will pick the first one it finds.