eslint-plugin-fluentui-jsx-a11y

eslint-plugin-fluentui-jsx-a11y copied to clipboard

Overloading aria-describedby with Multiple Descriptions

Misuse Example: Providing excessive or overly detailed descriptions.

<button aria-describedby="desc1 desc2 desc3 desc4">Submit</button>
<p id="desc1">Submit the form</p>
<p id="desc2">Ensure all fields are filled out</p>
<p id="desc3">You will receive a confirmation email</p>
<p id="desc4">Contact support if there are issues</p>

Why it’s wrong: While aria-describedby can accept multiple IDs, overwhelming users with too much information can hinder rather than help accessibility.

Descriptions should be concise and directly relevant to the element. Providing too much content can make navigation frustrating for screen reader users.