數(shù)字化信息無(wú)障礙指構(gòu)建能被廣泛人群可以使用的數(shù)字化內(nèi)容和應(yīng)用程序的實(shí)踐浑此，目標(biāo)人群也包括那些殘障人士西乖。
有很多人認(rèn)為開(kāi)發(fā)一個(gè)無(wú)障礙化網(wǎng)站十分困難侣集，并且耗資巨大，但情況并非這樣王凑。從零設(shè)計(jì)一個(gè)滿足無(wú)障礙要求的產(chǎn)品搪柑，不會(huì)增加額外的功能或者內(nèi)容。所以不會(huì)產(chǎn)生額外的成本和精力索烹。
但是工碾，修復(fù)一個(gè)已經(jīng)有障礙性問(wèn)題的網(wǎng)站可能需要一些努力。曾經(jīng)百姓，我在Carbon Health 工作時(shí)渊额，我們使用了 AXE Chrome 插件檢測(cè)了我們網(wǎng)站的無(wú)障礙程度。我們發(fā)現(xiàn)僅僅在主頁(yè)上垒拢，就有 28 個(gè)違背無(wú)障礙原則的地方需要我們?nèi)ソ鉀Q旬迹。情況看起來(lái)很復(fù)雜，但是我們發(fā)現(xiàn)這些問(wèn)題并不難解決求类，僅僅需要花費(fèi)些時(shí)間和研究奔垦。我們能夠在幾天時(shí)間內(nèi)修復(fù)好所有的問(wèn)題。
我想要和你們分享下我們之前采用的幾個(gè)簡(jiǎn)單步驟尸疆，這樣你也可以讓你們的網(wǎng)站更加無(wú)障礙化椿猎。
1. 增加足夠的顏色對(duì)比度
顏色對(duì)比度一直都是網(wǎng)站信息無(wú)障礙化被忽視的問(wèn)題。視力不太好的人很難在顏色對(duì)比度很低的背景下認(rèn)字仓技。世界衛(wèi)生組織估計(jì)全球有近 2.17 億人的視力輕微受損鸵贬。因此確保文字和背景之間顏色有充分的對(duì)比度是很重要的俗他。
根據(jù) W3C 的規(guī)定脖捻，文字和其背景的對(duì)比度應(yīng)該至少是 4.5 比 1（符合AA級(jí)）。隨著現(xiàn)在字體越用越大兆衅，越用越粗地沮，在低對(duì)比情況下也容易辨認(rèn)嗜浮，導(dǎo)致這個(gè)規(guī)定的比率要求變得更加寬松了。如果你輸入的文字至少有 18pt 或者 14pt 粗體字大小摩疑，那么最小的對(duì)比度比率降至 3:1.
有軟件會(huì)幫助你快速檢測(cè)對(duì)比度比率危融。如果你使用的是 Mac電腦，我推薦使用 Contrast app, 這款軟件只需要用取色器就能快速檢查對(duì)比度雷袋。如果你想要得到更加詳細(xì)的結(jié)果吉殃，我推薦你將色值輸入到 WebAIM color contrast checker。這個(gè)工具會(huì)計(jì)算出在不同標(biāo)準(zhǔn)等級(jí)(A, AA, AAA)下的常規(guī)字號(hào)和大字號(hào)的值楷怒。你可以通過(guò)改變色值蛋勺，看到實(shí)時(shí)的結(jié)果。
2. 不要僅靠顏色來(lái)讓關(guān)鍵的信息易于理解
當(dāng)你在傳達(dá)一件重要的事鸠删、展示行為或者引起回應(yīng)時(shí)抱完，不要將顏色作為唯一的視覺(jué)提示。因?yàn)橐暳Σ缓玫娜嘶蛘呱?huì)難以理解你的內(nèi)容刃泡。
嘗試使用顏色以外的提示巧娱，例如文本或者圖案。當(dāng)要在屏幕上顯示出錯(cuò)提示時(shí)烘贴，不要僅僅使用帶顏色的文字禁添，還要加上圖標(biāo)或者一個(gè)標(biāo)題〗白伲可以考慮增加一些視覺(jué)上的提示上荡，例如文字字重的變化，或者是在段落中給鏈接的文本加上下劃線馒闷，可以讓鏈接更加突出酪捡。
當(dāng)你只使用顏色來(lái)區(qū)分?jǐn)?shù)據(jù)的時(shí)候，那些有很多復(fù)雜信息的表格和圖形會(huì)變得更加難以閱讀纳账」滢保可以使用其他的視覺(jué)形式來(lái)傳達(dá)信息，比如形狀疏虫、文本標(biāo)簽和尺寸大小永罚。你也可以嘗試將圖案融入到你的信息中，讓差異更加的明顯卧秘。應(yīng)用這個(gè)準(zhǔn)則最好的例子是 Trello 的色盲模式呢袱。當(dāng)開(kāi)啟這個(gè)功能后，有顏色的標(biāo)簽上會(huì)出現(xiàn)紋理翅敌，這樣對(duì)于色盲來(lái)說(shuō)標(biāo)簽的意思就會(huì)變得更加清楚羞福。
一個(gè)好的技巧是將你的圖形打印成黑白色，然后看你是否還能理解它的含義蚯涮。你也可以使用像 Color Oracle 類(lèi)的 App治专，它會(huì)向你實(shí)時(shí)展示色盲患者看到的是什么樣子卖陵。
3. 設(shè)計(jì)可用的焦點(diǎn)狀態(tài)
你曾經(jīng)注意到出現(xiàn)在鏈接、輸入框和按鈕周?chē)乃{(lán)色線條嗎? 這些線條叫做焦點(diǎn)指示符张峰。默認(rèn)情況下泪蔫，當(dāng)它們被選擇后，瀏覽器通過(guò) CSS 偽類(lèi)來(lái)顯示這些線條喘批。 你可能會(huì)發(fā)現(xiàn)這些默認(rèn)的焦點(diǎn)指示樣式不是特別美觀撩荣，并且想要隱藏它們。然而饶深，如果你要去掉這個(gè)默認(rèn)的樣式話婿滓，確保用其他樣式代替。
當(dāng)用戶在瀏覽你的網(wǎng)站時(shí)粥喜，焦點(diǎn)指示符幫助人們了解哪個(gè)元素被鍵盤(pán)選中了凸主，了解他們?cè)陧?yè)面哪個(gè)位置。盲人會(huì)經(jīng)常用到這些指示符额湘，并且他們需要用到屏幕閱讀器卿吐。那些行動(dòng)有障礙的人、患有腕管綜合癥的人以及喜歡這種導(dǎo)航類(lèi)型的超級(jí)用戶都會(huì)使用到這些指示符锋华。噢嗡官，甚至我們中的一些人也會(huì)用鍵盤(pán)作為瀏覽網(wǎng)頁(yè)的主要方式。
這些應(yīng)該能被聚焦的元素有鏈接毯焕、表單衍腥、工具、按鈕和菜單欄纳猫。它們需要有個(gè)焦點(diǎn)指示符婆咸，來(lái)讓它們和周?chē)脑乜雌饋?lái)不同。
你可以設(shè)計(jì)一個(gè)適合你網(wǎng)站風(fēng)格的焦點(diǎn)指示符樣式芜辕，并且和你的品牌相搭尚骄。創(chuàng)建一個(gè)十分顯眼，并且有很好對(duì)比度的一個(gè)狀態(tài)侵续， 這樣它會(huì)從其他內(nèi)容中脫穎而出倔丈。
4. 在表單和輸入框填寫(xiě)時(shí)，要帶上標(biāo)簽或提示
在設(shè)計(jì)表單時(shí)状蜗，使用占位符文字作為標(biāo)簽是十分錯(cuò)誤的設(shè)計(jì)需五。當(dāng)空間有限，或者我們想讓自己的設(shè)計(jì)更加簡(jiǎn)約現(xiàn)代轧坎，我們會(huì)不由自主地去迎合這個(gè)潮流宏邮。但是，請(qǐng)不要這樣做。占位符文字通常顏色很灰蜀铲，并且對(duì)比度很低，所以很難去認(rèn)讀這個(gè)文字属百。如果你像我一樣记劝，在輸入表格時(shí)，占位符文字標(biāo)簽消失后族扰，你會(huì)經(jīng)常忘記你正在輸入的是什么內(nèi)容厌丑。
使用屏幕閱讀器的人經(jīng)常使用 Tab 鍵瀏覽表單。在每個(gè)表單控件里讀取 <label> 標(biāo)簽的內(nèi)容渔呵。任何像占位符那樣沒(méi)有 <label> 標(biāo)簽的文本怒竿，通常都會(huì)被跳過(guò)，不會(huì)被讀到扩氢。
標(biāo)簽文本幫助用戶理解他們應(yīng)該做什么耕驰、應(yīng)該在表單里填寫(xiě)什么內(nèi)容。提示標(biāo)簽最好不要消失录豺，甚至當(dāng)用戶在輸入文字時(shí)也不要消失朦肘。用戶在輸入文字的時(shí)候，不應(yīng)該失去語(yǔ)境背景双饥。當(dāng)設(shè)計(jì)師去掉表格里的描述或者指引時(shí)媒抠，他們只是為了一個(gè)看起來(lái)簡(jiǎn)約的設(shè)計(jì)而犧牲了可用性。
這個(gè)設(shè)計(jì)準(zhǔn)則并不是讓你在你的設(shè)計(jì)里堆滿不必要的信息咏花，它只是讓你提供一些基本的提示趴生。太多的說(shuō)明文字和太少的說(shuō)明文字一樣，都是一個(gè)問(wèn)題昏翰。我們的目的是為了保證用戶通過(guò)足夠的信息順利完成任務(wù)苍匆。
5. 給你的圖片和非文本內(nèi)容注明備選文字
視力不好的人經(jīng)常要通過(guò)屏幕閱讀器來(lái) “聽(tīng)” 網(wǎng)站的內(nèi)容。這種閱讀工具將文字轉(zhuǎn)化成語(yǔ)音棚菊，讓用戶聽(tīng)到網(wǎng)站上文字內(nèi)容锉桑。
有兩種方式可以放上替代文字。一個(gè)是在圖片元素的<alt>屬性內(nèi)窍株；另一個(gè)地方是在圖片周?chē)?/p>
盡量描述清楚圖片里的內(nèi)容民轴、圖片和文章的關(guān)系，而不僅僅描述成 “圖片” 之類(lèi)的詞球订。
如果這張圖片純粹是為了裝飾用的后裸，或者上下文已經(jīng)解釋了內(nèi)容，那這圖片會(huì)變成多余的冒滩。添加一個(gè)空的 <alt> 屬性后微驶，屏幕閱讀器會(huì)跳過(guò)這張圖片。如果你不寫(xiě)任何替代文本，某些屏幕閱讀器會(huì)給用戶讀文件名因苹。這無(wú)疑會(huì)造成糟糕的用戶體驗(yàn)苟耻。
谷歌正在開(kāi)發(fā)一種圖像字幕 AI，可以以 94% 的準(zhǔn)確率描述圖片扶檐。這個(gè)模型是開(kāi)源的凶杖，并且正在研究階段，希望我們?cè)诓痪玫膶?lái)可以看到這個(gè)技術(shù)被應(yīng)用到不同的產(chǎn)品上款筑。同時(shí)智蝠，我們應(yīng)該手動(dòng)給內(nèi)容里圖片的含義和功能添加描述性文字。
6. 在內(nèi)容上使用正確的標(biāo)記
<heading> 標(biāo)記了內(nèi)容的開(kāi)始位置奈梳，它是一種給文本定義樣式和目的的標(biāo)簽杈湾。標(biāo)題同樣給內(nèi)容構(gòu)建了層級(jí)。
大字號(hào)標(biāo)題幫助讀者更好的理解內(nèi)容的順序攘须。同樣漆撞，屏幕閱讀器利用標(biāo)題標(biāo)簽閱讀內(nèi)容。這樣于宙，視力不好的人可以在清晰的層級(jí)關(guān)系中叫挟，閱讀每個(gè)標(biāo)題來(lái)了解文章的大概內(nèi)容。
當(dāng)你在開(kāi)發(fā)一個(gè)網(wǎng)站時(shí)限煞，使用合適的結(jié)構(gòu)元素是很重要的抹恳。HTML 元素向?yàn)g覽器傳達(dá)了它們包含的內(nèi)容類(lèi)型，以及瀏覽器應(yīng)該如何呈現(xiàn)或處理該內(nèi)容署驻。頁(yè)面的組件和結(jié)構(gòu)有序排列奋献，構(gòu)成了一顆無(wú)障礙樹(shù)。這顆樹(shù)為盲人使用屏幕閱讀器提供了幫助旺上，使他們能夠 “聽(tīng)見(jiàn)” 頁(yè)面里的內(nèi)容瓶蚂。
不按正確規(guī)范使用標(biāo)記會(huì)影響到可用性。不要僅將 HTML 標(biāo)簽用于樣式效果宣吱。屏幕閱讀器通過(guò)標(biāo)題結(jié)構(gòu)層級(jí)瀏覽網(wǎng)頁(yè)窃这，使用你網(wǎng)站的用戶可以聽(tīng)到所有的標(biāo)題，按標(biāo)題類(lèi)型跳轉(zhuǎn)內(nèi)容征候，或者直接跳轉(zhuǎn)到最大層級(jí)的標(biāo)題<h1>杭攻。
7. 支持鍵盤(pán)導(dǎo)航
鍵盤(pán)無(wú)障礙性是網(wǎng)站無(wú)障礙性中最重要的一部分。有運(yùn)動(dòng)障礙的人和盲人疤坝，依賴屏幕閱讀器兆解。不能很好控制肌肉的用戶、甚至高級(jí)用戶都會(huì)依靠鍵盤(pán)來(lái)瀏覽內(nèi)容跑揉。
如果你像我一樣锅睛，使用鍵盤(pán)上的 tab 鍵埠巨，在網(wǎng)頁(yè)上的可交互元素之間來(lái)回切換：鏈接、按鈕或者輸入框现拒。我們之前討論過(guò)的焦點(diǎn)狀態(tài)辣垒，提供了當(dāng)前被選擇組件的視覺(jué)指示狀態(tài)。
當(dāng)你在瀏覽網(wǎng)頁(yè)時(shí)印蔬，那些交互元素的順序至關(guān)重要勋桶，并且導(dǎo)航一定要有邏輯和直觀。Tab 鍵順序要符合頁(yè)面的視覺(jué)流程：從左往右扛点，從上往下哥遮。
測(cè)試你網(wǎng)站的一個(gè)好的方法是只使用鍵盤(pán)岂丘。使用 tab 鍵在鏈接和表單之間移動(dòng)陵究。使用 enter 鍵來(lái)測(cè)試能否選擇某個(gè)元素。驗(yàn)證所有的可交互組件都是可預(yù)測(cè)的奥帘，并且順序正確铜邮。如果你能不用鼠標(biāo)，就能瀏覽所有的網(wǎng)頁(yè)寨蹋，那你的網(wǎng)站處在一個(gè)很好的狀態(tài)松蒜。
原文鏈接：https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
作者：Pablo Stanley
