字體排版

製作和設計無障礙內容並非只選擇容易閱讀的字型即使字型是無障礙的字型系列,低視能、認知、語言和學習障礙者仍可能因字型變化、大小、間距和字體等其他元素而難以處理文字。本單元將探討基本設計考量重點,協助您打造更多元包容的內容,並觸及更多使用者。

字體

字體是對文案無障礙功能有重大影響的主要因素。您選擇的字體和樣式可能會影響網頁設計。

如果使用者有閱讀、學習和注意力障礙 (例如失讀症和注意力缺乏專注力的高活動障礙 (ADHD),以及視障者),建議使用無障礙字體。

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

許多對身心障礙者進行的字體研究也顯示,比起不常見的字體,一般字體可以加快閱讀速度,並提供更深入的理解程度。相較於其他字體,這些常見字體並不容易理解,但有些身心障礙者在使用 (或環繞) 這類字體方面已累積許多經驗,因此能更輕鬆閱讀。

除了選擇通用的字體外,務必避免使用華麗的字體或手寫字體,並且避免使用只有一個字元的字體 (例如僅限大寫字元)。這類特殊字體具有草寫設計、古怪的形狀或細線等藝術特徵,看起來可能很棒,但有些身心障礙者比常見的字體更難閱讀。

字母特性和基調

這項研究指出 Serif 或 Sans Serif 字體是否更容易閱讀,但特定數字、字母或組合可能會造成語言學習和認知障礙人士混淆。對於這類身心障礙者,每個字母和數字都必須定義明確,且不能與數字混淆。

常見的可讀性令人反感內容是大寫的「I」(印度)、小寫「l」(lettuce) 與數字「1」。同樣地,某些讀取器的 b/d、p/q、f/t、i/j、m/w 和 n/u 等字母組合有時可能會翻轉左右或上下。

此外,當字母間距或動作過於緊張時,副本的易讀性也會降低。因此請特別留意核心狀況,尤其是在有問題的字母組合 r/n 之間。否則,「毛線」等字詞可能會變成「yam」或「貼」 變成「字根」,整個文案的含義。

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

尋找下一個字體時,請特別留意下列幾點:

  • 盡可能使用常見的字型。
  • 避免使用過於精緻或手寫的字型,也不要使用只有一個字元的字型。
  • 請挑選具有獨特特性的字體,並特別留意大寫 I、小寫 l 和 1。
  • 檢查特定字母組合,確保這些組合並非彼此完全鏡像。
  • 檢查核心位置,特別是在 r/n 字母組合之間。

字型大小和字體樣式

很多人都以為只要選擇無障礙字型系列,就能創造多元包容的內容,但還有一點也很重要,那就是考量字型大小和文字樣式。

舉例來說,視力或色盲人士如果太小,使用 AT 等 AT 之類的瀏覽器縮放功能來閱讀副本。其他使用者 (例如有失讀症或閱讀障礙者) 可能無法閱讀斜體文字。螢幕閱讀器通常會忽略樣式方法 (例如粗體和斜體),因此不會向失明或低視能的使用者傳達這些樣式的意圖。

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

由於您無法預測每位使用者的需求,因此在數位產品中加入字型時,請務必遵循下列準則:

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

結構和版面配置

雖然字體、字型大小和字體排版樣式對無障礙字體排版來說至關重要,但網頁上的文案結構版面配置也同樣重要,對使用者而言也同樣重要。

複雜的版面配置可能會對低視能、閱讀障礙和在美國 610 萬名使用者造成注意力不足的阻礙帶來阻礙。這類身心障礙者會因為缺乏清楚的線性路徑、標題缺漏和元素未分組,導致使用者更難保留地點並跟隨文案流程。

無障礙版面配置的設計有一個重要層面,就是讓重要元素彼此區分,並將類似的元素分組。如果元素太靠近,可能很難判斷元素開始和結束的位置,特別是樣式類似的元素時。

請將文案想像成大綱中個別的項目符號集合。這將有助於擬定整體頁面結構,並視情況使用標題、子標題和清單。

間距

段落、句子和字詞間距也十分重要,因為讀者能專心閱讀文案,並加入網頁整體的視覺理解。對身心障礙讀者來說,長行文案可能會阻礙閱讀,因為他們無法掌握報導內容脈動。狹窄的文案區塊,能讓讀者更輕鬆地繼續閱讀下一行。

內容對齊方式

許多身心障礙者的另一個困擾是閱讀正版文案。左右副本中字詞之間的間距不平均,可能會導致「空格的河流」構成頁面,導致副本難以閱讀。

文字正當理由也可能會導致字詞混合或以不自然的方式延伸,因此讀者很難找到字詞界線。

幸好,我們針對間距和工具制定了明確的規範,例如良好行高黃金比例計算機等,方便您輕鬆取得文案。只要採用這些規範,就能幫助有註意力障礙、閱讀和視覺障礙的使用者專注在文案中,避免聚焦於版面配置。

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

規劃結構和版面配置時,請務必:

  • 您可以使用標題、子標題、清單、數字、引用區塊和其他視覺群組等元素,將網頁分成不同部分。
  • 使用清楚定義的段落、句子和字詞間距。
  • 複製資料欄的寬度不得超過 80 個字元 (標誌圖為 40 個字元)。
  • 避免左右段落對齊,這會導致文案「多向空間」。

無障礙字體排版重點

您可以依據使用者需求,將可存取的字體排版細分為常見的常態設計選擇。在設計及建構內容時,只要能記住這個模組,就能在更多人之間清楚地傳達訊息。

隨堂測驗

測試您對無障礙功能評估相關知識

為確保文案清楚易讀,我一律在文案與背景之間使用高對比度。

正確。
雖然高對比元素對某些視障人士來說可能具有價值,但有些人則可能因為身心障礙而難以閱讀高對比內容。
不正確。
如果影片的對比度過高,身心障礙者則無法閱讀你的內容。如果可以,請讓使用者的作業系統設定決定對比度。

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

系統字型,例如 Square 和 Verdana。
相較於不常見的字體,常見字體還能加快閱讀速度,並提供更深入的理解程度。
無障礙字體。
像 Google Foundry 在 Adobe Fonts 上推出的字體排版,可協助你為下一種設計選擇多元包容的字體。
沒有關係。
此外,所選字型會影響可讀性。避免使用過於詳細的指令碼和藝術字型。