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

網站運營至今,離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接,特地開通了獨立站交流群。
群里有不少運營大神,不時會分享一些運營技巧,更有一些資源收藏愛好者不時分享一些優質的學習資料。
現在可以掃碼進群,備注【加群】。 ( 群完全免費,不廣告不賣課!)