That would be the label of a button yes. I think in practice, what's missing is describing the label of a button (or another element with that role) with an aria-label attribute.

Buttons that miss a label are often an icon without text and label (e.g. a delete button with a trash icon).

https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

Thanks for the explanation!

The lawsuit worthy aspect is that labels for buttons are super important for understanding what a button does. A lack of labels (either through not putting text inside the <button> element or using a technique like aria-label) can quickly make an interface unusable for a blind person - the visual equivalent would be completely blank, identical buttons. That barrier is what someone could sue over.

It can also quickly make an interface unusable for a non-blind person, if they block external fonts.

My understanding is that a button used like this is already accessible.

However a button that looks like this:

  <button type="button">
    <img src="/delete.png" alt="Delete post" />
  </button>

Is not. Screen readers will read the simple text on the button, but any descendants of the button will be considered purely presentational (even if as in the example above the img tag includes an 'alt' attribute, it won't be read).

Modern screen readers will now often parse text content out of the button even if there are descendants, but this behaviour is not reliable or according to spec.

To fix:

  <button type="button" aria-label="Delete post">
    <img src="/delete.png" alt="Delete post" />
  </button>

There are other techniques as well such as using CSS to hide text (not with 'display: none' though, which also hides from screen readers, meaning this often feels a bit hacky) or using a hidden element with text content and aria-labelledby to reference the element's ID.

This is a pretty good walk through: https://www.sarasoueidan.com/blog/accessible-icon-buttons/#a...

No, your first code snippet is totally fine. The button's name comes from its descendent elements by default. In this case, the `alt` attribute of the image provides the name.

Sara is good source for accessibility information but I think you've misinterpreted that post. If an icon button uses an `img`, making the image's `alt` the name of the button works well. If the button's icon comes from an inline SVG, background image, or icon font, I recommend Sara's first technique, visually hidden text within the `button`; names from text nodes are more robust than from attributes (`alt` being an exception, in part because it has been around far longer).

Thank you for the correction! Always good to learn.