周日的時候去看了徐崢的電影《我不是藥神》，電影很走心，很現(xiàn)實，反正我是看哭了。現(xiàn)在的人，安全感缺失，有一部分原因可能就是看不起病吧?，F(xiàn)如今，很多人還沒能享受到該有的社會福利，在陽光照不到的角落里，猶如被拋棄，冷的瑟瑟發(fā)抖。
還記得前段時間看到的一個蘋果宣傳片，《Apple不為多數(shù)人，也不為少數(shù)人》，感動了不少人?？赐觌娪昂?，不自覺的想到了蘋果淄博廣告公司的這個宣傳片，總覺得蘋果所幫助的群體，跟《我不是藥神》中所展現(xiàn)的小眾群體，很是類似，所以今天的文章也算是應(yīng)景吧。這篇文章，講的就是要為所有人設(shè)計，讓設(shè)計也能夠照顧到容易被忽視的小眾人群。
數(shù)字產(chǎn)品可訪問性是指構(gòu)建可供廣泛人群使用的數(shù)字內(nèi)容和應(yīng)用的實踐，包括具有視覺，運(yùn)動，聽覺，語言或認(rèn)知障礙的個人。
使網(wǎng)站為所有人設(shè)計，被人過度神話了，認(rèn)為那樣做既困難成本也高，但實際上并非如此。從設(shè)計初期就開始考慮產(chǎn)品可訪問性，其實并不會增加額外的功能或內(nèi)容，因此也不應(yīng)該會有額外的成本和努力。
但是，要修復(fù)一個已經(jīng)無法訪問的網(wǎng)站可能就需要費(fèi)一番精力了。 我以前在 Carbon Health 工作時，我們使用 AXE 插件來檢查了網(wǎng)站的可訪問性。 我們發(fā)現(xiàn)僅在主頁上就28個違規(guī)行為需要解決。 雖然聽起來很復(fù)雜，但我們發(fā)現(xiàn)這些問題并不難以糾正，只是需要花費(fèi)一些時間和成本來研究這些問題，最后差不多幾天功夫我們就全部解決了。
我想分享一些我們曾用過的簡單步驟，來改善你的網(wǎng)站可訪問性。這些原則將側(cè)重于網(wǎng)站和移動端。
在開始之前，先來談?wù)劄槭裁醋鲞@些優(yōu)化很重要。
作為設(shè)計師，我們有能力和責(zé)任確保每個人都能訪問我們設(shè)計的內(nèi)容，無論其能力，背景或使用場景如何。 做好產(chǎn)品可訪問性可以為每個人帶來更好的體驗。
美國有超過5600萬人（近五分之一）和全世界超過10億殘疾人。 在2017年，有814起網(wǎng)站可訪問性訴訟在聯(lián)邦和州法院提起。僅這兩項數(shù)據(jù)就可以讓我們相信設(shè)計可用性的重要性。
可訪問性還有一個很好的商業(yè)案例：研究表明，可訪問的網(wǎng)站有更好的搜索結(jié)果，能夠覆蓋更多的受眾，對 SEO 友好，下載時間更快，同時還鼓勵使用更好的代碼結(jié)構(gòu)，他們也總是會有更好的可用性。
以下講到的7個方面是很容易做到，可以幫助你的產(chǎn)品更接近滿足 Web 內(nèi)容可訪問性規(guī)范（WCAG 2.0）AA級標(biāo)準(zhǔn)。同時建議最好也去研究下最常用的輔助功能——包括屏幕閱讀器，屏幕放大器和語音識別工具。
1. 增加足夠的顏色對比度
△ 對 Guadalupe 來說，按鈕具有更好的色彩對比度將更易閱讀。
顏色對比是一個經(jīng)常被忽視的 Web 可訪問性問題。 如果對比度低，弱視的人很難從背景顏色中讀取文本。 在關(guān)于視力損傷和失明的情況說明書中，世界衛(wèi)生組織（WHO）估計有2.17億人患有中度至重度視力障礙。 因此，考慮文本和背景之間的充分對比是至關(guān)重要的。
根據(jù) W3C 規(guī)定，文本與其背景之間的對比度應(yīng)該至少為4.5比1（符合AA級別）。對于較大和較重的字體，比率相對寬泛一些，因為它們在較低對比度下也能容易閱讀。 比如使用的字體為18pt或14pt粗體，則最小對比度將降至3比1。
有些工具可以幫你快速檢查。 如果你使用的是 Mac，建議使用對比應(yīng)用（https://usecontrast.com），使用此工具可以使用顏色選擇器立即檢查對比度。 如果您想獲得更詳細(xì)的分?jǐn)?shù)，我建議您在 WebAIM顏色對比檢查器上輸入顏色值。 此工具將計算常規(guī)和較大文本，得出級別（A，AA，AAA）的分?jǐn)?shù)。你可以更改顏色值并實時查看結(jié)果。
參考資料： WCAG Visual Contrast
2. 不能僅使用顏色來區(qū)分關(guān)鍵信息
△ 對 René 來說，當(dāng)圖形對色盲患者友好時，他會感到很開心!
當(dāng)你在傳達(dá)重要的事情、響應(yīng)動作或提示時，不要把顏色作為唯一的視覺線索。弱視或色盲的人可能很難理解你的內(nèi)容。
嘗試使用顏色以外的符號，例如文本標(biāo)簽或圖案。 在界面上顯示錯誤時，不要太依賴顏色，添加圖標(biāo)或在消息中寫上一個標(biāo)題。 考慮為段落中的鏈接文本添加視覺提示（如字體加粗或增加下劃線），以便鏈接能突出顯示。
如果只使用顏色來區(qū)分?jǐn)?shù)據(jù)，那么具有更復(fù)雜信息（如柱狀圖和曲線圖）的元素就特別難閱讀。使用其他視覺元素來傳達(dá)信息，如形狀、標(biāo)簽和大小。還可以嘗試將多種模式進(jìn)行組合，以使差異更明顯。Trello 的色盲模式就是一個很好的例子。啟用后，通過添加紋理標(biāo)簽?zāi)茏尵W(wǎng)站變得更容易訪問。
一個很好的技巧是將你設(shè)計的內(nèi)容以黑白模式打印出來，看看你是否仍然可以理解其中的所有內(nèi)容。 你還可以使用 Color Oracle 這樣的應(yīng)用，它可以實時顯示具有常見色覺障礙的人看到的內(nèi)容。 這些提示可幫助你確保站點(diǎn)中的信息障礙與顏色無關(guān)。
參考資料：WCAG Visual Contrast Without Color
3. 設(shè)計可用焦點(diǎn)狀態(tài)
△ Tyler 的假手可以輕松切換按鈕焦點(diǎn)狀態(tài)
你是否注意到有時會出現(xiàn)在鏈接，輸入框和按鈕周圍的藍(lán)色輪廓？ 這些藍(lán)色輪廓稱為焦點(diǎn)指示符。 默認(rèn)情況下，瀏覽器使用 CSS 偽類在元素選中時顯示這些輪廓。 你可能會發(fā)現(xiàn)這些默認(rèn)焦點(diǎn)指示符不是很漂亮，然后一門心思的想要隱藏掉它們。 但是，如果你去掉了這些默認(rèn)樣式，請務(wù)必將其替換為其他內(nèi)容。
焦點(diǎn)指示符可幫助人們了解哪個元素具有鍵盤焦點(diǎn)，并幫助他們在瀏覽站點(diǎn)時清楚自己的位置。 這些都是對盲人，需要屏幕閱讀器，行動不便，受過腕管損傷以及喜歡這種導(dǎo)航的高級用戶有用的技術(shù)。甚至我們中的一些人也會使用鍵盤作為他們?yōu)g覽網(wǎng)頁的主要方式。
應(yīng)該可以聚焦的元素有：鏈接，表單字段，小部件，按鈕和菜單項。 他們需要有一個焦點(diǎn)指示符，使它們看起來與周圍的元素不同。
你可以設(shè)計一個符合你網(wǎng)站風(fēng)格的焦點(diǎn)指示符，并與你的品牌保持風(fēng)格一致。 創(chuàng)建一個高度可見的狀態(tài)，并具有良好的對比度，使得它從其他內(nèi)容中脫穎而出。
參考資料：W3C Focus Visible
4. 在表單和輸入項外添加標(biāo)簽和說明
△ Mr. López 不斷嘗試將占位符文本轉(zhuǎn)換為列表項標(biāo)簽
僅使用占位符文本作為標(biāo)簽是設(shè)計表單時最大的錯誤之一。 當(dāng)位置有限或想讓設(shè)計更簡單和現(xiàn)代時，我們可能會想要順應(yīng)這種趨勢。 占位符文本通常是灰色的，對比度不高，因此很難閱讀。 如果你像我一樣，你通常會忘記你在寫什么，所以一旦文本消失，很難知道這些字段是什么。
使用屏幕閱讀器的人通常使用 Tab 鍵瀏覽表單以跳過表單控件。 依賴<label>元素讀取控件， 通常會跳過任何非標(biāo)簽文本（如占位符文本）。
始終幫助人們了解他們應(yīng)該做什么，并以一種明確的形式給出。最好是標(biāo)簽不會消失，即使這個人正在輸入信息；人們不應(yīng)該失去他們的寫作背景。當(dāng)設(shè)計師在他們的表單中隱藏描述時，其實是犧牲了可用性而追求簡潔。
這種做法并不意味著你必須用不必要的信息來混淆你的設(shè)計，只是確保提供必要的線索。太多的指導(dǎo)性文本可能和太少的問題一樣。目標(biāo)是確認(rèn)每個人有足夠的信息來完成他們的任務(wù)而沒有障礙。
參考資料：WebAIM Creating Accessible Forms
5. 為圖片和其他非文本內(nèi)容準(zhǔn)備有用的替代文本
△ Robin 在圖片中發(fā)現(xiàn)了一個新的朋友
弱視的人經(jīng)常利用屏幕閱讀器來「聽」網(wǎng)頁。這些工具會將文本轉(zhuǎn)換成語音，這樣人們就可以在網(wǎng)站上聽到單詞。
有兩種方法可以顯示替代文本：
嘗試描述圖片中發(fā)生的事情，以及它對故事的重要性，而不僅僅是說「圖片」。
如果圖片純粹是裝飾性的，或者由于上下文已經(jīng)解釋了內(nèi)容而變得多余。 嘗試添加一個空的<alt>屬性將使屏幕閱讀器跳過它。 如果不寫任何替代文字，一些屏幕閱讀器將讀取文件名，這樣的用戶體驗會很糟糕。
谷歌正在研究一種圖像字幕人工智能，它能以94%的準(zhǔn)確度描述照片（https://petapixel.com/2016/09/23/googles-image-captioning-ai-can-describe-photos-94-accuracy）。 這個模型是開源的，仍在研究中，希望我們能看到它在不同的產(chǎn)品中使用。 與此同時，我們應(yīng)該在我們的內(nèi)容中手動添加描述圖像含義和功能的文本。
參考資料：W3C Using Alt Attributes
6. 在內(nèi)容上使用正確的標(biāo)記
△ Noah 一直想成為一名建筑師
標(biāo)題，標(biāo)記內(nèi)容開始的地方。它們是給文本加上的標(biāo)簽，用來定義其風(fēng)格和目的。標(biāo)題還創(chuàng)建了頁面內(nèi)容的層次結(jié)構(gòu)。
大字號的標(biāo)題有助于讀者更好地理解內(nèi)容的順序。 同樣，屏幕閱讀器也使用標(biāo)題標(biāo)簽來閱讀內(nèi)容。 這樣，弱視的人通過閱讀內(nèi)容中的每個標(biāo)題來獲得頁面的大致內(nèi)容。
在開發(fā)站點(diǎn)時使用適當(dāng)?shù)慕Y(jié)構(gòu)元素很重要。 HTML 元素向瀏覽器傳達(dá)它們包含的內(nèi)容類型，瀏覽器應(yīng)如何呈現(xiàn)或處理這些內(nèi)容。 頁面的組件和結(jié)構(gòu)形成內(nèi)容樹。 讀取內(nèi)容樹是屏幕閱讀器的強(qiáng)大功能，它們被盲人使用，使得他們可以「聽」頁面內(nèi)容。
不正確使用標(biāo)記會影響可訪問性。不要僅將 HTML 標(biāo)記用于樣式效果，屏幕閱讀器通過標(biāo)題結(jié)構(gòu)（真正的標(biāo)題，而不僅僅是大字號和粗體樣式的文本）按層次結(jié)構(gòu)瀏覽網(wǎng)頁。 使用你網(wǎng)站的用戶可以收聽所有標(biāo)題的列表，按標(biāo)題類型跳轉(zhuǎn)內(nèi)容，或直接導(dǎo)航到頂級標(biāo)題<h1>。
（譯者注：以前我寫重構(gòu)代碼的時候，就困惑一個問題，h1-h5標(biāo)簽除了自帶樣式和利于 SEO 等作用外，還有什么其他用途？看了本文才知道，原來還有幫助盲人聽書這么重要的作用。）
參考資料：WebAIM Semantic Structure
7. 支持鍵盤導(dǎo)航
△ Gael 在聽網(wǎng)站的時候使用鍵盤導(dǎo)航
鍵盤可訪問性是 Web 可訪問性的最關(guān)鍵方面之一。 有運(yùn)動障礙的人，依賴于屏幕閱讀器的盲人，沒有精確肌肉控制的人，甚至高級用戶都依賴鍵盤來導(dǎo)航內(nèi)容。
如果你像我一樣，經(jīng)常使用鍵盤上的 Tab 鍵來瀏覽網(wǎng)頁上的交互元素：鏈接，按鈕或輸入項。 我們前面討論的焦點(diǎn)狀態(tài)提供了當(dāng)前選擇的組件的可視化指示器。
當(dāng)你瀏覽頁面時，交互元素的順序很重要，導(dǎo)航必須有邏輯且直觀。 選項卡順序應(yīng)遵循頁面的閱讀順序：從左到右，從上到下—— 標(biāo)題，主導(dǎo)航，內(nèi)容按鈕和輸入項，最后是頁腳。
一個好的做法是僅使用鍵盤測試你的網(wǎng)站。 使用 Tab 鍵選擇鏈接和表單。 使用 Enter 鍵測試以選擇元素。 驗證所有交互式組件是否可控且有序。 如果你可以在沒有鼠標(biāo)的情況下瀏覽所有網(wǎng)站，那么你的網(wǎng)站就做的很棒了！
最后一點(diǎn)，但并非不重要。請注意導(dǎo)航的大小——包括鏈接的數(shù)量和文本的長度。 對于有運(yùn)動障礙的人來說，通過長菜單進(jìn)行切換可能會很困難。 對于使用屏幕閱讀器的人來說，聽冗長的鏈接可能很麻煩——盡量保持簡潔。 提供 ARIA Landmarks 或 HTML5結(jié)構(gòu)元素（如<main>或<nav>）將使導(dǎo)航更容易。
參考資料： W3C Keyboard
二、超越這些準(zhǔn)則
這七條準(zhǔn)則是一個很好的開始，如果你想要做更多的事情來使你的產(chǎn)品更容易訪問，我鼓勵你去做以下一些事：
確立一個可訪問性審查制度，使用審查制度來確定你的產(chǎn)品是否與輔助技術(shù)兼容并符合 WCAG 2.0 AA 級別標(biāo)準(zhǔn)。使用審查結(jié)果修復(fù)問題并進(jìn)行再次測試。
任命審查員。 你可以任命你公司的人做經(jīng)常性的無障礙審查，可以是你的 QA 團(tuán)隊中的某個人。如果找不到有經(jīng)驗的人，你可以雇傭一個外部供應(yīng)商來做。
讓可訪問性成為你設(shè)計研究的一部分。 在做研究時，驗證你關(guān)于可訪問性的假設(shè)是否正確，以及是否存在任何改進(jìn)的潛在機(jī)會。招募?xì)埣踩丝赡苄枰龈嗟墓ぷ?，請毫不猶豫地聯(lián)系協(xié)會和社區(qū)，人們愿意提供幫助。
如以上所述，七個指導(dǎo)原則將幫助你的 web設(shè)計更接近于滿足 web 內(nèi)容可訪問性指導(dǎo)方針 AA級別標(biāo)準(zhǔn)（https://www.w3.org/TR/WCAG21）。
我正在努力改進(jìn)可訪問性設(shè)計， 也正在努力練習(xí)我講到的東西。 我曾經(jīng)認(rèn)為它太難了并且也不重視。 其實我誤解了， 如今我邀請你同我一起，將可訪問性設(shè)計加入到設(shè)計流程中，并繼續(xù)討論可訪問性的重要性。
作為設(shè)計師，我們有責(zé)任倡導(dǎo)無障礙設(shè)計。有了它，我們使技術(shù)能為所有人服務(wù)，不管他們的能力、經(jīng)濟(jì)狀況、年齡、教育或地域。
做有責(zé)任感的設(shè)計師。
原作者的文章題目是：《Designing for accessibility is not that hard》，意思是《為可訪問性設(shè)計沒有那么難》。其實我一開始是有把可訪問性和可用性混淆的，后面查了相關(guān)資料，才發(fā)現(xiàn)這確實是2個不同的概念。所以想在文末解釋下可用性和可訪問性的區(qū)別。
可用性：產(chǎn)品是否容易上手，用戶能否完成任務(wù)，效率如何，以及這過程中用戶的主觀感受可好，是從用戶的角度來看產(chǎn)品的質(zhì)量?？捎眯院靡馕吨a(chǎn)品質(zhì)量高，是企業(yè)的核心競爭力。
可訪問性：Web 內(nèi)容對于殘障用戶的可閱讀和可理解性。
