可訪問性 有意義的 & 裝飾性影像

為什麼

螢幕閱讀器 會忽略裝飾性影像。螢幕閱讀器會嘗試朗讀有意義影像的含義。

什麼

有些影像是有意義的，有些是裝飾性的。這在可訪問性方面是一個重要的區別。每張影像都必須被編碼為有意義或裝飾性的。

如何操作

你將學習如何區分有意義的影像和裝飾性的影像。

裝飾性影像

如果一張影像對於使用者理解網頁或應用程式的功能或內容不重要，那麼它就被認為是裝飾性的。如果你能移除它而沒有任何影響，那麼它就是一張裝飾性影像。

空的 alt 屬性

將影像設定為裝飾性的基本方法是使用一個空的 alt 屬性。

在阿里巴巴的首頁，我們有四個快捷方式——所有類別、詢價、線上貿易展和個人防護裝備。每個都有一個說明性的圖示。快捷方式所有類別有一個顯示三個深藍色方塊和一個橙色圓圈的影像。這張影像是一張裝飾性影像。我們透過新增一個空的 alt 屬性來實現這一點。

<img src="Ha50044a3568449409f3396e5b36be8c3h.png_80x80q80.jpg" alt="">

輔助技術，如螢幕閱讀器，將忽略該影像。如果沒有空的 alt 屬性，螢幕閱讀器可能會讀取檔名。這毫無意義，並且會使使用者感到困惑。

背景影像

裝飾性影像的另一種方法是使用 CSS background-image 屬性 新增它們。當我們建立 英雄影像 時，這很常見。

字型圖示

在阿里巴巴的移動版本底部，有五個連結是圖示和文字的組合——首頁、動態、信使、購物車和我的阿里巴巴。由於如果移除圖示，網站仍然可讀，所以它們是裝飾性的。這些圖示是用字型圖示建立的。沒有 <img> 元素，也沒有背景影像。新增 role="img" 和 aria-hidden="true"。

<i class="navbarIcon" role="img" aria-hidden="true"></i>

使用這段程式碼，我們為具有影像角色的 <i> 添加了一些語義。使用者代理現在理解這是一個影像。螢幕閱讀器也明白它們應該忽略該影像。

內聯 SVG 影像

如果你使用 <img> 元素新增裝飾性 SVG 影像，你必須按照描述新增一個空的 alt 屬性。SVG 影像通常是內聯插入的，使用 <svg> 元素。在這種情況下，aria-hidden="true" 會使你的影像成為裝飾性的。

<svg aria-hidden="true" …></svg>

有意義的影像

我們的大部分影像都是有意義的。在阿里巴巴的這個例子中，我們有六張影像。

• 標誌
• 搜尋圖示
• 咖啡
• 夾克
• 1年徽章
• 金徽章

這裡唯一有意義的影像是搜尋圖示。這是裝飾性的，因為有文字搜尋產品。如果用於開啟搜尋的圖示是獨立的，它將是一張有意義的影像。

與裝飾性影像一樣，我們有幾種編碼有意義影像的方法。

描述性 alt 屬性

alt 屬性為影像提供替代文字，以防使用者因某種原因無法檢視。原因可能是連線速度慢、影像檔案錯誤，或者使用者使用螢幕閱讀器。alt 屬性的值應該描述影像，或者更好的是：影像的意圖。你將在頁面 影像的描述性文字 中學習如何編寫。

在阿里巴巴的這個例子中，logo 的存在有兩個原因。首先，告訴使用者他們在哪一個網站上。其次，為使用者提供返回首頁的連結。

無法訪問

更好，但仍然不好

更好

最佳

背景影像、字型圖示和 <svg> 影像

背景影像、字型圖示和 <svg> 的方法相同。

• 新增 role="img"
• 新增一個描述性的 aria-label 或 aria-labelledby 屬性。

<div role="img" aria-label="Private house, modern architecture. Minimalistic with a big garage.">

現在你知道如何編碼裝飾性和有意義的影像了。接下來你將學習如何為有意義的影像編寫 描述性文字。