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