This rule aims to discourage common misuse of the aria-label and aria-labelledby attribute. aria-label and aria-labelledby support is only guaranteed on interactive elements like button or a, or on static elements like div and span with a permitted role. This rule will allow aria-label and aria-labelledby usage on div and span elements if it set to a role other than the ones listed in WSC: a list of ARIA roles which cannot be named. This rule will never permit usage of aria-label and aria-labelledby on h1, h2, h3, h4, h5, h6, strong, i, p, b, or code.
Please do not use tooltips on static elements. It is a highly discouraged, inaccessible pattern. See Primer: Tooltip alternatives for what to do instead.
- w3c/aria Consider prohibiting author naming certain roles #833
- Not so short note on aria-label usage - Big Table Edition
- Your tooltips are bogus
- Primer: Tooltip alternatives
There are conflicting resources and opinions on what elements should support these naming attributes. For now, this rule will operate under a relatively simple heuristic aimed to minimize false positives. This may have room for future improvements. Learn more at W3C Name Calcluation.
<span class="tooltipped" aria-label="This is a tooltip">I am some text.</span><span aria-label="This is some content that will completely override the button content">Please be careful of the following.</span><div aria-labelledby="heading1">Goodbye</div><h1 aria-label="This will override the page title completely">Page title</h1><button aria-label="Close">
<svg src="closeIcon"></svg>
</button><button aria-label="Bold" aria-describedby="tooltip1">
<svg src="boldIcon"></svg>
</button>
<p id="tooltip1" class="tooltip">Add bold text or turn selection into bold text</p><span>Hello</span><div>Goodbye</div><h1>Page title</h1><div role="dialog" aria-labelledby="dialogHeading">
<h1 id="dialogHeading">Heading</h1>
</div>