# 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”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/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
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `<b>` 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 `<b>` doesn't help either, because both roles are in the list.

The usual cause is a `<b>` used as a clickable icon, such as the "×" that closes a notice. Keyboard users can't tab to a `<b>`, 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 `<b>`, keep `aria-hidden="true"` and delete `aria-label`. If the `<b>` 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

```html
<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

```html
<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>
```