HTML check: The “aria-label” attribute must not be specified on any “b” element unless the element has a “role” value other than “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript”, or “superscript”.

About This HTML Issue

A  element without an explicit role has the generic role, and generic elements can't have an accessible name, so aria-label is not allowed on it.

ARIA forbids naming elements with the roles listed in the message. Screen readers often skip an aria-label on these elements, and users never hear it. Setting role="generic" or role="presentation" on the  doesn't help either, because both roles are in the list.

The usual cause is a  used as a clickable icon, such as the "×" that closes a notice. Keyboard users can't tab to a , and screen readers don't announce it as a button. Replace it with <button type="button">, which takes aria-label, receives focus, and runs its click handler when the user presses Enter or Space.

Adding aria-hidden="true" doesn't clear the message. The validator still flags the aria-label, and nobody hears the label of a hidden element anyway. For a purely decorative , keep aria-hidden="true" and delete aria-label. If the  is a symbol that means something by itself, like an asterisk that marks a required field, role="img" makes the label valid. For ordinary bold text, remove aria-label and reword the visible text if it isn't clear enough on its own.

Invalid example

<div class="alert" role="status">
  <p>Your changes have been saved.</p>
  <b class="alert-close" aria-label="Dismiss message" onclick="this.parentElement.hidden = true">&times;</b>
</div>

Valid example

<div class="alert" role="status">
  <p>Your changes have been saved.</p>
  <button type="button" class="alert-close" aria-label="Dismiss message" onclick="this.parentElement.hidden = true">&times;</button>
</div>