エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
インラインSVGの代替テキストはどうするべきか – TAKLOG
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
インラインSVGの代替テキストはどうするべきか – TAKLOG
最近アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきかという記事を読んで... 最近アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきかという記事を読んで、SVGの代替テキストについて改めて考えさせられたので自分なりの考えをまとめました。 一番確実な方法はimg要素で読み込んでalt属性を付与することだと思いますが、CSSで装飾を変えられるインラインSVGの利点を捨てるのも難しいのでインラインSVGにどうやって代替テキストを含めるか?のみに焦点を当てていきます。 自分の中での結論先に結論から伝えますと、理想を言えば 「svgの中にtitle要素を含み、role="img"とtitleと紐づけたaria-labelledbyで実装する」 のがベストだと思います。ただし、この方法では不都合な点がいくつか孕んでいるので現実は冒頭で紹介した記事の2.で触れられているような 「Visually Hiddenなテキストをsvgに隣接し、svgはaria-hi