原文比較長,我簡化翻譯重點,七條原則,針對網(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