在2018年里，網(wǎng)絡(luò)無障礙訴訟案件大幅增加，因為在某些國家的法律里無障礙是一項人權(quán)。現(xiàn)在網(wǎng)站設(shè)計師們都會開始意識到無障礙網(wǎng)站是強(qiáng)制的。根據(jù)這一點(diǎn)的建議，我們這里整理了幾個最重要的網(wǎng)站設(shè)計技巧讓你的網(wǎng)站設(shè)計在可訪問性與包容性方面得到比較好的優(yōu)化技術(shù)。

如果你決定全面檢測你的網(wǎng)站設(shè)計是否符合可訪問元素，同時也意識到你的網(wǎng)站設(shè)計需要徹底更新，這里有最熱門的網(wǎng)站設(shè)計工具和資源，希望可以你網(wǎng)站設(shè)計師的你帶來幫助。

1、定義可訪問性

包容性設(shè)計不僅僅意味著可訪問性

網(wǎng)站設(shè)計的可訪問性和包容性設(shè)計有時是可以互換引用的，但是沒有認(rèn)識到它們之間的區(qū)別可能會產(chǎn)生嚴(yán)重的后果。無障礙設(shè)計就是消除障礙，讓所有用戶都可以使用我們設(shè)計的應(yīng)用程序和網(wǎng)站。

在網(wǎng)站設(shè)計中使用更大的字體大小可以減少了"無法閱讀文本"的障礙——希望網(wǎng)站設(shè)計師能記住這一點(diǎn)。因此，網(wǎng)站設(shè)計師要么允許某些用戶切換到另一種"可訪問模式"，要么創(chuàng)建一個可訪問但獨(dú)立的版本，可以使用導(dǎo)航中的鏈接訪問?，F(xiàn)在，這不僅模糊了可訪問和不可訪問之間的界限，因為視力受損的用戶仍然必須找到這個"可訪問站點(diǎn)"，而且它一點(diǎn)也不包容，因為我們疏遠(yuǎn)了這些用戶。他們被隔離，讓人感覺不同，最重要的是，我們需要設(shè)計和開發(fā)兩個版本的界面，花費(fèi)額外的時間和e-ffort。

相反，我們可以簡單地設(shè)計一個單一的、更具包容性的界面，讓每個人都能使用更大的字體。畢竟，即使是沒有視覺障礙的用戶也能從更輕松地閱讀文本中獲益，這就是為什么包容性設(shè)計對殘疾人和非殘疾人用戶都是一種勝利。包容性設(shè)計不會削弱那些沒有殘疾的人的體驗。事實上，WCAG定義的絕大多數(shù)易訪問性規(guī)則——Web內(nèi)容易訪問性指南，都是可用性提示，如果實現(xiàn)了這些提示，所有用戶都將從中受益。

2、簡化語言

書面文字占據(jù)了網(wǎng)絡(luò)的很大一部分，但如果有人看不懂，那就錯失了一個機(jī)會

當(dāng)涉及到書面文字時，如果我們想要設(shè)計出迎合所有人的體驗，我們需要考慮的因素有很多。有詞語本身的簡單性，這可以影響閱讀困難的人，有排版，這可以影響視力受損的用戶，還有一致性，這可以影響那些認(rèn)知障礙的人。當(dāng)然，次優(yōu)設(shè)計對那些沒有殘疾的人和殘疾的人產(chǎn)生的影響一樣大。

注意這些規(guī)則，如何改進(jìn)排版，從而提高可讀性：

*將文本僅向左或向右對齊

*下劃線鏈接，以增加視覺對比

*強(qiáng)制行距至少為字體大小的1.5倍

*段落間距：至少1.5倍行距

*段落寬度：不超過80個字符

如何減少認(rèn)知負(fù)荷：

*使用簡單的語言

*第一次使用時定義縮寫

*確保鏈接文本被有效地描述

*用相同的鏈接文本匹配相同的url

*使用清晰的標(biāo)題邏輯地組織內(nèi)容

3、優(yōu)化色彩對比

顏色對比是關(guān)鍵——確保你做對了

色彩對比是衡量兩種設(shè)計元素的顏色彼此區(qū)別的程度，這個度量的單位是一個比率，并且有一個最小的比率作為目標(biāo)。假設(shè)各種設(shè)計元素滿足WCAG定義的最小顏色對比度，我們不僅為視力受損的用戶提供了可讀性，還為那些沒有視力受損的用戶提供了更高的可讀性。這是我們使用幾乎為零的e-ffort設(shè)計的許多方法之一。

那么，最低要求是什么？我們?nèi)绾螜z驗它？首先，像斯塔克這樣的色彩對比度分析儀可以用來測量色彩對比度。然而，最低比率，我們需要目標(biāo)取決于元素本身，即是否這是一個重要的UI元素，如一個圖標(biāo)或表單字段，或者，如果文本元素，字體大小是否小或大，是更大的字體可讀性更強(qiáng)之前修補(bǔ)的對比。

以下是WCAG為背景文字訂定的色彩對比度要求：

*14pt加粗或18pt正常：4.5：1（7：1更好）

*14pt加粗或18pt普通，及以上：3：1（4.5：1更好）

這些是UI元素的需求：

*圖形對象（如圖表）：3：1

*焦點(diǎn)、懸停和活動狀態(tài)：3：1

*可點(diǎn)擊圖標(biāo)和表單元素：3：1

上面提到的Stark應(yīng)用程序也可以模擬我們?yōu)椴煌ゎ愋偷挠脩羲龅脑O(shè)計——畢竟，世界上4.5%的人有很多潛在的用戶。如果你發(fā)現(xiàn)很難在正文中實現(xiàn)與鏈接的最佳對比度，請在它們下面劃線以使鏈接更容易被發(fā)現(xiàn)，因為一些色盲用戶根本看不到顏色對比度！

4、幫助用戶修復(fù)錯誤

讓人們知道他們做錯了什么

錯誤常常會導(dǎo)致混亂，特別是當(dāng)用戶不知道他們到底做了什么，或者如何修復(fù)時。錯誤是不可避免的，特別是對于現(xiàn)代的用戶來說，他們帶著自己的心智模型，急匆匆地投入到界面中，這就是為什么幫助用戶克服錯誤對于包容性是至關(guān)重要的。

自然，最常見的情況下，用戶可能犯錯誤是當(dāng)填寫表單，并經(jīng)常由于各種各樣的障礙，即難于理解的認(rèn)知障礙，導(dǎo)致錯誤的數(shù)據(jù)輸入一個馬達(dá)殘疾，等等。首先，如果我們可以通過編程來解決用戶的錯誤，那么危機(jī)就可以避免。一個實際的例子是，如果URL提交還沒有添加https：//，那么可以將https：//添加到URL提交中，而不是強(qiáng)迫用戶自己修改URL提交。

使用表單標(biāo)簽描述輸入字段，使用占位符描述可接受的輸入

考慮以下其他減少表單錯誤的技巧：

*總是使用表單標(biāo)簽來描述輸入字段

*和占位符來顯示可接受輸入的示例

*啟用自動填充和自動完成功能，以減少輸入要求

以下是一些幫助用戶改正錯誤的建議：

*實時清晰顯示表單錯誤

*讓用戶在提交之前驗證他們的輸入

*重要且經(jīng)常被遺忘：不要讓用戶覺得自己很愚蠢！

5、注意"跳轉(zhuǎn)到主要內(nèi)容"

這可能是一個模糊的可訪問性特性，所以要特別注意

跳轉(zhuǎn)到主內(nèi)容是一個相對模糊的可訪問性特性，針對那些使用屏幕閱讀器導(dǎo)航ui的用戶。您可能從未聽說過這個特性；這就是它的包容性。屏幕閱讀器，或者僅僅是那些主要使用鍵盤導(dǎo)航ui的用戶，使用tab鍵通過tab鍵點(diǎn)擊目標(biāo)。如果沒有禁用，那么在桌面web瀏覽器中選擇表單字段時很可能會遇到這種情況，因為這比單擊要容易得多。

跳轉(zhuǎn)到主內(nèi)容是一種可訪問性增強(qiáng)，通過繞過主導(dǎo)航幫助這部分用戶避免重復(fù)——這是通過讓第一個選項卡項有一個跳轉(zhuǎn)到主內(nèi)容的鏈接來實現(xiàn)的。對于那些不使用屏幕閱讀器的用戶來說，這個鏈接是模糊的，因為這個鏈接只顯示過一次選項卡。試著用谷歌搜索一些東西，然后按tab鍵！

同樣重要的是要直觀地指出當(dāng)前關(guān)注的是哪個元素，因為選項卡索引可能會轉(zhuǎn)移到一個意想不到的位置（選項卡索引因此屏幕閱讀器從上到下讀?。?。當(dāng)tab - through tap目標(biāo)為：focus狀態(tài)時，瀏覽器就知道自動設(shè)置元素的樣式。就CSS代碼而言，這常?？雌饋硐褚粋€藍(lán)色的box-shadow：，但實際上它是outline：，所以請確保不要覆蓋這個網(wǎng)站設(shè)計樣式！

6、不產(chǎn)生壓力

不要忘記以犧牲設(shè)計為代價的用戶

沒有人喜歡感到壓力，但對于那些有運(yùn)動或認(rèn)知障礙的人來說，壓力可能會引發(fā)焦慮。多年來，隨著越來越多的任務(wù)可以通過設(shè)備來完成，界面變得更加動態(tài)。遺憾的是，太多的動態(tài)體驗是設(shè)計師試圖以可用性為代價使ui更具想象力的結(jié)果。一個有用的建議是簡化布局并刪除不必要的動態(tài)元素。

這包括傳送帶、彈出窗口、提醒和分散注意力的動畫。

接下來，讓我們看看如何在網(wǎng)站設(shè)計中使這些元素能對殘疾人開放。首先，我們需要對需要關(guān)注的自動播放媒體增加一定程度的控制，因為這可能會給那些有認(rèn)知障礙的人增加額外的認(rèn)知負(fù)荷，讓他們感到不舒服。WCAG 2.0定義的規(guī)則是，如果媒體運(yùn)行超過三秒，那么它應(yīng)該是可控的。任何其他可以自動滾動、閃爍或以其他方式移動而無需用戶與之交互的東西，例如動畫和旋轉(zhuǎn)木馬，如果持續(xù)時間超過5秒，也應(yīng)該是可控的。

如果媒體運(yùn)行超過3秒，則應(yīng)該是可控的

一般來說，用戶不喜歡意外的移動/媒體，最好避免它。請注意，同樣的規(guī)則也適用于每秒閃爍超過三次的元素，特別是當(dāng)它是高對比度和紅色時，因為這可能導(dǎo)致癲癇發(fā)作！

關(guān)于聊天消息、警報、提醒、新聞提要等，用戶應(yīng)該能夠限制它們的頻率，以便自己有更多的時間來閱讀和理解正在通信的內(nèi)容，而且還建議用戶使用esc鍵輕松地消除任何警報或可見障礙。執(zhí)行任務(wù)的壓力有時是不可避免的，因為一些接口，比如銀行接口，可能會因為安全原因超時，因此這些警報必須是顯而易見的。在這種情況下，需要更多時間的禁用用戶應(yīng)該提供這樣做的機(jī)會，讓界面知道用戶沒有放棄它，并錯誤地將數(shù)據(jù)暴露出來。

7、繼電器與開發(fā)人員

不僅僅是網(wǎng)站設(shè)計師需要對網(wǎng)絡(luò)友好

當(dāng)涉及到增強(qiáng)可訪問性時，開發(fā)人員應(yīng)該分擔(dān)一半的責(zé)任，特別是當(dāng)涉及到使用戶界面對屏幕閱讀器友好時。為屏幕閱讀器優(yōu)化網(wǎng)站設(shè)計主要發(fā)生在幕后，對非殘疾用戶沒有任何影響，這使得這些網(wǎng)站對所有能力的用戶都非常包容。對于那些想知道的人來說，屏幕閱讀器通過有聲朗讀屏幕上的內(nèi)容來幫助視力受損的用戶。但是圖像呢？沒有文本標(biāo)簽的圖標(biāo)呢？屏幕閱讀器在沒有文本描述的情況下如何準(zhǔn)確地傳達(dá)設(shè)計元素？這些輔助技術(shù)如何快速地將焦點(diǎn)轉(zhuǎn)移到搜索和導(dǎo)航等關(guān)鍵地標(biāo)上？這正是開發(fā)人員需要解決的問題。

沒有附帶文本的設(shè)計元素可以使用Html在幕后進(jìn)行描述，這里有一個很棒的清單，你會想要添加書簽。

讓我們來看看一些關(guān)鍵的方面：

*使用語義HTML元素

*使用ARIA地標(biāo)角色向HTML元素添加更多上下文

*在這里聲明（正確的）語言（WCAG指南）

*始終形成元素

*使用"alt文本"（錯誤！未指定文件名）用于圖像的文本替代（此處提供指導(dǎo)）

*提供無JS后備，永不使用內(nèi)聯(lián)腳本

8、選擇簡單的手勢

我們不僅僅用鼠標(biāo)來導(dǎo)航——想想手指操作

選擇簡單的手勢而不是復(fù)雜的手勢將贏得非殘疾用戶的支持，同時使殘疾用戶可以訪問ui。手勢在應(yīng)用程序和網(wǎng)站之間往往是不同的。首先是用戶期望問題；例如，在觸摸屏應(yīng)用程序上進(jìn)行滑動交互是相當(dāng)正常的，但用戶通常不會想到在網(wǎng)站上進(jìn)行滑動，甚至在移動網(wǎng)站上也不會。除此之外，對于殘疾用戶來說，除了簡單的點(diǎn)擊和點(diǎn)擊之外，還有什么需要技巧的嗎？

答案是肯定的，但對于非殘疾用戶來說，這也有點(diǎn)讓人望而生畏。是說你試過旋轉(zhuǎn)谷歌地圖嗎？這是一個非常挑剔的經(jīng)歷，對于那些有運(yùn)動障礙的人來說，這幾乎是不可能完成的任務(wù)。由于谷歌映射沒有提供使用可單擊按鈕旋轉(zhuǎn)的替代方法，因此該功能既不可訪問也不包含。

因此，我們需要逐個問自己，'我們網(wǎng)站設(shè)計中真的需要這種復(fù)雜的姿態(tài)嗎？例如，一個靜態(tài)的垂直堆棧是否可以像滑動旋轉(zhuǎn)木馬一樣工作？在這兩種情況下，我們都會讓內(nèi)容以任何一種方式溢出視圖端口，那么滑動旋轉(zhuǎn)木馬真正實現(xiàn)了什么？對于非殘疾用戶來說，滑動功能是否可以逐步增強(qiáng)？在這種情況下越簡單越好。

與此同時，請務(wù)必確保網(wǎng)站設(shè)計中的tap目標(biāo)至少為44px2，以便它們易于單擊和點(diǎn)擊，同時也可用于視覺可視性，并且間距合理，以減少錯誤單擊的數(shù)量。