画像に名前を与えるときはaria-labelかtailwindcssのsr-onlyか

tailwindcssにはsr-onlyと呼ばれるクラスが提供されています。
sr-onlyを付与したクラスは内容を支援技術に伝えつつ視覚的には非表示にならないスタイリングとなっています。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

スクリーンリーダー等を使って以下のボタンの名前を確認してください。左のボタンはsr-onlyを持つテキストを一緒に持つのでbadという名前が呼ばれますが、右のボタンには何もついないので画像のような抽象的な名前になります。

See the Pen Untitled by KokiSakano (@kokisakano) on CodePen.

このような実装はimg要素のalt属性やsvgのtitle要素を用いられない時の補助として利用されます。そして、同じような使用例としてaria-labelがあります。

どちらを使えば良いのでしょうか。

これらの実装の大きな違いとして、翻訳時の挙動が挙げられます。ブラウザの翻訳機能を用いたとき、aria-labelはいくつかのブラウザ(SafariやFirefoxなど)では名前が翻訳されずに原文ままとなります。sr-onlyの場合は他の翻訳された文字と同じように羅列されているので翻訳されたものが名前となります。
翻訳機能を利用するユーザーには翻訳後のテキストの情報を伝えたいのが普通ですから、この点からはsr-onlyを利用するのが有利と思います。

他の違いとしてはブラウザの検索で文字列が検索対象になるか否かの問題があります。sr-onlyは検索の対象になりますが、視覚的な実態がないのでハイライトされません。検索時にどのような挙動にしたいかによって使い分けをする必要がありそうです。

最後に、前提としてaltやtitleのような基本の属性をできるだけ使うようにしましょう。支援技術に伝えるだけを意図としてもつARIA属性やその他の実装は最後の手段としたいです。
そして、aria-labelを使うときは、それが翻訳されない状態で利用される可能性があること、ブラウザの検索機能で反応しないことを覚えておきたいです。sr-onlyを使うときは検索機能に反応するがハイライト等のタイミングで不自然な動作になる可能性があることに気をつけたいです。