role="img"について

きっと意味のある画像については全てrole="imgを使用した方が良い。
では意味のある画像とは具体的にどのような画像を指すのか考えたい。
例えば「バツボタン」は現在行っているアクションを「キャンセルする」という働きがありこれは明確に意味がある例。
反対に意味がない画像がどんな画像を指すのか理解できてないのでその辺を調べたい。
それとスクリーンリーダーなどの支援技術を使った時の挙動を踏まえて、role="img"がある場合とない場合でどのように変わるのか調べる

その画像が画面から取り除いていいものでなければ意味のある画像
https://accessibilityinsights.io/info-examples/web/role-img-alt/#:~:text=An image is decorative if it could be removed from the page with no impact on meaning or function.

ユーザーの入力を受け付けるものであれば代替テキストが必須
https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html#:~:text=situations listed below.-,Controls%2C Input,-If non-text

何の情報も持たず、何の機能も持たない画像は純粋な装飾
https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html#dfn-pure-decoration:~:text=serving only an aesthetic purpose%2C providing no information%2C and having no functionality

実装例としてアイコンにフォントファイルを使用している例を挙げているが、svg要素の方が一般的だと思うのでその場合についての話をしようかな

https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24

以下のような内容だと既に多くの記事で説明されていることなのであまり書く意味がないかな

1. 意味のあるsvg要素にはrole="img"とaria-labelを付与しましょう。
2. なぜこの実装が最適なのかは別記事で説明されています。
3. 見た目上意味を持っている要素もスクリーンリーダーユーザーからはその意図が伝わらないためです。
4. 見た目上意味を持っているかどうかは ~ という基準で評価します。