隨手翻·弔詭的可訪問性

譯者註：隨手翻譯的，也沒有在管語句通順與否，而且太設計相關了，就沒有放在外刊上。因為 17 年上半年想做一下無障礙，翻譯這篇且做一個 flag。無障礙啊，是一個永遠填不完的坑（笑

原文鏈接：Accessibility Whack-A-Mole by Eleanor Ratliff

設計師有時喜歡說「設計是為了解決問題」，這麼下定位也就意味著設計本身也是會產生問題的，在設計的可訪問性領域最能證明這點。往往是在多個狀況同時發生得時候，我們才會發現新的問題。但這也是設計的迷人之處：無窮的實驗性、為不同場景做出妥協以及追求極致帶來的興奮感。

可以說內心深處我將自己定義為一個理想主義者，我希望每個人都能平等地使用一切，以此為動力我投入了極大的熱情到可訪問性上。

可訪問性的主語是？

可訪問性的針對的不僅僅是在聽書讀寫上有障礙、或者行動不便、有認知障礙或在語言、精神上困難得用戶，它得受益方會是我們所有人，事實上大部分人在一生中都會有或長或短的一段行動不便的時間，可能因為受傷或者遇到意外。可訪問性不是一個特殊場景才會出現的問題，它每時每刻都存在在我們的生活中，默默地影響著大部分人。

網頁內容無障礙指南 (WCAG) 2.0提供了很多可參考得無障礙指導，即便 W3C 為這個領域做了這麼多，可訪問性依然是一個難題。如果我們面對的是一個沒有確切答案的可訪問性問題怎麼辦？如果我們解決了一個問題又引發了新的問題要怎麼辦？

我發自肺腑地認為這是一個要嚴肅對待的問題。我有閱讀障礙，經過多方觀察自己，我發現降低文本和頁面背景色的對比度可以有效地緩解我的閱讀壓力。但是視力受損人群看對比度低的文本又有障礙。一旦你真的開始認真思考了，就會發現可訪問性得衝突可大可小無處不在：

• 單手持機主要是針對右撇子，可是世界上有 10% 是左撇子。

• 在懸停時顯示大量信息的設計，可能造成在移動端訪問時這些信息會擋住其他內容。

• 除了顏色標示外，鏈接要提供別的效果可以表示「這是一個鏈接」。下劃線是使用最多也最好理解的方案，但是下劃線又常常影響到西文的下伸字母（譯者註：例如英文中 p q j y），導致人們不容易辨認字形。

你可能會誤認為用戶或長或短地忍受同一個瀏覽器可訪問性缺陷會有利於該瀏覽器對肯訪問性得改進。其實用戶的忍耐度頗高，對於不常用得功能或者微小的問題都能自行克服了…

我們做的每一個改變都要反覆校驗是不是造成了新的可訪問障礙，對於這一點，讓我告訴你一個關於字體的故事。

為新品牌準備的新字體

在惠康，我們兼顧發展新品牌和重新設計我們得網站。我們需要將惠康所做的令人振奮得事反應在新品牌上：惠康支持了很多大型慈善機構的科學家還有學者們。我們想要為正在尋找人才和代表著廣闊的現代研究的組織機構規劃藍圖。這一切都應該建立在良好的可訪問性基礎上。我們要如何通過包容性重新設計我們的品牌呢？

最後我們決定把設計過程公開進行，設計不應該是黑盒的，經過一系列的討論和下結論才會有最終的成果。越早得到更多的反饋，有利於設計師得到不同角度得看法，這樣對設計文檔和設計定稿大有好處。

當新設計的站點上線之後，有些用戶對站點使用的字體提出了意見。失語症患者對站點標題使用的 Progress Two 字體識別困難。閱讀困難的我對當時設計竟沒有考慮到這一點，感到深深地抱歉。

對可訪問性、易讀性和可讀性的關注可以說推動了我職業生涯的發展。在站點重構項目組工作了一年之後，我們是不是被一開始的設計規範制約了？

我們是不是真的要用一個對於失語症患者而言有問題的字體？可能對他們來說，站點的新設計其實沒有任何意義，甚至增加了閱讀困難。在被恐懼侵襲了之後，我決定著手做一些調查。

是什麼讓字體變得不易讀了？

這個問題其實沒有答案。我查過各種領域中的複雜論文，企業只是竭盡全力地把其實什麼問題就解決不了的解決方案用合 (gao) 適 (ang) 的價格賣出。

Thomas Bohm 寫過一篇《有誤讀性的字母概覽》，英國閱讀障礙者協會 (BDA) 也曾發表過《對閱讀障礙者友好的字體清單》，我們常用的字體幾乎都沒有出現在這份清單上，包括廣泛使用的 Arial 和 Helvetica 也不能說是完全合格。雖然根據另一份報告，無襯線字體其實已經足夠優秀了。

被字體問題困擾的不止是閱讀障礙者，最近我們通過可用性測試發現一些自閉症患者也會因為字體造成可訪問性障礙。人類的多元性神經系統非常複雜，有極大的差異性，對普通人而言正常的字體可能閱讀障礙者無法理解，自閉症患者之間的情況甚至還有差異。

我幾乎要放棄在剛開始的這些調研中了，不過好歹我已經知道了研究的方向。

過程

目前已經有專為閱讀障礙者設計的字體了，但是能解決所有場景的方案還沒有出現。個人認為，Open Dyslexic 其實挺難看清的。既然我們的目標是越通用越好，所以 Open Dyslexic 就被剔除出備選列表了。其實最好的解決方案應該是允許用戶載入自定義的字體樣式。說真的，網站應該永遠保有用戶這一項權益。如果你知道要怎麼為自己量身打造自定義樣式是最好不過，但從我作為一個很遲才意識到自己有閱讀障礙問題的人來說，從前我是不明白為什麼閱讀對我來說如此困難，更別提找到讓自己輕鬆閱讀的方法了，所以我們不能等著用戶自我發現自我探索，應該可以為他們做的更多。

我們的資深圖形設計師 Mariane Dear 已經和字體設計師 Gareth Hague 考慮過在 Progress Two 基礎上改進。想著能不能根據 BDA 中的推薦字體做一些調整？我們可不可以設計出一套既符合視覺期望又能照顧到閱讀障礙者？我們打算朝著這個方向努力，真能做到就好了。

來吧，Wellcome Bold

當我第一次看到 Progress Two 的時候，我並沒有特別喜歡的感覺 — 但我不得不承認它很契合我們預期的重塑後的品牌氣質。Wellcome Bold 由 Progress Two 發展而來，但也具有它獨特的地方，總之我已經喜歡上這個字體了。

我們根據 BDA 給出的標準，檢驗字體的可用性是否得到提高。

幻覺數字 1

字母 L 的大小寫形式和數字 1 這三個字元字形相似，會對讀者造成閱讀障礙。我們發現 Progress Two 對字母 l 的大小寫沒有做特殊處理，為了方便閱讀 Hague 做了一點異化：

Modern? Modem?

在有些字體中，r 和 n 連在一起時看著特別像 m，比如 modern 會被誤認為是 modem。將字母筆畫走勢略作調整，可以更好地區分它們。

開口

counter 指的是字體的中空部分，大部分情況下 counter 越大字體越明顯。

鏡像

有些閱讀障礙者會在鏡像或者中心對稱的形狀上栽倒，BDA 建議把 b 和 d 還有 p 和 q 設計成有一定區別的，而不是直接翻轉彼此得到。

字形

大部分人都不會一個字母一個字母地閱讀，而是根據字形直接映射到單詞上。不僅僅是閱讀障礙者將受益於調整之後得 Progress Two，我們在優化字體的過程中還優化了我們的設計流程，這樣所有的用戶都能擁有更好的體驗。

測試、測試再測試

在可用性測試環節，我們有幸和不同類型的用戶交流，其中就包括了閱讀障礙者、自閉症患者還有讀屏軟體使用者。

每當要做出改變的時候，我們總是擔心前進的方向是否正確。為避免造成遺漏，用戶體驗師 Nancy Willacy 建議我們做一個大型調查，囊括儘可能多的用戶。媒體組的同事幫我們聯繫到了幫助閱讀障礙、運動障礙、自閉症還有多動症患者的慈善組織，通過 twitter 進行調研。這些慈善組織會轉發我們的問卷。

雖然我們的調查只是一個快速得到反饋的方案，但是從反饋上來看沒有用戶表示設計上有致命的缺陷，應該可以判定我們是在正確的道路上前進。根據調研，比起 Helvetica（我們用這個常見的無襯線字體作為對比） 用戶更喜歡調整之後的 Progress Two，沒有調整過的 Progress Two 歡迎度最低。

大家都做得到

即使與你合作的設計師無法提供合適的字體，還是有很多事情可以做的。

類型

選好字型之後，還需要找到清晰明了的字體。

• 仔細觀察辯證對待。記著我們之前列下的 checklist，注意不要又影響到用戶的閱讀體驗了，就像對閱讀困難者造成障礙的字形。

• 襯線還是無襯線？有研究報告表明在屏幕閱讀使用無襯線字體更適合，特別是在低解析度的屏幕上，襯線字體可能會糊在一起，導致看不清楚。如果現有的品牌字體已經用的是襯線字體或者其他比較花哨的字體，要謹慎地暴露這個品牌，確保已經在各種場合都測試過了。

• 用加粗來強調。一些調查表明斜體和全部大寫都會影響用戶的閱讀速度。如果要表示強調，用粗體比較合適。

• 慎用下劃線。下劃線是鏈接的標配，但如果鏈接標籤的子元素繼承了 text-decoration 就會造成疑惑。未來用上 text-decoration-skip 屬性後，這個問題應該可以得以解決。現在就先將 text-underline 設置為默認值。

空隙

要注意字母之間、單詞之間的空隙。

• 選擇合適的行長。在不同情況對於行長的要求會有些差別，但是總體上來說一行 60 到 70 個字元是比較合適的區間。

• 行距得大一些。不同的字體適合的行距也會不同，不過行距等於字型大小的 1.5 倍這個定律總是適用的。

• 字母間距要小心。和牛仔褲一個道理，太鬆散或者太緊密都讓人不舒服。

文案

文案的重要性不言而喻。

• 儘可能簡潔。長句就算了吧，標題儘可能簡潔明了。

• 避免使用行話。從用戶的角度寫文案，除非萬不得已，不然不要使用專業術語。

全部都搞定了？

並沒有。

不存在完美的字體。雖然為提高惠康官網得用戶體驗，我們已經做了很多，但依然有用戶會因為我們的標題字體、或者使用了 Helvetica、Arial 還有 sans-serif 的正文字體而產生閱讀障礙。無論我們做多少努力，都會有用戶需要使用他們偏愛的樣式覆蓋站點提供的樣式。我們需要尊重用戶這樣得需求，允許用戶做出這樣得操作。

• 根據標準構建站點。確保所有的自定義技術都能在你的網站上跑通。

• 謹慎使用 icon font。如果用戶用自定義樣式覆蓋了站點的字體設置，可能所有 icon 都將失效。

• 告訴人們如何修改字體樣式。BBC 的方案可能值得借鑒。

語義得體

想一口氣得到完美的解決方案，結果可能是打出了不斷修復和反覆測試的安全牌。不過給我們測試和完善的機會，同時也增加了方案的風險性，可能最終還會回到原始方案。

安全區之外是辛苦的，但是惠康需要的也不是呆在安全區里的人。我們上下同心，雖然前路有坑有風險，但我們會吸取經驗教訓。如果因為恐懼就放棄做出改變，那我們只會停滯不前。

優化過程中激烈的爭論時不時會發生，這也是新靈感爆發得契機。在未來，我還會不斷嘗試新的事物。

參考資料

• Change the Fonts and Colors Websites Use

• How Typography Can Save Your Life

• Microsoft』s Inclusive Design Toolkit

推薦閱讀：