跳到主要內容區塊

資訊圖像(Infographic)的無障礙設計考量

非文字內容的替代

網站無障礙規範要求對於非文字的內容必須提供相等意義的替代,除非非文字的內容是文字內容的替代。這讀起來像是在繞口令,然而它的意思是指非文字型態的內容如圖片、聲音、影片等,由既有的文字內容轉製或編製而成,在網頁上下文脈絡之中兩者可互相參照,就不在規範的規定之內,不然一直相互替代就要陷入無窮迴圈之中,沒完沒了。

資訊圖像不應只是單一個體

為什麼要提非文字內容替代這件事情呢,因為現在網站內容的設計運用很多資訊圖表,但是常常就是在網頁中只放一張資訊圖表,上下文脈絡中沒有其他的說明內容,而且大都可能是一張圖片的檔案,如果你是一位很熟悉甚麼樣的網站設計對使用者可能會造成甚麼樣的障礙問題,應該不難知道這可能對全盲的使用者所帶來的問題,因為既然是個資訊圖表,想必其中必然含有很多重要的訊息,而這些可能不是圖片的替代文字說明(alt)能夠完整表達出與圖片相等的意義。一般製作資訊圖像時,通常都會有相關的參考素材,所以要在資訊圖像的上下文中提供替代的文字說明,難度不高,只是在網站設計時必須要考量到這件事情。資訊圖像的製作格式除了最常見的圖片外,還有PDF格式,或者由HTML與CSS編寫的網頁格式,各種製作方式有其需注意的要點,並且彼此間沒有絕對的好壞之分,必須留意符合使用者瀏覽的最佳做法。更重要的一點,是必須去重視資訊圖像在整體網站服務所要達到的目的,它的存在也許不應只是單一個體,而是可與其它內容組件結合的有機體(參考澳洲政府Safe Work Australia)。

圖片格式

一個圖片型態的資訊圖像,最佳的無障礙作法,除了在網頁圖片屬性alt提供描述性的替代說明,同時在資訊圖像的上下文脈絡中提供文字說明,或者提供頁面連結的方式連結至說明內容。如何讓一個資訊圖像成為一個有機體,如何傳遞訊息及期望觀看的訪客有甚麼行動或反應,設計案例可以參考澳洲政府Safe Work Australia

PDF格式

PDF格式的最佳無障礙作法,不要使用掃描文件檔,且使用Adobe Acrobat Professional來製作具可讀性的文件,因為一般常見的是以文件編輯軟體另存成PDF格式,雖然文字具可讀性,但欠缺語意結果及圖片、影音等替代說明,而以Adobe Acrobat Pro可添加具語意的內容結構(如heading),以及圖片的替代文字等,讓螢幕報讀器可讀取PDF內容如同網頁格式。

HTML與CSS網頁格式

使用原生網頁語法的網頁格式,對於任何使用者來說都是比較容易瀏覽與操作的使用環境,尤其是對使用螢幕報讀器的視覺障礙者而言更是友善的環境,同時,也提升網站SEO的程度,讓搜尋引擎更容易找到,設計案例可以參考Web Accessibility for Designers

結語

有關資訊圖像的不同格式在與螢幕報讀器、網站RWD設計及搜尋引擎SEO的相容程度,以下方表格很快的了解。最後,再次強調,各種網站設計的方案沒有好壞, 應該重視的是資訊圖像在整體網站服務所要達到的目的,它的存在也許不應只是單一個體,而是可與其它內容組件結合的有機體。

類型/相容度 螢幕報讀器程度 RWD程度 SEO程度
圖片格式
PDF格式
HTML與CSS網頁格式