跳至主要内容

內容設計：圖片

本文翻譯自：英國政府數位服務設計手冊之參考資料
原文連結：https://www.gov.uk/guidance/content-design/images
翻譯日期：2023-12-27

指導 GOV.UK 內容發布者關於如何使用圖片並使其無障礙化的指南。本章也包括 GOV.UK 的版權標準。

如果您在服務團隊工作，請閱讀設計線上服務的圖片指南。

若要了解如何在 GOV.UK 上傳圖片，請參閱如何發布手冊中的圖片和影片。

圖片類型​

GOV.UK 中的圖片可分為三類：

  • 資訊性的
  • 裝飾性的
  • 圖表 (charts)、示意圖 (diagrams)、資訊圖表和科學方程式

在 GOV.UK 上使用資訊性和裝飾性圖片​

資訊性的圖片​

不要單獨使用圖片來提供資訊。這將排除無法查看或存取圖片的使用者。

當人們使用螢幕放大鏡放大文字時，文字比圖片更容易閱讀。圖片可能會變得像素化，並且在放大時需要垂直和水平滾動。

只有在圖片可以幫助使用者以不同的方式理解資訊時才使用圖片。

避免帶文字的圖片。將文字寫在正文中。

資訊性的圖片可以幫助使用者以不同的方式理解書面文字。您必須將「替代文字 (Alt text)」欄位留空，並在內容正文中撰寫說明。這意味著每個人都可以使用該描述。

螢幕報讀軟體將忽略沒有替代文字的圖片。如果可以的話，描述圖片的內容，就好像頁面上沒有圖片一樣。例如，寫「部長發推文…」，而不是「部長發推文的圖片」。

確保正確描述圖片的另一種方法是想像您正在電話上讀出頁面內容。當您看到圖片時，您會說些什麼來幫助聽眾理解頁面的要點？

當使用照片或標誌時，請使用可以用文字輕鬆解釋的簡單圖片。

您可以使用標題和來源欄位（credit field）來命名圖片中的人物。

裝飾性的圖片​

裝飾性的圖片是指不會為內容提供任何附加資訊的通用圖片。例如，部落格文章中的筆記型電腦圖片，或部門組織頁面上的特色內容。

您不需要裝飾圖片的替代文字。

圖表 (charts)、示意圖 (diagrams)、資訊圖表和科學方程式​

格式​

請查看您可以在 GOV.UK 上使用 Govspeak 建立的表格和圖表的範例。

如果您無法在 Govspeak 中建立圖表，您可能需要將其上傳為圖片。以 SVG（可縮放向量圖形）格式上傳圖片。SVG 允許使用者放大圖片而不損失任何品質。在圖片指南中了解如何建立 SVG 檔案。

顏色​

不要只使用顏色來傳達資訊。一些視覺障礙的使用者無法看到顏色差異。確保段落、線條、文字和背景之間的顏色對比度夠高。

在政府分析功能網站 (Government Analysis Function)上了解更多關於圖表中使用顏色的資訊。

圖表(Charts)​

所有圖表都應該有兩個標題，一個頭條 (headline) 標題和一個統計標題。圖表的頭條標題應概括圖表的主要資訊，後面跟著描述所顯示資料的統計標題。

範例​

頭條標題：「Oliver」穩居嬰兒名字榜首
統計標題：圖 1：2020 年英格蘭最受歡迎的 10 個名字的男嬰數量

做為圖片的圖表​

如果您以圖片形式提供圖表，則圖表的替代文字欄位應留空。相反，圖表後應至少包含以下內容之一：

  • 其正下方的圖表描述
  • 原始資料表格
  • 無障礙性文件中原始資料的連結

如果您要撰寫描述，請想像您正在透過電話向某人描述該圖表。避免模糊或過於廣泛性地描述圖表。例如，「長條圖在縱軸上以百分比顯示歐盟資金，在橫軸上顯示歐盟國家」，這樣的描述就太過於廣泛。

您需要解釋數據中發生的情況以及重要趨勢。不要只是重複標題，對於大多數圖表，描述需要比標題更詳細。

如果您選擇以表格形式或在 GOV.UK 中的無障礙性文件中提供原始數據，請確保表格格式正確，並考慮它是否為合適的替代方案。例如，當您有一個顯示長期資料序列的圖表時，趨勢描述將比表格更合適。使用者的體驗應該與查看圖表相同。

政府分析職能的指南​

閱讀政府分析職能部門關於以下內容的指南：

示意圖(Diagrams)​

僅當示意圖能夠讓內容更清晰或總結大量資訊時才使用示意圖。

示意圖需要清晰且易於理解。遵循政府設計原則，例如一個示意圖只涵蓋一個概念。

建立示意圖時，請嘗試：

  • 遵循正常的閱讀方向——使用者希望從左到右閱讀
  • 避免重疊的連接線
  • 使用簡單的形狀——以及盡可能減少不同類型的形狀
  • 清楚表明流程和流程圖的起點
  • 使用黑色和白色作為預設值

在正文中包含詳細說明示意圖的流程和關係。這對於看不到示意圖的使用者很有幫助。

將「替代文字」欄位留空。

資訊圖表​

資訊圖表通常是一種顯示資料、圖形、圖表或文字的圖片，用來解釋複雜的過程或主題概述。

如果資訊圖表太複雜，則可能很難具無障礙性。這是因為螢幕放大鏡使用者可能需要水平和垂直滾動圖片。如果不能一次性顯示整個圖片，這可能會使它們難以理解。同時，用文字來描述也可能會很困難。。如果不使用 SVG 格式，則圖片在放大時也可能會變得模糊和像素化。

如果您選擇發布資訊圖表，您應該提供純文字版本的內容，可以解釋資訊圖表中顯示的所有內容，並放在資訊圖表旁邊的正文內。

請閱讀政府分析職能網站上的資訊圖表指南，以了解有關建立無障礙性資訊圖表的更多資訊。

科學方程式​

在正文中描述方程式，並將「替代文字」欄位留空。

圖片版權標準​

這些版權標準適用於 GOV.UK 上的所有圖片，包括出版物中的圖片。

如果可能，請選擇可免費使用的圖片，像是：

如果您想更改圖片，例如裁剪圖片或更改顏色，請檢查您使用的授權是否允許更改或衍生。例如，某些創用 CC 授權具有「無衍生性商品」（no derivatives, ND） 規則。

支付第三方圖片費用​

如果您付費使用第三方圖片，您必須：

  • 一、購買正確類型的授權。
  • 二、為圖片提供適當的授權。

購買正確的授權​

所有政府網站上的內容將永久提供英國政府網站存檔。如果您使用的圖片不受皇家版權保護，您必須：

  • 獲得全球範圍的使用權
  • 獲得永久使用該圖片的權利（in perpetuity）
  • 獲得在任何事物上使用該圖片的權利
  • 商定費用

圖片授權不得：

  • 有時間限制
  • 基於頁面展示次數

請勿使用仍由供應商控制的嵌入圖片。

圖片來源（Image credits）​

務必始終標註圖片來源，除非它是開放政府授權（Open Government Licence, OGL）圖片。OGL 圖片包含在 GOV.UK 頁面底部的聲明中：「Open Government License v3.0」。

標註創用 CC 圖片和所有第三方圖片，說明圖片是否不能免費重複使用。。

了解在哪裡以及如何標註您的圖片。

使用人物圖片​

向版權持有者確認圖片中的人物是否同意您使用該圖片。

如果您自行安排拍攝，請取得當事人的書面同意。

考慮上下文脈絡：避免將可識別的人物與可能引起冒犯的事物相關連。