原文比較長，我簡化翻譯重點，七條原則，針對網(wǎng)頁無障礙設(shè)計的干貨類分享。
為什么要為無障礙設(shè)計
在美國有5.6億人口有殘疾，而全世界更是有超過10億的殘疾人口。2017年，有814件關(guān)于網(wǎng)站無障礙性的訴訟案件在美國州際和國家法庭受理。
另外，商業(yè)上也有無障礙設(shè)計的需求。研究表面，有無障礙設(shè)計的網(wǎng)站擁有更好的搜索結(jié)果，他們的用戶更多，下載速度更快，代碼更適合學習，并且通常有更好的可用性。
符合下面七條原則，能夠幫助你的網(wǎng)站更滿足WCAG2.0的標準，并且能夠廣泛通用于輔助性的科技產(chǎn)品，比如屏幕閱讀器，屏幕放大器，文字識別工具等。
1 保證足夠的顏色對比
W3G推薦的對比度是4.5-1，如果使用更大或者更粗的字體，那么這個比例會更松泛一點。例如你用至少18pt的文字或者14pt的粗體，最小的推薦對比度是3-1。
兩個工具推薦 Contrast app; [WebAIM color contrast checker]
2 重要信息不要單單使用顏色區(qū)分
傳達重要信息的時候，不要只通過顏色進行區(qū)分，用一些指示類似于標簽或圖標等來突出它。例如，展示錯誤提示的時候，不要只是把文字標紅，加個圖標或者加個標題什么。
有個很不錯的小技巧，把你的設(shè)計用黑白打印，看看還能不能分出主次來。
3 設(shè)計聚焦狀態(tài)
當元素被選中的時候有個狀態(tài)，能夠指示用戶他們現(xiàn)在在哪個元素上，或者哪個頁面，這對于用屏幕閱讀器和一些手腕受傷的人等是非常有必要。
4 在輸入框外設(shè)計標簽或者說明
我們經(jīng)常用占位符來設(shè)計表格，這是很大的錯誤，因為它的對比度對于視力有障礙的人是非常不友好的，根本不能讀！
使用屏幕閱讀器的人經(jīng)常用Tab鍵來從一個表格跳到另一個表格，<label>元素會對這些用戶更友好。
即使對于普通用戶，也應(yīng)該讓人們知道他們正在寫什么在一個表格里，而占位符的設(shè)計會在輸入狀態(tài)消失。
5 為你的圖片或者任何沒有文字的內(nèi)容寫可替代的文字
視力障礙的人會用“聽”來閱讀網(wǎng)站，所以，設(shè)計的時候有兩種方式可以讓他們聽到圖片或者其他沒有文字的內(nèi)容
- 代碼加入
<alt>標簽來描述圖片 - 在圖片的周圍寫上文字
6 在你的內(nèi)容上使用正確的標記
標題代表了內(nèi)容的開始——它們定義了內(nèi)容的形式和目的。標題也同樣建立了整個頁面的層級。
在設(shè)計頁面本身和代碼里區(qū)分標題。聽頁面的人可能會按照標題類型跳過內(nèi)容，比如<h1>
7 支持鍵盤方向鍵
測試看看你的網(wǎng)站能不能只用鍵盤閱讀，很多行動障礙，視覺障礙，甚至肌肉無力的人都會使用鍵盤來閱讀你的網(wǎng)站。
最后，別忘了把無障礙性也放在你的設(shè)計調(diào)研或者驗證中，希望你的網(wǎng)站能更好的滿足[ AA of the Web Content Accessibility Guidelines.]
原文鏈接：https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
