原文比較長道批，我簡化翻譯重點(diǎn)错英，七條原則，針對網(wǎng)頁無障礙設(shè)計(jì)的干貨類分享隆豹。
為什么要為無障礙設(shè)計(jì)
在美國有5.6億人口有殘疾椭岩，而全世界更是有超過10億的殘疾人口。2017年璃赡，有814件關(guān)于網(wǎng)站無障礙性的訴訟案件在美國州際和國家法庭受理判哥。
另外，商業(yè)上也有無障礙設(shè)計(jì)的需求碉考。研究表面塌计，有無障礙設(shè)計(jì)的網(wǎng)站擁有更好的搜索結(jié)果，他們的用戶更多侯谁，下載速度更快锌仅，代碼更適合學(xué)習(xí)，并且通常有更好的可用性墙贱。
符合下面七條原則热芹，能夠幫助你的網(wǎng)站更滿足WCAG2.0的標(biāo)準(zhǔn)，并且能夠廣泛通用于輔助性的科技產(chǎn)品惨撇，比如屏幕閱讀器剿吻，屏幕放大器，文字識別工具等串纺。
1 保證足夠的顏色對比
W3G推薦的對比度是4.5-1丽旅，如果使用更大或者更粗的字體，那么這個比例會更松泛一點(diǎn)纺棺。例如你用至少18pt的文字或者14pt的粗體榄笙，最小的推薦對比度是3-1。
兩個工具推薦 Contrast app; [WebAIM color contrast checker]
2 重要信息不要單單使用顏色區(qū)分
傳達(dá)重要信息的時候祷蝌，不要只通過顏色進(jìn)行區(qū)分茅撞，用一些指示類似于標(biāo)簽或圖標(biāo)等來突出它。例如，展示錯誤提示的時候米丘，不要只是把文字標(biāo)紅剑令，加個圖標(biāo)或者加個標(biāo)題什么。
有個很不錯的小技巧拄查，把你的設(shè)計(jì)用黑白打印吁津，看看還能不能分出主次來。
3 設(shè)計(jì)聚焦?fàn)顟B(tài)
當(dāng)元素被選中的時候有個狀態(tài)堕扶，能夠指示用戶他們現(xiàn)在在哪個元素上碍脏，或者哪個頁面，這對于用屏幕閱讀器和一些手腕受傷的人等是非常有必要稍算。
4 在輸入框外設(shè)計(jì)標(biāo)簽或者說明
我們經(jīng)常用占位符來設(shè)計(jì)表格典尾，這是很大的錯誤，因?yàn)樗膶Ρ榷葘τ谝暳τ姓系K的人是非常不友好的糊探，根本不能讀钾埂！
使用屏幕閱讀器的人經(jīng)常用Tab鍵來從一個表格跳到另一個表格，<label>元素會對這些用戶更友好科平。
即使對于普通用戶褥紫，也應(yīng)該讓人們知道他們正在寫什么在一個表格里，而占位符的設(shè)計(jì)會在輸入狀態(tài)消失匠抗。
5 為你的圖片或者任何沒有文字的內(nèi)容寫可替代的文字
視力障礙的人會用“聽”來閱讀網(wǎng)站故源，所以污抬，設(shè)計(jì)的時候有兩種方式可以讓他們聽到圖片或者其他沒有文字的內(nèi)容
- 代碼加入
<alt>標(biāo)簽來描述圖片 - 在圖片的周圍寫上文字
6 在你的內(nèi)容上使用正確的標(biāo)記
標(biāo)題代表了內(nèi)容的開始——它們定義了內(nèi)容的形式和目的汞贸。標(biāo)題也同樣建立了整個頁面的層級。
在設(shè)計(jì)頁面本身和代碼里區(qū)分標(biāo)題印机。聽頁面的人可能會按照標(biāo)題類型跳過內(nèi)容矢腻，比如<h1>
7 支持鍵盤方向鍵
測試看看你的網(wǎng)站能不能只用鍵盤閱讀，很多行動障礙射赛，視覺障礙多柑，甚至肌肉無力的人都會使用鍵盤來閱讀你的網(wǎng)站。
最后楣责，別忘了把無障礙性也放在你的設(shè)計(jì)調(diào)研或者驗(yàn)證中竣灌，希望你的網(wǎng)站能更好的滿足[ AA of the Web Content Accessibility Guidelines.]
原文鏈接：https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
