選單
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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


為什麼

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


什麼

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


如何操作

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


裝飾性影像

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

空的 alt 屬性

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

Screenshot of the front page of Alibaba.com

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

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

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

背景影像

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

Example of a hero image, showing a background image of a photographer with text on top.

字型圖示

Screenshot from Alibaba, showing mobile bottom navigation with buttons like Home, Feeds and more.

在阿里巴巴的移動版本底部,有五個連結是圖示和文字的組合——首頁動態信使購物車我的阿里巴巴。由於如果移除圖示,網站仍然可讀,所以它們是裝飾性的。這些圖示是用字型圖示建立的。沒有 <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>



有意義的影像

Screenshot from Alibaba on a phone, showing two products – coffee and jacket.

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

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

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

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


描述性 alt 屬性

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

Screenshot from Alibaba on a phone, showing two products – coffee and jacket.

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

無法訪問

<img src="TB1hVGkvVP7gK0jSZFjXXc5aXXa-365-49.svg">

更好,但仍然不好

<img src="alibaba-logo.svg">

更好

<img src="alibaba-logo.svg" alt="Alibaba logo">

最佳

<img src="alibaba-logo.svg" alt="Home of Alibaba">

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

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

  • 新增 role="img"
  • 新增一個描述性的 aria-labelaria-labelledby 屬性。
Screenshot of Caledon Build, showing a modern house in the background.

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

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



×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援