你的形象可能不是裝飾性的

img元素的alt屬性可以“置空”，這是將其設置為空字符串而不是文本描述的行為。 取消 alt 描述意味著在開始和結束引號之間沒有信息。 如果有空格，則不會被認為是空的：

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

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

“裝飾”是什麼意思？

取消圖像表示它僅用於裝飾目的。

在這種情況下，裝飾性意味著圖像不會在視覺上傳達對於理解頁面或視圖的目的很重要的信息，以及為什麼將圖像作為其中的一部分。

裝飾性並不意味著圖像包含被視為裝飾的內容。

“

例如，一個銷售壁紙的網站會希望有壁紙樣本的替代描述：

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

另一個例子是博物館網站，展示他們收藏的一件作品可以從替代描述和標題中受益：

 <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 開發技術依靠圖像來幫助他們保證跨不同操作系統、瀏覽器和瀏覽器版本的一致佈局。 最常見的示例是spacer.gif ，這是一個 1×1 透明像素，被拉伸到不同大小以將內容推送到位。

這種技術通常會使用許多間距圖像來創建視覺設計。 如果沒有辦法讓他們的存在保持沉默，這些圖像會混淆輔助技術宣布的內容，並使導航和對 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 佈局和样式技術意味著圖像放置現在是高度有意的。 這意味著如果使用圖像，則很可能需要替代描述。

替代描述應傳達圖像的目的。 這包括圖像的內容，但也可能包括它包含在頁面上下文中的原因或包含它的視圖。這是替代圖像描述永遠無法完全自動化的原因之一。

其他顯示圖像的方式

還有其他幾種方法可以在頁面或視圖上顯示圖像。 如果圖像包含有意義的內容，無論使用何種技術，確保提供替代描述非常重要。

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 元素的背景。 這最常用於為設計添加紋理感。

然而，另一種流行的技術是使用background-image來放置圖像，這樣開發人員將無法控制某人上傳的圖像的大小。 background-image與background-size等其他屬性相結合，將確保在不破壞設計的情況下顯示未知大小的內容。

在這種情況下，我們的老朋友spacer.gif可能會再次提供幫助！

內聯 SVG

SVG 可以通過img元素中的src屬性鏈接到它來顯示，或者通過將 SVG 代碼內嵌在頁面或視圖中來顯示。

如果您使用的是內聯 SVG，則需要使用 SVG 的title （可能還有desc ）元素來代替alt屬性。

 <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 的進一步閱讀：

• Chrome DevTools 中的可訪問性
• 可訪問性工具的完整指南
• 最重要時的可訪問圖像
• 可訪問的 SVG：屏幕閱讀器用戶的完美模式
• 針對運動靈敏度進行減少運動設計
• 閱讀更多關於可訪問性、可用性和用戶體驗的文章。