空のaltと非表示にする装飾画像

装飾画像では、正しい方法は空のaltです。alt equals two quotation marks with nothing insideと書きます。

空のaltは画像を装飾用として示すため、スクリーンリーダーは完全に読み飛ばし、存在を読み上げません。

空のaltと欠落したaltはまったく異なります。空は意図的に読み飛ばすという意味で、欠落は作成者が忘れたという意味です。

altがまったくないと、多くのスクリーンリーダーはファイル名を読み上げます。たとえばIMG underscore 4823 dot jpgのようになります。

ルールは簡単です。すべてのimgにalt属性が必要です。空にするか、内容を入れるかだけが違いです。

視覚的なスペーサー、線、区切り線には意味がないため、空のaltを使う典型的な例です。

引用符の間に空白を入れないでください。本当の空のaltには何も入れず、空白文字1つさえ含めません。

画像が本当に装飾用なら、最もすっきりした方法はCSSのbackground画像にすることです。これならアクセシビリティツリーから完全に無視されます。

aria-hiddenをtrueに設定して、装飾用のグラフィックを隠すこともできます。表示中のテキストの横に置くインラインSVGアイコンでよく使われます。

注意してください。有益な画像に空のaltやaria-hiddenを指定してはいけません。一部の利用者に対して、その画像を知らないうちに削除することになります。

装飾画像がリンクの中にある場合でも、リンクにはどこかにアクセス可能なテキストが必要です。なければリンクに名前が付きません。

重要な違いを見つけてください。

よくできました！空のaltは意図的に装飾を隠します。altの欠落はバグであり、aria-hiddenやCSSの背景画像も装飾を静かに保ちます。