字體排版

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

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

字體

對文案無障礙功能造成極大影響的主要因素是字體。您選擇的字體和樣式可能會導致頁面設計無法正常運作。

對閱讀、學習和注意力障礙 (例如失讀症和注意力缺乏) 超活動障礙 (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 之間。否則,「紗線」等字詞可能會變為「yam」或「stern」,徹底改變文案的含義。

Google 字體等開放原始字體集合可協助您為下一個設計選擇最具包容性的字體。如果使用 Adobe 產品,可以直接將知名合作夥伴的可存取字型系列嵌入設計中 (包括選取「Google Fonts」)。

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

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

字型大小和排版樣式

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

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

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

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

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

結構和版面配置

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

對於低視能、閱讀障礙以及 610 萬名具有註意力不足的美國人,複雜的版面配置可能會成為真正的阻礙。這類無障礙功能會導致內容缺乏明確的線性路徑、缺少標題,以及未分組的元素,讓使用者更難掌握內容位置,並跟不上內容流程。

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

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

間距

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

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

內容對齊方式

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

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

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

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

考慮使用結構和版面配置時,請務必:

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

無障礙字體排版重點

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

進行隨堂測驗

測驗您對無障礙程度評估的瞭解程度

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

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

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

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