Technical SEO: 網(wǎng)絡(luò)可訪問性終極指南

網(wǎng)絡(luò)可訪問性可確保所有訪問者，無論其能力如何，都能在您的網(wǎng)站上獲得無縫體驗。不幸的是，許多網(wǎng)站不遵守網(wǎng)絡(luò)可訪問性最佳實踐和指南，這使得殘障用戶的體驗變得困難。這個問題的解決方案是讓您的網(wǎng)站（包括格式、結(jié)構(gòu)、導(dǎo)航、視覺效果和書面內(nèi)容）對所有人都具有包容性。換句話說，您需要優(yōu)先考慮網(wǎng)絡(luò)可訪問性。

什么是網(wǎng)絡(luò)可訪問性？

網(wǎng)絡(luò)可訪問性是指使網(wǎng)站可供所有訪問者（包括殘障人士、殘障人士和限制人士）使用的做法。網(wǎng)絡(luò)可訪問性涉及遵循某些設(shè)計原則，以確保遇到困難或限制的人與沒有遇到困難或限制的人擁有相同或相似的體驗。這可確保每個用戶都可以訪問您的內(nèi)容。

誰管理互聯(lián)網(wǎng)上的網(wǎng)絡(luò)可訪問性？

那么，誰負責網(wǎng)絡(luò)無障礙倡議并致力于在互聯(lián)網(wǎng)上實施它？答案是萬維網(wǎng)聯(lián)盟(W3C)的WebAccessibilityInitiative(WIP)的成員。這些組織負責發(fā)布Web內(nèi)容可訪問性指南(WCAG)（我們將在下面進行審查）和相關(guān)內(nèi)容。

為什么網(wǎng)絡(luò)可訪問性很重要？

如前所述，網(wǎng)絡(luò)可訪問性使您的網(wǎng)站及其內(nèi)容對所有訪問者來說更加用戶友好且易于理解。這包括那些有殘疾和限制的人，例如：失明、低視力、學習障礙、認知障礙、耳聾、聽力損失、言語障礙、身體殘疾。網(wǎng)絡(luò)可訪問性不是可選的；它是必備的，這就是為什么網(wǎng)絡(luò)可訪問性很重要。通過優(yōu)先考慮網(wǎng)站的可訪問性級別，您將增強所有訪問者的用戶體驗-包括那些登陸您網(wǎng)站的殘障或有限制的訪問者。

您還將展示您的公司對包容性的承諾。通過這樣做，您可以向訪問者、潛在客戶和客戶表明您重視并關(guān)心他們作為個體，而作為回報，這項投資將提高您的品牌忠誠度和宣傳度。

滿足網(wǎng)絡(luò)可訪問性標準聽起來似乎是目前應(yīng)該做的正確的事情（確實如此）——但法律是否要求您這么做？

如何強制實施網(wǎng)絡(luò)可訪問性？

長話短說，除非您運營政府網(wǎng)站，否則沒有任何與網(wǎng)站可訪問性相關(guān)的可執(zhí)行法律。在這種情況下，您必須遵守《康復(fù)法》指南第508條。

然而，僅僅因為網(wǎng)絡(luò)可訪問性不是正式法律并不意味著您的企業(yè)將自動避免訴訟。大公司因缺乏可訪問的網(wǎng)站而被起訴的案例有很多。

事實上，2017年至2018年間，向聯(lián)邦法院提起的訴訟數(shù)量增加了181%。

例如，在Gil訴Winn-Dixie案的判決中，法院裁定網(wǎng)站可能構(gòu)成《美國殘疾人法案》(ADA)規(guī)定的“公共設(shè)施”。

換句話說，對于擁有實體店和網(wǎng)站的企業(yè)來說，他們的網(wǎng)站可以被認為與實體店位置高度集成。

因此，他們的網(wǎng)站可以被視為其實體店位置的“門戶”。因此，網(wǎng)站構(gòu)成ADA涵蓋的“公共便利服務(wù)”。換句話說，網(wǎng)站應(yīng)該滿足可訪問性標準。

在達美樂比薩訴吉列爾莫·羅伯斯一案中，法院做出了有利于羅伯斯的裁決，羅伯斯是一位盲人，盡管他使用屏幕閱讀軟件，但無法通過達美樂的網(wǎng)站和應(yīng)用程序訂購食物。

在本案中，美國第九巡回上訴法院陪審團表示，“……多米諾網(wǎng)站和應(yīng)用程序據(jù)稱無法訪問，阻礙了其實體披薩特許經(jīng)營店（公共住宿場所）的商品和服務(wù)的訪問。”

為了避免法律麻煩，或者只是將訪問者拒之門外，請確保您的網(wǎng)站不會阻止任何人使用、瀏覽或獲取您共享的任何信息。

做到這一點的最佳方法是遵守WCAG—因此接下來讓我們回顧一下這些準則和標準。

網(wǎng)絡(luò)無障礙標準

最新的WCAG規(guī)定了創(chuàng)建無障礙網(wǎng)站的四個主要原則。這四項原則中包括網(wǎng)絡(luò)可訪問性指南，您可以在網(wǎng)站上隨時隨地參考和應(yīng)用。

1.可感知性

訪問者必須能夠感知或理解并了解您網(wǎng)站上呈現(xiàn)的內(nèi)容和信息。

請記住，“感知”并不一定意味著“用眼睛看”——盲人或視力不佳的用戶經(jīng)常使用屏幕閱讀器軟件，該軟件將打印文本轉(zhuǎn)換為合成語音或盲文字符。創(chuàng)建和更新網(wǎng)站時請考慮這些用戶。

2、可操作性

可以在不以任何方式干擾用戶的情況下使用可操作的網(wǎng)站。所有訪問者都可以使用網(wǎng)站功能的各個部分，從導(dǎo)航頁面到從菜單中選擇鏈接，再到播放和暫停視頻和音頻。一般來說，最可操作的網(wǎng)站都是簡單的。此外，許多人放棄了任何可能妨礙殘疾和限制用戶的多余功能。3.可以理解性

您網(wǎng)站上的所有內(nèi)容（包括書面和圖形設(shè)計內(nèi)容）都應(yīng)該易于訪問者理解。混亂、冗長的語言不僅讓典型訪問者難以理解，而且還限制了那些有認知困難和障礙以及不會說您網(wǎng)站主要語言的人的訪問。保持其易消化。

這一原則也適用于您網(wǎng)站的結(jié)構(gòu)。您的頁面需要直觀地組織，并且大多數(shù)（如果不是全部）頁面上的訪問者都可以輕松使用您的導(dǎo)航。

4.強健性

您網(wǎng)站上的內(nèi)容應(yīng)該易于所有訪問者理解和使用，包括使用屏幕閱讀器等輔助技術(shù)的訪問者。為此，請編寫HTML，讓輔助技術(shù)無需視覺參考即可解析您的代碼。

如何使您的網(wǎng)站易于訪問

查看上述原則后，您可能會意識到您的網(wǎng)站不太符合這些標準。或者，也許您通過可訪問性測試工具運行您的網(wǎng)站，但沒有獲得最佳分數(shù)。

無論哪種方式，WCAG都為上述四項原則中的每一項提供了幾條具體指南，您可以立即實施。讓我們進一步解析這些指南。或者，要對這些指南進行更全面的審查，請參閱我們完整的網(wǎng)絡(luò)可訪問性清單。

可感知的網(wǎng)絡(luò)可訪問性指南

提供替代文本：頁面上的所有非文本項目（包括圖像、視頻和音頻內(nèi)容）都必須有替代文本，以便盲人能夠理解它們。圖像替代文本是滿足此準則的最常見方法，建議您為網(wǎng)站上的每個非裝飾圖像添加替代文本。對于裝飾圖像，請包含alt屬性但將其留空，即：

<imgsrc="decorative.png"alt=""/>

這告訴屏幕閱讀器圖像存在，但它可以忽略該圖形。雖然圖像替代文本很重要，但請記住為網(wǎng)站的其他元素提供替代文本，例如輔助技術(shù)難以解釋的圖表或表格。此外，請確保在編寫替代文本時遵循替代文本最佳實踐。

提供消費基于時間的媒體的替代方式：基于時間的媒體包括音頻和視頻內(nèi)容。對于音頻內(nèi)容，請?zhí)峁┩暾匿浺粑淖钟涗洝τ谝曨l，請確保字幕與音頻同步。這兩者都可以幫助聽力能力有限的用戶。

以適應(yīng)性強的方式構(gòu)建內(nèi)容：此指南意味著編寫HTML文件，以便在刪除頁面樣式時不會丟失預(yù)期的信息和結(jié)構(gòu)。例如，正確的標題、有序和無序列表元素以及粗體和斜體文本傳達信息。

讓您的內(nèi)容易于看到和聽到：對于有視力的人來說，利用色彩對比至關(guān)重要，以便每個人（包括色盲患者）都可以閱讀您的內(nèi)容并理解您想要傳達的任何視覺信息。此外，用戶應(yīng)該能夠調(diào)整網(wǎng)站上的任何背景音頻或完全停止音頻播放。

一些網(wǎng)站（例如HubSpot）具有切換選項，以便訪問者可以選擇顏色對比度。

可操作的網(wǎng)頁無障礙指南

確保通過鍵盤實現(xiàn)完整的功能：某些瀏覽您網(wǎng)站的用戶不會使用鼠標或觸摸板。因此，您網(wǎng)站上的所有功能都應(yīng)該僅通過鍵盤即可訪問。例如，Tab鍵應(yīng)讓用戶在頁面上的可選元素之間跳轉(zhuǎn)，而Enter/Return鍵應(yīng)“單擊”焦點元素。

提供充足的時間與您的網(wǎng)站互動：允許用戶在合理的時間限制內(nèi)閱讀、觀看和使用您網(wǎng)站上的各種內(nèi)容類型。如果您網(wǎng)站上的任何操作包含時間限制，則應(yīng)允許用戶延長或取消該時間限制。該指南也適用于可訪問的下拉菜單：如果用戶從鼠標上脫離菜單，則在菜單消失之前設(shè)置時間延遲是一個很好的做法。

避免閃爍/閃爍的內(nèi)容：根據(jù)W3C，每秒閃爍超過3次的內(nèi)容可能會引發(fā)癲癇發(fā)作。最好避免這種情況。如果由于某種原因您不能，則必須提供警告。

提供導(dǎo)航以幫助用戶了解他們在哪里以及可以去哪里：清晰的頁面標題、有意義的鏈接、鍵盤焦點指示器和正確的標題都向用戶表明他們在您網(wǎng)站上的位置以及哪些元素是可點擊的鏈接。

易于理解的網(wǎng)絡(luò)無障礙指南

使文本內(nèi)容可讀：在起草內(nèi)容時考慮潛在受眾的全部范圍。您的寫作應(yīng)該能夠被許多讀者理解，包括那些學習您網(wǎng)站的母語的讀者。避免使用技術(shù)性很強的術(shù)語和地方俚語。

構(gòu)建有邏輯的頁面：在規(guī)劃網(wǎng)站的結(jié)構(gòu)和導(dǎo)航時，以訪問者感覺直觀的方式放置導(dǎo)航鏈接和頁面。這包括將導(dǎo)航放在首屏上方，最常見的是在頁面的頁眉（和頁腳）中。

編寫有用的錯誤消息：沒有人喜歡收到錯誤消息，因此請?zhí)峁┣逦腻e誤描述和說明，以幫助訪問者糾正錯誤。

強大的網(wǎng)絡(luò)可訪問性指南

編寫可解析的HTML：輔助技術(shù)通常使用網(wǎng)頁的HTML文件將其內(nèi)容轉(zhuǎn)換為不同的格式。因此，您的頁面的HTML代碼應(yīng)該編寫良好。為了實現(xiàn)可訪問性，這意味著在需要時使用開始和結(jié)束標記，并避免元素間的重復(fù)ID以及同一HTML標記內(nèi)的重復(fù)屬性。

現(xiàn)在您已經(jīng)了解了什么是網(wǎng)絡(luò)可訪問性、為什么它很重要以及相關(guān)指南，讓我們看看一些可以在提高網(wǎng)站訪問性時可以依靠的幫助工具。

網(wǎng)絡(luò)輔助工具

目前有各種可用的網(wǎng)絡(luò)可訪問性測試工具。W3C在其網(wǎng)站上整理并分享了這些產(chǎn)品的列表，供您了解更多信息并相互比較。我們也有工具推薦列表。如果您正在尋找網(wǎng)站可訪問性解決方案，我們也可以為您提供幫助。

為了本指南的目的，我們突出顯示了以下幾個選項，以深入了解這些輔助工具所具有的功能。

WAVE

WAVEbyWebAIM提供多種工具來幫助您評估網(wǎng)站的可訪問性。它們提供了網(wǎng)站上需要改進以更易于訪問的區(qū)域的直觀表示。

首先，輸入您的網(wǎng)站URL，Wave將突出顯示您網(wǎng)站的哪些區(qū)域不符合WCAG標準。您還將對您的網(wǎng)站內(nèi)容進行人工審核和審查。

DYNOMapper

IndigoDesignCompanyLLC的DYNOMapper是一個站點地圖生成器-這意味著它在進行內(nèi)容清單和審核以及關(guān)鍵字跟蹤后使用站點地圖來顯示您網(wǎng)站的可訪問性。

該工具還與GoogleAnalytics集成，可以對可識別區(qū)域進行深入分析，以提高可訪問性。DynoMapper將為您測試所有類型的網(wǎng)站，包括公共、私人和在線應(yīng)用程序，因此它的徹底性得分。

SortSite

接下來，我們使用PowerMapper的SortSite只需單擊一下即可評估整個網(wǎng)站或特定網(wǎng)頁的可訪問性。該工具使用1,200條指南和標準來確定網(wǎng)站的可訪問性。

SortSite對您網(wǎng)站的可訪問性的一些主要類別包括損壞的鏈接、兼容性、SEO、隱私、網(wǎng)絡(luò)標準和可用性。

A11Y顏色對比輔助功能驗證器

為了使您網(wǎng)站的顏色易于訪問，請使用A11Y公司的A11Y顏色對比度可訪問性驗證器。它顯示您的網(wǎng)站或網(wǎng)頁上的顏色對比度問題。在該工具中，您可以通過URL或一組特定的顏色（通過使用其十六進制代碼或色輪上的位置）進行測試。

只要該工具檢測到顏色組合或?qū)Ρ榷儒e誤，就會提供修復(fù)這些錯誤以滿足WCAG標準的想法和建議。

最后

本文提到到網(wǎng)絡(luò)可訪問性是國內(nèi)很多建站人員容易忽略的板塊，尤其是中小網(wǎng)站。可以看到文章中提到的一些訴訟案例也是針對美國當?shù)亍５W(wǎng)站的無障礙對于谷歌的pagespeed分數(shù)是有好處的。

翻譯作品，原作者地址：https://blog.hubspot.com/website/web-accessibility