跳到主要內容
:::|
現在位置:

視覺化圖像設計應如何符合無障礙規範

  • 點閱:11387
  • 資料來源:本服務網
  • 日期:105-01-11

有關視覺化圖像結合無障礙規範設計方式,請參考以下說明:

1.使用良好的HTML標記語言及CSS設計為資訊圖像建立排版,確保當CSS樣式移除時仍可取得圖像內容資訊,同時便利視障者以輔具讀取。

2.圖表功能必須可使用鍵盤進行操作,同時注意鍵盤的遊走方式是否符合由上至下,由左而右的順序操作。

3.圖表請勿僅使用顏色來傳達內容訊息,以避免部分視障人士(如色盲)無法獲得圖表資訊。

4.圖表應搭配alt屬性或tltle屬性文字說明,以利視障者使用輔具讀取圖片資訊。若圖表內容資訊較複雜(大於150個字元),請另提供文字說明(可使用連結或檔案下載),以利視障人士可透過文字說明獲得完整圖表資訊。

範例說明:
以CSS樣式排版來建立視覺化圖像,使圖像符合無障礙規範要求。如下圖範例所示,當圖像在移除CSS樣式後仍可呈現圖像內資訊,便利身障人士使用輔具取得圖像訊息。請參考http://throup.org.uk/infographic/


視覺化圖像設計範例說明

 

上一頁| 回首頁