字體排版

製作和設計無障礙內容,不只是選擇易讀的字型。即使使用無障礙字型系列,低視力、認知、語言和學習障礙人士可能仍難以處理文字,因為其他元素 (例如字型變化、大小、間距和字間距) 可能會造成影響。

本單元將探討基本設計考量,讓您的內容更具包容性,並觸及更多觀眾。

字體

字體是影響文字無障礙的主要因素。您選擇的字體和樣式,決定了頁面設計的成敗。

使用無障礙字型,有閱讀、學習和注意力障礙 (例如失讀症和注意力不足過動症 (ADHD)) 的使用者,以及視力不佳的使用者,都能從中受益。

選擇常見的字體 建立無障礙設計最快的方法,就是選擇常見的字體 (例如 Arial、Times New Roman、Calibri、Verdana 等)。

許多字體研究顯示,與不常見的字體相比,常見的字體可讓使用者更快閱讀,並提升理解程度。雖然常見的字型本身並未比其他字型更易於存取,但有些身心障礙人士因為經常使用 (或繞過) 這些字型,因此較容易閱讀。

除了選擇常見的字體外,請務必避免使用華麗或手寫字體,以及僅提供一種字母大小寫的字體 (例如僅提供大寫字母)。這些特殊字型具有草書設計、奇特形狀或細線等藝術特徵,雖然看起來很漂亮,但對某些身心障礙人士來說,比起一般字型,更難閱讀。

字母特徵和字距

研究結果顯示,serif 或 sans serif 字體哪個比較好讀尚未有定論,但某些數字、字母或組合可能會讓語言學習和認知障礙者感到困惑。對於這類身心障礙人士,每個字母和數字都必須明確定義,並具有獨特特徵,以免字母和數字混淆。

常見的閱讀障礙犯人包括大寫的「I」(India)、小寫的「l」(lettuce) 和數字「1」。同樣地,b/d、p/q、f/t、i/j、m/w 和 n/u 等字母組合,在某些閱讀器上有時會左右或上下顛倒。

如果字母間距或字間距過於緊密,文字的可讀性也會降低。請特別留意字間距,尤其是有問題的字母組合 r/n 之間的字間距。否則「yarn」這類字詞可能會變成「yam」,「stern」變成「stem」,完全改變廣告詞的意思。

Google 字體等開放原始字體集合可協助您為下一個設計選擇最具包容性的字體。如果您使用 Adobe 產品,可以直接將鑄造場合作夥伴提供的無障礙字型系列嵌入設計中,包括特定的 Google 字型

尋找下一個字型時,請特別留意下列事項:

  • 盡可能使用常見的字型。
  • 避免使用繁複或手寫字型,以及僅有一種字母大小寫的字型。
  • 選擇具有獨特特徵的字型,特別留意大寫的 I、小寫的 l 和 1。
  • 查看特定字母組合,確認兩者並非鏡像對稱。
  • 檢查字間距,特別是 rn 字母組合之間的字間距。

字型大小和排版樣式

許多人認為,只要選擇無障礙字型系列,就能製作出包容的內容,但其實也必須考量字型大小和文字在頁面上的樣式。

舉例來說,如果文字過小,視力不佳或色盲人士可能無法透過輔助科技 (例如瀏覽器的縮放功能) 閱讀內容。其他使用者 (例如失讀症或閱讀障礙者) 可能無法順利閱讀斜體文字。螢幕閱讀器通常會忽略粗體和斜體等樣式方法,因此不會將這些樣式的意圖傳達給失明或視力不佳的使用者。

錯誤做法
h2 {font-size: 16px;}
正確做法
h2 {font-size: 1rem;}

由於您無法預測每位使用者的需要,因此在網站和網站應用程式中加入字型時,請務必考量以下規範:

  • 基本字型大小應使用相對值 (%、rem 或 em) 定義,以便調整大小。
  • 請限制字體變化的數量,例如顏色、粗體、全大寫和斜體,以提高可讀性。請改用其他方法在文案中強調字詞,例如使用星號、破折號或突顯個別字詞。
  • 盡可能在圖片上使用標記,而非文字。螢幕閱讀器無法讀取圖片中的嵌入文字 (除非加入額外程式碼),而且當低視力使用者放大時,嵌入文字也可能會變成像素化。

結構和版面配置

雖然字體樣式、字型大小和排版樣式對無障礙排版很重要,但網頁上文字的結構版面配置對使用者理解內容也同樣重要。

對於弱視、閱讀障礙人士,以及 美國 610 萬名 ADHD 患者來說,複雜的版面配置可能會造成實際的障礙。這類無障礙功能會導致內容缺乏明確的線性路徑、缺少標題,以及未分組的元素,讓使用者更難掌握內容位置,並跟不上內容流程。

無障礙版面配置設計的重要元素,就是讓關鍵元素彼此區隔,並將相似元素分組。如果元素距離太近,就很難判斷元素的起始和結束位置,尤其是當元素的樣式相似時。

請將廣告文案視為大綱中各個重點文字的集合。這有助於您規劃整體網頁結構,並在適當情況下使用標題、副標題和清單。

間距

段落、句子和字詞間距有助於讀者專注於文案,並增進對網頁的整體視覺理解。長行文字會對身心障礙讀者造成障礙,因為他們很難掌握位置,並跟上文字的流程。

較窄的文字區塊可讓讀者更容易繼續閱讀下一行。

內容對齊方式

許多身心障礙者在閱讀對齊的內容時也會感到困擾。左右對齊的文字間的間距不一致,可能會導致頁面上出現「空格河」,使文字難以閱讀。

文字對齊也可能導致字詞擠在一起,或以不自然的方式拉長,讓讀者難以找出字詞邊界。

幸好,我們有明確的間距規範和工具,例如 Good Line-Height黃金比例計算工具,有助於讓文案更易讀。遵循這些規範,有助於注意力不足症、閱讀障礙和視力障礙人士將注意力集中在文字,而非版面配置。

結構和版面配置的最佳做法

考量結構和版面配置時,請務必:

  • 使用主標題、副標題、清單、數字、引文區塊和其他視覺分組等元素,將網頁分成多個部分。
  • 使用明確的段落、句子和字詞間距。
  • 建立的文字欄寬度不得超過 80 個半形字元 (表音文字為 40 個半形字元)。
  • 請避免使用對齊的段落,因為這會在文字中產生「空白河」。

無障礙字體排版重點

只要瞭解使用者的需求,就能根據常識做出無障礙字體設計選擇。在設計及建構內容時,請務必將這個單元納入考量,這樣才能與最多人進行清楚的溝通。

進行隨堂測驗

測驗您對評估無障礙功能的認識

為了讓文字易於閱讀,我應該一律在文字和背景之間使用高對比。

正確。
雖然高對比模式對部分視障人士來說很有幫助,但其他人可能有視障問題,因此無法輕鬆閱讀高對比內容。
不正確。
如果對比度過高,部分身心障礙人士將無法閱讀您的內容。盡可能讓使用者的作業系統設定決定對比度。

哪些字型最適合無障礙設計?

系統字型,例如 Arial 和 Verdana。
與不常見的字體相比,常見的字體可提高閱讀速度和理解程度。
無障礙字體。
您可以使用 Adobe 字體上的 Google Foundry 等無障礙字體集合,為日後的設計選擇最包容的字體。
這不重要。
您選用的字型會影響可讀性。避免使用繁複的字體和藝術字體。