網(wǎng)絡(luò)可訪問性可確保所有訪問者,無論其能力如何,都能在您的網(wǎng)站上獲得無縫體驗(yàn)。不幸的是,許多網(wǎng)站不遵守網(wǎng)絡(luò)可訪問性最佳實(shí)踐和指南,這使得殘障用戶的體驗(yàn)變得困難。這個(gè)問題的解決方案是讓您的網(wǎng)站(包括格式、結(jié)構(gòu)、導(dǎo)航、視覺效果和書面內(nèi)容)對(duì)所有人都具有包容性。換句話說,您需要優(yōu)先考慮網(wǎng)絡(luò)可訪問性。
什么是網(wǎng)絡(luò)可訪問性?
網(wǎng)絡(luò)可訪問性是指使網(wǎng)站可供所有訪問者(包括殘障人士、殘障人士和限制人士)使用的做法。網(wǎng)絡(luò)可訪問性涉及遵循某些設(shè)計(jì)原則,以確保遇到困難或限制的人與沒有遇到困難或限制的人擁有相同或相似的體驗(yàn)。這可確保每個(gè)用戶都可以訪問您的內(nèi)容。
誰管理互聯(lián)網(wǎng)上的網(wǎng)絡(luò)可訪問性?
那么,誰負(fù)責(zé)網(wǎng)絡(luò)無障礙倡議并致力于在互聯(lián)網(wǎng)上實(shí)施它?答案是萬維網(wǎng)聯(lián)盟(W3C)的WebAccessibilityInitiative(WIP)的成員。這些組織負(fù)責(zé)發(fā)布Web內(nèi)容可訪問性指南(WCAG)(我們將在下面進(jìn)行審查)和相關(guān)內(nèi)容。
為什么網(wǎng)絡(luò)可訪問性很重要?
如前所述,網(wǎng)絡(luò)可訪問性使您的網(wǎng)站及其內(nèi)容對(duì)所有訪問者來說更加用戶友好且易于理解。這包括那些有殘疾和限制的人,例如:失明、低視力、學(xué)習(xí)障礙、認(rèn)知障礙、耳聾、聽力損失、言語障礙、身體殘疾。網(wǎng)絡(luò)可訪問性不是可選的;它是必備的,這就是為什么網(wǎng)絡(luò)可訪問性很重要。通過優(yōu)先考慮網(wǎng)站的可訪問性級(jí)別,您將增強(qiáng)所有訪問者的用戶體驗(yàn)-包括那些登陸您網(wǎng)站的殘障或有限制的訪問者。
您還將展示您的公司對(duì)包容性的承諾。通過這樣做,您可以向訪問者、潛在客戶和客戶表明您重視并關(guān)心他們作為個(gè)體,而作為回報(bào),這項(xiàng)投資將提高您的品牌忠誠度和宣傳度。
滿足網(wǎng)絡(luò)可訪問性標(biāo)準(zhǔn)聽起來似乎是目前應(yīng)該做的正確的事情(確實(shí)如此)——但法律是否要求您這么做?
如何強(qiáng)制實(shí)施網(wǎng)絡(luò)可訪問性?
長話短說,除非您運(yùn)營政府網(wǎng)站,否則沒有任何與網(wǎng)站可訪問性相關(guān)的可執(zhí)行法律。在這種情況下,您必須遵守《康復(fù)法》指南第508條。
然而,僅僅因?yàn)榫W(wǎng)絡(luò)可訪問性不是正式法律并不意味著您的企業(yè)將自動(dòng)避免訴訟。大公司因缺乏可訪問的網(wǎng)站而被起訴的案例有很多。
事實(shí)上,2017年至2018年間,向聯(lián)邦法院提起的訴訟數(shù)量增加了181%。
例如,在Gil訴Winn-Dixie案的判決中,法院裁定網(wǎng)站可能構(gòu)成《美國殘疾人法案》(ADA)規(guī)定的“公共設(shè)施”。
換句話說,對(duì)于擁有實(shí)體店和網(wǎng)站的企業(yè)來說,他們的網(wǎng)站可以被認(rèn)為與實(shí)體店位置高度集成。
因此,他們的網(wǎng)站可以被視為其實(shí)體店位置的“門戶”。因此,網(wǎng)站構(gòu)成ADA涵蓋的“公共便利服務(wù)”。換句話說,網(wǎng)站應(yīng)該滿足可訪問性標(biāo)準(zhǔn)。
在達(dá)美樂比薩訴吉列爾莫·羅伯斯一案中,法院做出了有利于羅伯斯的裁決,羅伯斯是一位盲人,盡管他使用屏幕閱讀軟件,但無法通過達(dá)美樂的網(wǎng)站和應(yīng)用程序訂購食物。
在本案中,美國第九巡回上訴法院陪審團(tuán)表示,“……多米諾網(wǎng)站和應(yīng)用程序據(jù)稱無法訪問,阻礙了其實(shí)體披薩特許經(jīng)營店(公共住宿場(chǎng)所)的商品和服務(wù)的訪問。”
為了避免法律麻煩,或者只是將訪問者拒之門外,請(qǐng)確保您的網(wǎng)站不會(huì)阻止任何人使用、瀏覽或獲取您共享的任何信息。
做到這一點(diǎn)的最佳方法是遵守WCAG—因此接下來讓我們回顧一下這些準(zhǔn)則和標(biāo)準(zhǔn)。
網(wǎng)絡(luò)無障礙標(biāo)準(zhǔn)
最新的WCAG規(guī)定了創(chuàng)建無障礙網(wǎng)站的四個(gè)主要原則。這四項(xiàng)原則中包括網(wǎng)絡(luò)可訪問性指南,您可以在網(wǎng)站上隨時(shí)隨地參考和應(yīng)用。
1.可感知性
訪問者必須能夠感知或理解并了解您網(wǎng)站上呈現(xiàn)的內(nèi)容和信息。
請(qǐng)記住,“感知”并不一定意味著“用眼睛看”——盲人或視力不佳的用戶經(jīng)常使用屏幕閱讀器軟件,該軟件將打印文本轉(zhuǎn)換為合成語音或盲文字符。創(chuàng)建和更新網(wǎng)站時(shí)請(qǐng)考慮這些用戶。
2、可操作性
可以在不以任何方式干擾用戶的情況下使用可操作的網(wǎng)站。所有訪問者都可以使用網(wǎng)站功能的各個(gè)部分,從導(dǎo)航頁面到從菜單中選擇鏈接,再到播放和暫停視頻和音頻。一般來說,最可操作的網(wǎng)站都是簡單的。此外,許多人放棄了任何可能妨礙殘疾和限制用戶的多余功能。3.可以理解性
您網(wǎng)站上的所有內(nèi)容(包括書面和圖形設(shè)計(jì)內(nèi)容)都應(yīng)該易于訪問者理解?;靵y、冗長的語言不僅讓典型訪問者難以理解,而且還限制了那些有認(rèn)知困難和障礙以及不會(huì)說您網(wǎng)站主要語言的人的訪問。保持其易消化。
這一原則也適用于您網(wǎng)站的結(jié)構(gòu)。您的頁面需要直觀地組織,并且大多數(shù)(如果不是全部)頁面上的訪問者都可以輕松使用您的導(dǎo)航。
4.強(qiáng)健性
您網(wǎng)站上的內(nèi)容應(yīng)該易于所有訪問者理解和使用,包括使用屏幕閱讀器等輔助技術(shù)的訪問者。為此,請(qǐng)編寫HTML,讓輔助技術(shù)無需視覺參考即可解析您的代碼。
如何使您的網(wǎng)站易于訪問
查看上述原則后,您可能會(huì)意識(shí)到您的網(wǎng)站不太符合這些標(biāo)準(zhǔn)。或者,也許您通過可訪問性測(cè)試工具運(yùn)行您的網(wǎng)站,但沒有獲得最佳分?jǐn)?shù)。
無論哪種方式,WCAG都為上述四項(xiàng)原則中的每一項(xiàng)提供了幾條具體指南,您可以立即實(shí)施。讓我們進(jìn)一步解析這些指南。或者,要對(duì)這些指南進(jìn)行更全面的審查,請(qǐng)參閱我們完整的網(wǎng)絡(luò)可訪問性清單。
可感知的網(wǎng)絡(luò)可訪問性指南
提供替代文本:頁面上的所有非文本項(xiàng)目(包括圖像、視頻和音頻內(nèi)容)都必須有替代文本,以便盲人能夠理解它們。圖像替代文本是滿足此準(zhǔn)則的最常見方法,建議您為網(wǎng)站上的每個(gè)非裝飾圖像添加替代文本。對(duì)于裝飾圖像,請(qǐng)包含alt屬性但將其留空,即:
<imgsrc="decorative.png"alt=""/>
這告訴屏幕閱讀器圖像存在,但它可以忽略該圖形。雖然圖像替代文本很重要,但請(qǐng)記住為網(wǎng)站的其他元素提供替代文本,例如輔助技術(shù)難以解釋的圖表或表格。此外,請(qǐng)確保在編寫替代文本時(shí)遵循替代文本最佳實(shí)踐。
提供消費(fèi)基于時(shí)間的媒體的替代方式:基于時(shí)間的媒體包括音頻和視頻內(nèi)容。對(duì)于音頻內(nèi)容,請(qǐng)?zhí)峁┩暾匿浺粑淖钟涗?。?duì)于視頻,請(qǐng)確保字幕與音頻同步。這兩者都可以幫助聽力能力有限的用戶。
以適應(yīng)性強(qiáng)的方式構(gòu)建內(nèi)容:此指南意味著編寫HTML文件,以便在刪除頁面樣式時(shí)不會(huì)丟失預(yù)期的信息和結(jié)構(gòu)。例如,正確的標(biāo)題、有序和無序列表元素以及粗體和斜體文本傳達(dá)信息。
讓您的內(nèi)容易于看到和聽到:對(duì)于有視力的人來說,利用色彩對(duì)比至關(guān)重要,以便每個(gè)人(包括色盲患者)都可以閱讀您的內(nèi)容并理解您想要傳達(dá)的任何視覺信息。此外,用戶應(yīng)該能夠調(diào)整網(wǎng)站上的任何背景音頻或完全停止音頻播放。
一些網(wǎng)站(例如HubSpot)具有切換選項(xiàng),以便訪問者可以選擇顏色對(duì)比度。
可操作的網(wǎng)頁無障礙指南
確保通過鍵盤實(shí)現(xiàn)完整的功能:某些瀏覽您網(wǎng)站的用戶不會(huì)使用鼠標(biāo)或觸摸板。因此,您網(wǎng)站上的所有功能都應(yīng)該僅通過鍵盤即可訪問。例如,Tab鍵應(yīng)讓用戶在頁面上的可選元素之間跳轉(zhuǎn),而Enter/Return鍵應(yīng)“單擊”焦點(diǎn)元素。
提供充足的時(shí)間與您的網(wǎng)站互動(dòng):允許用戶在合理的時(shí)間限制內(nèi)閱讀、觀看和使用您網(wǎng)站上的各種內(nèi)容類型。如果您網(wǎng)站上的任何操作包含時(shí)間限制,則應(yīng)允許用戶延長或取消該時(shí)間限制。該指南也適用于可訪問的下拉菜單:如果用戶從鼠標(biāo)上脫離菜單,則在菜單消失之前設(shè)置時(shí)間延遲是一個(gè)很好的做法。
避免閃爍/閃爍的內(nèi)容:根據(jù)W3C,每秒閃爍超過3次的內(nèi)容可能會(huì)引發(fā)癲癇發(fā)作。最好避免這種情況。如果由于某種原因您不能,則必須提供警告。
提供導(dǎo)航以幫助用戶了解他們?cè)谀睦镆约翱梢匀ツ睦铮?/span>清晰的頁面標(biāo)題、有意義的鏈接、鍵盤焦點(diǎn)指示器和正確的標(biāo)題都向用戶表明他們?cè)谀W(wǎng)站上的位置以及哪些元素是可點(diǎn)擊的鏈接。
易于理解的網(wǎng)絡(luò)無障礙指南
使文本內(nèi)容可讀:在起草內(nèi)容時(shí)考慮潛在受眾的全部范圍。您的寫作應(yīng)該能夠被許多讀者理解,包括那些學(xué)習(xí)您網(wǎng)站的母語的讀者。避免使用技術(shù)性很強(qiáng)的術(shù)語和地方俚語。
構(gòu)建有邏輯的頁面:在規(guī)劃網(wǎng)站的結(jié)構(gòu)和導(dǎo)航時(shí),以訪問者感覺直觀的方式放置導(dǎo)航鏈接和頁面。這包括將導(dǎo)航放在首屏上方,最常見的是在頁面的頁眉(和頁腳)中。
編寫有用的錯(cuò)誤消息:沒有人喜歡收到錯(cuò)誤消息,因此請(qǐng)?zhí)峁┣逦腻e(cuò)誤描述和說明,以幫助訪問者糾正錯(cuò)誤。
強(qiáng)大的網(wǎng)絡(luò)可訪問性指南
編寫可解析的HTML:輔助技術(shù)通常使用網(wǎng)頁的HTML文件將其內(nèi)容轉(zhuǎn)換為不同的格式。因此,您的頁面的HTML代碼應(yīng)該編寫良好。為了實(shí)現(xiàn)可訪問性,這意味著在需要時(shí)使用開始和結(jié)束標(biāo)記,并避免元素間的重復(fù)ID以及同一HTML標(biāo)記內(nèi)的重復(fù)屬性。
現(xiàn)在您已經(jīng)了解了什么是網(wǎng)絡(luò)可訪問性、為什么它很重要以及相關(guān)指南,讓我們看看一些可以在提高網(wǎng)站訪問性時(shí)可以依靠的幫助工具。
網(wǎng)絡(luò)輔助工具
目前有各種可用的網(wǎng)絡(luò)可訪問性測(cè)試工具。W3C在其網(wǎng)站上整理并分享了這些產(chǎn)品的列表,供您了解更多信息并相互比較。我們也有工具推薦列表。如果您正在尋找網(wǎng)站可訪問性解決方案,我們也可以為您提供幫助。
為了本指南的目的,我們突出顯示了以下幾個(gè)選項(xiàng),以深入了解這些輔助工具所具有的功能。
WAVE
WAVEbyWebAIM提供多種工具來幫助您評(píng)估網(wǎng)站的可訪問性。它們提供了網(wǎng)站上需要改進(jìn)以更易于訪問的區(qū)域的直觀表示。
首先,輸入您的網(wǎng)站URL,Wave將突出顯示您網(wǎng)站的哪些區(qū)域不符合WCAG標(biāo)準(zhǔn)。您還將對(duì)您的網(wǎng)站內(nèi)容進(jìn)行人工審核和審查。
DYNOMapper
IndigoDesignCompanyLLC的DYNOMapper是一個(gè)站點(diǎn)地圖生成器-這意味著它在進(jìn)行內(nèi)容清單和審核以及關(guān)鍵字跟蹤后使用站點(diǎn)地圖來顯示您網(wǎng)站的可訪問性。
該工具還與GoogleAnalytics集成,可以對(duì)可識(shí)別區(qū)域進(jìn)行深入分析,以提高可訪問性。DynoMapper將為您測(cè)試所有類型的網(wǎng)站,包括公共、私人和在線應(yīng)用程序,因此它的徹底性得分。
SortSite
接下來,我們使用PowerMapper的SortSite只需單擊一下即可評(píng)估整個(gè)網(wǎng)站或特定網(wǎng)頁的可訪問性。該工具使用1,200條指南和標(biāo)準(zhǔn)來確定網(wǎng)站的可訪問性。
SortSite對(duì)您網(wǎng)站的可訪問性的一些主要類別包括損壞的鏈接、兼容性、SEO、隱私、網(wǎng)絡(luò)標(biāo)準(zhǔn)和可用性。
A11Y顏色對(duì)比輔助功能驗(yàn)證器
為了使您網(wǎng)站的顏色易于訪問,請(qǐng)使用A11Y公司的A11Y顏色對(duì)比度可訪問性驗(yàn)證器。它顯示您的網(wǎng)站或網(wǎng)頁上的顏色對(duì)比度問題。在該工具中,您可以通過URL或一組特定的顏色(通過使用其十六進(jìn)制代碼或色輪上的位置)進(jìn)行測(cè)試。
只要該工具檢測(cè)到顏色組合或?qū)Ρ榷儒e(cuò)誤,就會(huì)提供修復(fù)這些錯(cuò)誤以滿足WCAG標(biāo)準(zhǔn)的想法和建議。
最后
本文提到到網(wǎng)絡(luò)可訪問性是國內(nèi)很多建站人員容易忽略的板塊,尤其是中小網(wǎng)站??梢钥吹轿恼轮刑岬降囊恍┰V訟案例也是針對(duì)美國當(dāng)?shù)亍5W(wǎng)站的無障礙對(duì)于谷歌的pagespeed分?jǐn)?shù)是有好處的。
翻譯作品,原作者地址:https://blog.hubspot.com/website/web-accessibility
文章為作者獨(dú)立觀點(diǎn),不代表DLZ123立場(chǎng)。如有侵權(quán),請(qǐng)聯(lián)系我們。( 版權(quán)為作者所有,如需轉(zhuǎn)載,請(qǐng)聯(lián)系作者 )

網(wǎng)站運(yùn)營至今,離不開小伙伴們的支持。 為了給小伙伴們提供一個(gè)互相交流的平臺(tái)和資源的對(duì)接,特地開通了獨(dú)立站交流群。
群里有不少運(yùn)營大神,不時(shí)會(huì)分享一些運(yùn)營技巧,更有一些資源收藏愛好者不時(shí)分享一些優(yōu)質(zhì)的學(xué)習(xí)資料。
現(xiàn)在可以掃碼進(jìn)群,備注【加群】。 ( 群完全免費(fèi),不廣告不賣課!)