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

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

1、定義可訪問(wèn)性

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

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

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

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

2、簡(jiǎn)化語(yǔ)言

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

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

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

*將文本僅向左或向右對(duì)齊

*下劃線鏈接，以增加視覺(jué)對(duì)比

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

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

*段落寬度：不超過(guò)80個(gè)字符

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

*使用簡(jiǎn)單的語(yǔ)言

*第一次使用時(shí)定義縮寫(xiě)

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

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

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

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

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

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

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

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

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

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

這些是UI元素的需求：

*圖形對(duì)象（如圖表）：3：1

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

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

上面提到的Stark應(yīng)用程序也可以模擬我們?yōu)椴煌ゎ愋偷挠脩羲龅脑O(shè)計(jì)——畢竟，世界上4.5%的人有很多潛在的用戶。如果你發(fā)現(xiàn)很難在正文中實(shí)現(xiàn)與鏈接的最佳對(duì)比度，請(qǐng)?jiān)谒鼈兿旅鎰澗€以使鏈接更容易被發(fā)現(xiàn)，因?yàn)橐恍┥び脩舾究床坏筋伾珜?duì)比度！

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

讓人們知道他們做錯(cuò)了什么

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

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

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

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

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

*和占位符來(lái)顯示可接受輸入的示例

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

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

*實(shí)時(shí)清晰顯示表單錯(cuò)誤

*讓用戶在提交之前驗(yàn)證他們的輸入

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

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

這可能是一個(gè)模糊的可訪問(wèn)性特性，所以要特別注意

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

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

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

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

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

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

這包括傳送帶、彈出窗口、提醒和分散注意力的動(dòng)畫(huà)。

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

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

一般來(lái)說(shuō)，用戶不喜歡意外的移動(dòng)/媒體，最好避免它。請(qǐng)注意，同樣的規(guī)則也適用于每秒閃爍超過(guò)三次的元素，特別是當(dāng)它是高對(duì)比度和紅色時(shí)，因?yàn)檫@可能導(dǎo)致癲癇發(fā)作！

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

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

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

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

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

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

*使用語(yǔ)義HTML元素

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

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

*始終形成元素

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

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

8、選擇簡(jiǎn)單的手勢(shì)

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

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

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

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

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

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/21645.html