[好奇心]imgタグのalt=「」は省略できますか?
10365 ワード
imgタグのalt=""は省略できますか?
最近、スクリーンリーダーユーザー向けのwai-aria
が興味を持って勉強した後、特定のページをクローニングしてコードすると、突然好奇心が湧いてきた.
<div class="buttonArea">
<ul class="buttonArea__list">
<li class="buttonArea__item" aria-label="마이페이지"><a href="#" class="buttonArea__link"><img src="./assets/header/image__header-mypage.svg" alt="마이페이지"></a></li>
<li class="buttonArea__item" aria-label="최근본상품"><a href="#" class="buttonArea__link"><img src="./assets/header/image__header-mypage.svg" alt="최근본상품"></a></li>
<li class="buttonArea__item" aria-label="장바구니"><a href="#" class="buttonArea__link"><img src="./assets/header/image__header-mypage.svg" alt="장바구니"></a></li>
</ul>
</div>
補機ユーザーのためにli
のラベルにaria-label
の属性を付け、各リンクに名前を付けます.考えてみてください.img
のラベルのalt
の属性に同じ内容の名前を付けて、スクリーンリーダーは2回読むのではないでしょうか.
では、img
のラベルにalt
の値がある以上、aria-label
を別途追加しないほうがいいのでしょうか.いいえ、これはアイコンの履歴を明確に示す属性で、省略すべきではありません.imgラベルのalt値を省略してもいいですか.
明らかに、imgラベルは学んだ必須値ですが、念のためグーグルを試してみました.
スタックオーバーフローをチェックすると,意見がまちまちであった.😅
もう少し公式ファイルを確認して、Google検索をして、下記の説明を確認できます.
アイコンやその他の厳格な装飾装飾などの必須情報が提供されていない画像では、スクリーンリーダーがスキップするために、置換テキストnull(alt=""")を指定する必要があります.スクリーンリーダーコンテキストでは、これらの追加要素は、ユーザが処理する信号にノイズのみを追加するためである.
▶learnosity
ああ、新しい内容がわかりました.そう思って片付けてよ?!という考えが生まれた.このように、置換テキストは、アシストデバイスユーザに提供される属性ではなく、画像が画面に出力されない場合にユーザに提供される代替テキストである.ではalt値は必要ですよね?
😵💫 めまいがして、
最終的に最良の案を見つけた.<a href="" title="Visit us on Twitter">
<img src="" alt="대체텍스트" aria-hidden="true">
</a>
すなわち、代替テキストは提供されるが、aria−hidden属性の値はtrueに設定され、アシストデバイスユーザが読まずに通過できるようにする.
知らない内容ではないのに当たり前(?)私は長い間迂回してやっと結論を出したと思います.😅
今でもalt=""
を空けることができますか?整理する必要がありますが、別にチェックして、整理してから文章を書き直します.
Reference
この問題について([好奇心]imgタグのalt=「」は省略できますか?), 我々は、より多くの情報をここで見つけました
https://velog.io/@0seo8/궁금증-img태그의-alt는-생략해도-괜찮을까
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<div class="buttonArea">
<ul class="buttonArea__list">
<li class="buttonArea__item" aria-label="마이페이지"><a href="#" class="buttonArea__link"><img src="./assets/header/image__header-mypage.svg" alt="마이페이지"></a></li>
<li class="buttonArea__item" aria-label="최근본상품"><a href="#" class="buttonArea__link"><img src="./assets/header/image__header-mypage.svg" alt="최근본상품"></a></li>
<li class="buttonArea__item" aria-label="장바구니"><a href="#" class="buttonArea__link"><img src="./assets/header/image__header-mypage.svg" alt="장바구니"></a></li>
</ul>
</div>
<a href="" title="Visit us on Twitter">
<img src="" alt="대체텍스트" aria-hidden="true">
</a>
Reference
この問題について([好奇心]imgタグのalt=「」は省略できますか?), 我々は、より多くの情報をここで見つけました https://velog.io/@0seo8/궁금증-img태그의-alt는-생략해도-괜찮을까テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol