字體排版

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

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

字體

字體是影響文案無障礙程度的主要因素。字體和樣式的選擇會直接影響頁面設計。

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

選擇常見字體

如要快速建立無障礙設計,請選擇常見字體 (例如 Arial、Times New Roman、Calibri、Verdana 等)。

許多字體研究測試身心障礙者後發現,與不常見的字體相比,常見字體可加快閱讀速度,並提升理解程度。雖然常見字體本身並不會比其他字體更易於閱讀,但有些身心障礙者因為經常使用 (或避開) 這些字體,所以閱讀起來比較輕鬆。

除了選擇常見的字體外,請務必避免使用華麗或手寫字體,以及只有一種字元大小寫的字體 (例如只有大寫字元)。這些特殊字體採用手寫體設計、形狀奇特,或具有細線等藝術特色,雖然美觀,但對某些身心障礙者來說,卻比一般字體難以閱讀。

字母特徵和字元間距

Serif 或 Sans Serif 字體是否較易於閱讀的研究結果尚無定論,但某些數字、字母或組合可能會讓有語言學習和認知障礙的人感到困惑。對於這類身心障礙人士而言,每個字母和數字都必須清楚定義且具有獨特特徵,以免字母與數字混淆。

常見的易讀性問題包括大寫 I (India)、小寫 l (lettuce) 和數字 1。同樣地,對某些讀者來說,bdpqftijmw,以及 nu 等字母組合可能會左右或上下翻轉。

如果字母間距或字距太窄,也會降低文案的可讀性。請特別注意字元間距,尤其是 r/n 這組有問題的字母。否則「yarn」可能會變成「yam」或「stern」變成「stem」,完全改變文案的意義。

您可以透過 Google Fonts等開放原始碼字體集合,為下一個設計專案選擇最包容的字體。如果您使用 Adobe 產品,可以直接將字型合作夥伴提供的無障礙字型系列嵌入設計中,包括精選的 Google 字型

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

  • 盡可能使用常見字型。
  • 請避免使用手寫字型、花俏字型,以及只有一種大小寫的字型。
  • 挑選具有獨特特徵的字體,特別注意大寫 I、小寫 l 和 1。
  • 檢查特定字母組合,確保彼此不是完全相反的鏡像。
  • 檢查字元間距,尤其是 rn 字母對之間的間距。

字型大小和排版樣式

許多人認為只要選擇無障礙字型系列,就能製作多元包容內容,但字型大小和網頁上的文字樣式也很重要。

舉例來說,如果文案太小,低視能或色盲使用者可能無法閱讀,因此會使用輔助技術 (例如瀏覽器縮放) 閱讀文案。其他使用者 (例如有失讀症或閱讀障礙者) 可能難以閱讀斜體文字。螢幕閱讀器通常會忽略粗體和斜體等樣式方法,因此無法向失明或低視能使用者傳達這些樣式的意圖。

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

由於您無法預測每位使用者的需求,因此在網站和網頁應用程式中新增字型時,請務必遵守下列規範:

  • 應使用相對值 (百分比、rem 或 em) 定義基本字型大小,以便調整大小。
  • 為提高可讀性,請限制字體變化數量,例如顏色、粗體、全部大寫和斜體。請改用其他方法強調廣告文案中的字詞,例如星號、破折號,或醒目顯示個別字詞。
  • 盡可能在圖片上使用標記,而非文字。螢幕閱讀器無法讀取圖片中的內嵌文字 (未新增額外程式碼的情況下),且內嵌文字在低視能使用者放大時也可能會像素化。

結構和版面配置

字體、字型大小和排版樣式對於無障礙排版來說非常重要,但網頁上文案的結構版面配置,對於使用者瞭解內容也同樣重要。

複雜的版面配置對低視能、閱讀障礙和美國 610 萬名注意力不足過動症患者來說,都是一大障礙。這類障礙會導致使用者難以掌握內容的脈絡,因為缺少清楚的線性路徑、標題和未分組的元素。

無障礙版面配置設計的重要環節,是讓重要元素彼此區別,並將類似元素歸類在一起。如果元素太過接近,就難以分辨元素的起點和終點,尤其是樣式相似的元素。

請將文案視為大綱上的一組重點。這有助於規劃整體頁面結構,並在適當的時候使用標題、副標題和清單。

間距

段落、句子和字詞間距有助於讀者專注閱讀文案,並提升對網頁整體視覺效果的理解。如果文案太長,有閱讀障礙的讀者可能會難以跟上文案的脈絡,因此無法順利閱讀。

如果文案區塊較窄,讀者就能輕鬆閱讀下一行。

內容對齊方式

對許多身心障礙者來說,閱讀齊行文字也是一大困擾。左右對齊的文字中,字與字之間的間距不平均,可能會在頁面上形成「空格河」,導致文字難以閱讀。

文字左右對齊也可能導致字詞擠在一起或以不自然的方式延展,因此讀者可能難以找出字詞界線。

幸好,間距有明確的規範,而且有 Good Line-Height黃金比例計算機等工具,可協助我們提升文案的可讀性。遵循這些準則,有助於注意力不足障礙、閱讀障礙和視障人士更專注於文案,減少受到版面配置影響。

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

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

  • 使用標題、副標題、清單、數字、引文區塊和其他視覺分組等元素,將網頁分成多個部分。
  • 使用明確定義的段落、句子和字詞間距。
  • 建立文案欄,寬度小於 80 個半形字元 (表意文字為 40 個半形字元)。
  • 避免使用段落對齊方式,以免在副本中產生「空間河」。

無障礙排版重點

無障礙排版可歸納為根據使用者需求設計的常識。設計及建構內容時,請牢記本單元所學,盡可能清楚地與最多人溝通。