照片的替代文字

為您的圖像添加替代文本,使您的網站更易於訪問並提高您的 SEO。

照片的替代文字在網站的創建和改進過程中起著至關重要的作用。您不僅可以保證盲人或視力障礙人士更容易訪問您的網站,有效的替代文字還有助於豐富您網站的搜尋優化。

在本教程中,您將透過以下內容了解有關照片替代文字的所有內容:

  1. 決定何時使用替代文本
  2. 為單張照片指定替代文本
  3. 為 CMS 照片分配替代文本
  4. 為多照片 CMS 欄位中的照片指派替代文本

報名參加整個無障礙課程。 

決定何時使用替代文本

當您將替代文字指派給項目中的一張圖片(或多張圖片)時,螢幕閱讀器會偵測該替代文字照片描述。透過為圖片分配替代文本,您可以增強盲人或視力障礙人士對網站的可訪問性。它對於有感覺處理或學習困難的個人也有益。

有用的信息: 螢幕閱讀器是一種主要由視力障礙人士使用的輔助工具。它以口頭方式傳達文字、按鈕、圖片和其他螢幕組件,或以點字形式呈現它們。 

此外,如果圖片無法正確加載,甚至在有人選擇停用圖像的瀏覽器上,替代文字也會出現在瀏覽器視窗中。 

《紐約時報》替代文字在網頁載入時顯示為損壞的圖像上突出顯示。

透過使用替代文字描述您的圖片內容,您還可以為搜尋優化做好準備。您向所有用戶描述您的圖片越有效,搜尋引擎就越容易識別和解釋該內容。 

在大多數情況下,設計中的大多數圖片都會受益於替代文本,因為它們向網站訪客(和搜尋引擎)傳達了重要性。然而,您的網站中可能有一些更具裝飾性的圖片,並且不傳達任何相關意義,因此不需要替代文字。 

裝飾性圖像圖示的範例被突出顯示。 

撰寫相關替代文本

替代文字應該描繪和傳達圖片的含義。有時,像為新聞圖片寫標題一樣來處理它是有益的。例如,在解釋圖片之前,您不需要包含術語“圖片”或“圖像”,除非這些術語的包含增加了您所描述的內容的重要性或意義。 

在決定何時以及如何編寫替代文字時,批判性地評估您的受眾及其使用您的設計的體驗始終是您選擇的最佳選擇。向自己提出以下問題:

  • 使用螢幕閱讀器瀏覽頁面是什麼樣的體驗? 
  • 沒有圖片會發生什麼變化? 
  • 如果您不合併替代文本,您的用戶是否會被剝奪重要內容?

在設計和開發過程中考慮這些因素不僅可以促進包容性,還可以簡化您的開發過程(從概念到發布)。

有效的替代文字範例

《紐約時報》圖片的替代文字寫道:“本月,在堪薩斯州佛羅倫薩上空長時間曝光的一串 SpaceX StarLink 衛星。”
Apple 圖片的替代文字提到:“AirTag 的正面和背面視圖,帶有笑臉表情符號。” 
Slack 圖片的替代文字是:“連接到 Slack 的 Salesforce 和 Google Drive 等應用程式的圖示。”

為單張照片指定替代文本

通常,向圖片添加替代文本的最具可擴展性和最省時的方法是在照片資源本身上分配替代文本 資產面板。每當你包含一個 影像 包含分配有替代文字的資產的元素, 影像 元素繼承您已指派給資產的替代文字。您可以插入 影像 根據需要多次將元素添加到您的專案中,並且該元素的每次出現都將始終從分配給所用資源的替代文字中提取。

將替代文字分配給 影像 在裡面 資產面板:

  1. 啟動 資產面板
  2. 將滑鼠懸停在 影像 要求 替代文字 
  3. 點擊「齒輪」圖示即可顯示影像的 資產詳情 莫代爾
  4. 輸入您的 替代文字 進入空白欄位並在完成後關閉資產詳細資料模式
如果您在資源中指定替代文本 資產面板, 影像 元素會自動從它們使用的資源中檢索替代文字。

您也可以選擇指定替代文本 影像 資產一一。例如,如果您之前在 影像 在裡面 資產面板,您可以用不同的內容替換替代文字:

  • 選擇 影像 畫布上您想要調整其替代文字的元素
  • 點擊“齒輪”圖示打開 影像設定 選單
  • 替代文字下拉選單 並將其修改為“自訂描述”以設定個性化替代文本,或選擇“裝飾”將圖像標記為裝飾。

請記住,上述步驟只會影響特定的實例 影像 您修改的元素。如果您將相同圖像的新實例新增至您的設計中,則替代文字將預設為您之前在 資產面板.

有用的注意事項: 您可以訪問這些相同的 影像 元素替代文字設置 元素設定面板 在右側 設計師.

您也可以將替代文字插入到 影像 在一個 富文本元素:

  • 選擇 影像 在你的 富文本元素
  • 點擊“扳手”圖標
  • 點擊替代文本下拉列表,然後選擇“自訂描述”來定義個性化替代文本,或選擇“裝飾”將圖像標記為裝飾性

筆記: 如果你的 富文本元素 從 a 取得文字和圖像 富文本字段 在一個 CMS集合,您需要修改圖像替代文本 富文本字段收藏品 本身。

了解有關富文本元素和富文本欄位的更多資訊。

指定 CMS 圖像上的替代文本

讓我們考慮一個包含一系列部落格文章的場景,每個部落格文章都有一個有意義的英雄圖像,可以增強您的整體部落格文章內容。英雄圖像透過一個顯示在每個帖子中 影像領域 在你的 CMS集合。要在每個部落格文章的英雄圖像上設定有意義的替代文本,您可以引入一個新的 文字域 給你的 CMS集合 專門用於添加替代文字:

  • 打開 內容管理系統面板
  • 將滑鼠懸停在您的 收藏 (例如,「部落格文章」)並點擊其「齒輪」圖示以開啟其設置
  • 點擊“新增欄位”並選擇 純文字
  • 分配一個 標籤 (例如,「部落格圖像的替代文字」)
  • 選擇“儲存欄位”和“儲存集合” 儲存您的更新 給你的 收藏
強調了 CMS 集合的「包含新欄位」按鈕。
顯示 CMS 集合的當前文本字段,以說明如何附加字段以包含替代文本,並標記為“博客圖像的替代文本”。

成功將替代文字欄位插入您的 收藏,確保為您的每個部落格視覺效果製作有意義的替代文本 集合元素:

  1. 訪問您的 收藏 (例如,「部落格文章」)
  2. 進入一個 集合元素 (例如,您的部落格文章之一)
  3. 捲動至新新增的文字欄位(例如「部落格圖像的替代文字」)並撰寫可豐富您的內容的描述性文本
  4. 點選 節省
CMS 集合元素的新替代文字欄位突出顯示。

每個重複上述4個過程 集合元素 包含需要替代文字的圖像。

一旦您為所有圖像分配了替代文本 集合元素,您可以返回 設計師 並為部落格文章的主圖像指定替代文字:

  1. 選擇任何一個 影像 連結到的元素 收藏 你剛剛修改了
  2. 訪問 元素設定面板
  3. 勾選該選項 “從您的集合名稱中檢索替代文字” (例如「從部落格文章中檢索替代文字」)
  4. 選擇 文字域 您剛剛製作(例如,「部落格圖像的替代文字」)將新替代文字欄位中的詳細資訊連結到圖像的替代文字本身
畫布上的 CMS 圖像已被選擇,並在「設定」面板中突出顯示了選擇從 CMS 集合欄位中提取替代文字的功能。

透過為每篇部落格文章的主圖像連接新的替代文字字段,每張圖片都有其獨特的、獨特的替代文字。隨後,如果有人依賴螢幕閱讀器,它將利用您在每個圖像中輸入的資訊來讀取每個圖像的替代文字。 集合元素.

專業提示: 快速導航 集合元素 透過按 轉移 + 選項 + 向左或向右箭頭 (在 Mac 上)或 轉移 + 替代 + 向左或向右箭頭 (在 Windows 上)。

探索有關集合元素和集合欄位的更多資訊。

在多圖像 CMS 欄位中的圖像上分配替代文字

您可能打算合併在圖像網格中顯示的多個圖像,並為每張圖片添加替代文字(因為每張圖像都包含重要內容)。

若要將替代文字附加到多個圖像:

  1. 選擇您的 內容管理系統項目 在畫布上
  2. 訪問 內容管理系統面板 並選擇你的 收藏 (如“照片拍攝”)
  3. 訪問一個 內容管理系統項目 包含多個圖像字段並將滑鼠懸停在圖像上
  4. 點擊 3 個省略號並選擇 “編輯替代文字”
  5. 插入您的 替代文字 在可近的領域
CMS 專案中的多圖像欄位突出顯示如何從懸停時出現的 3 個顯示點存取替代文字設定。

請務必為您的每個圖像重複此過程 多影像場。現在,您已將替代文字連結到 影像 你的元素 收藏.

了解有關多圖像領域的更多資訊。

就這樣——繼續描述你所有有意義的圖像!

資源: 有關圖像替代文字和螢幕閱讀器的更多見解,請參閱 如何設計出色的替代文字:簡介圖片必須有替代文本 來自德克大學。

相關閱讀:

  • 增強網站的可訪問性
  • 審核小組簡介
麥伊凡
Ewan Mak 的最新帖子 (看全部)