あなたの画像はおそらく装飾的ではありません

img要素のalt属性は「null」にすることができます。これは、テキストの説明ではなく空の文字列に設定する行為です。 altの説明を無効にすると、開始引用符と終了引用符の間に情報がないことを意味します。 空のスペースがある場合、それはヌルとは見なされません。

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

「装飾的」とはどういう意味ですか？

画像を無効にすることは、それが装飾目的のみであることを示します。

この文脈では、装飾とは、画像がページまたはビューの目的を理解するために重要な情報を視覚的に伝達しないこと、および画像がその一部として含まれる理由を意味します。

装飾とは、画像に装飾と見なされるコンテンツが含まれていることを意味するものではありません。

「「

たとえば、壁紙を販売しているWebサイトでは、壁紙サンプルの代替説明が必要になります。

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

別の例としては、美術館のWebサイトがあります。ここでは、コレクションの一部を提示することで、別の説明とキャプションの両方を利用できます。

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

別の説明に句読点も含まれていることを確認してください。

なぜあなたは画像を装飾的にしたいのですか？

支援技術は、無効にされた画像をスキップし、それらの存在を発表しません。 これをしたい理由はほとんど歴史的です。

古いレイアウトテクニック

初期のWeb開発手法は、さまざまなオペレーティングシステム、ブラウザー、およびブラウザーのバージョン間で一貫したレイアウトを保証するために画像に依存していました。 この最も一般的な例は、コンテンツを所定の位置に押し込むためにさまざまなサイズに引き伸ばされた1×1の透明なピクセルであるspacer.gifでした。

この手法では、通常、多くの間隔の画像を使用して視覚的なデザインを作成します。 それらの存在を沈黙させる方法がなければ、これらの画像は支援技術が発表したものを乱雑にし、Webコンテンツをナビゲートしてアクションを実行するのに混乱と時間を要します。

古いデザインテクニック

box-shadowなどのCSSプロパティが存在する前は、開発者は、装飾的なスタイルを切り刻んで、高さや幅が不確定なコンテンツで機能するようにする手法を使用する必要がありました。 この手法は、9スライススケーリングと呼ばれ、作成する必要のあるコンテンツの9つのセクションを指す用語です。

スペーサー画像と同じように、9スライススケーリングでは複数の画像を使用して目的の視覚効果を作成しました。 そして、スペーサー画像のように、これらの画像が作成した雑然としたものを取り除く唯一の方法は、それらを装飾的なものとしてマークすることでした。

冗長なアナウンス

ページまたはビューで画像が繰り返されるというまれなシナリオがあり、繰り返し配置しても追加のコンテキストは提供されません。 スクリーンリーダーを使用している弱視の人にとっては、目に見える画像のアナウンスがないために混乱を招く可能性があるため、この状況で装飾的な画像をマークする場合は注意が必要です。

補足アイコン

アイコンを使用するリンクとボタンには、機能を伝えるアクセシブルな名前を常に付ける必要があります。 デザインにアイコンも組み込まれている場合は、アイコンのデザインを伝達する必要はありません。

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

コンポーネントがアイコンのみを使用する場合は、画像自体を使用してアクセシブルな名前を作成する必要があります。

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

表示されるテキストラベルが推奨される手法であることに注意してください。 表示されているテキストラベルを翻訳して、目的をより直接的に伝えることができます。

現代的な使用

最新のCSSレイアウトとスタイリング技術は、画像の配置が非常に意図的なものになったことを意味します。 これは、画像を使用する場合、別の説明が必要になる可能性が高いことを意味します。

別の説明では、画像の目的を伝える必要があります。 これには画像のコンテンツが含まれますが、ページのコンテキストに含まれている理由や画像が含まれているビューも含まれる場合があります。これが、代替画像の説明を完全に自動化できない理由の1つです。

画像を表示する他の方法

ページまたはビューに画像を表示する方法は他にもいくつかあります。 使用する手法に関係なく、画像に意味のあるコンテンツが含まれている場合は、別の説明が提供されていることを確認することが重要です。

picture要素

pictureの要素には暗黙の役割はありません。つまり、その存在は支援技術に目的を伝えません。 これは、「画像」の存在を意味的に説明するために使用できないことを意味します。

picture要素は、 source要素とimg要素のコンテナです。 img要素のalt属性を使用して、親picture要素の代替説明を提供します。

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

背景画像

CSSを使用して、HTML要素の背景として画像を宣言できます。 これは、デザインに質感を加えるために最もよく使用されます。

ただし、もう1つの一般的な手法は、 background-imageを使用して、開発者がアップロードする画像のサイズを制御できないような方法で画像を配置することです。 background-imageをbackground-sizeなどの他のプロパティと組み合わせると、デザインを壊すことなく、未知のサイズのコンテンツが確実に表示されます。

このようなシナリオでは、旧友のspacer.gifが再び役立つ可能性があります。

インラインSVG

SVGは、 img要素のsrc属性を介してリンクするか、ページまたはビューにSVGコードをインラインで配置することで表示できます。

インラインSVGを使用している場合は、 alt属性の代わりにSVGのtitle （および場合によってはdesc ）要素を使用する必要があります。

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

同等の経験

現代のウェブデザインと開発では、画像を表示することは非常に意図的な行為です。 別の説明を使用すると、画像の内容を説明し、その際に、を含める価値がある理由を伝えることができます。

画像に空想的なものが表示されているからといって、それを説明する価値がないというわけではありません。 その存在を発表することで、能力や状況に関係なく、誰もがあなたのデジタル体験を完全に理解できるようになります。

SmashingMagの詳細：

• ChromeDevToolsのアクセシビリティ
• アクセシビリティツールの完全ガイド
• 最も重要な場合のアクセシブルイメージ
• アクセス可能なSVG：スクリーンリーダーユーザーに最適なパターン
• モーション感度の低減されたモーションを使用した設計
• アクセシビリティ、ユーザビリティ、UXに関するその他の記事を読んでください。