Web 內容可訪問性指南:它們是什麼以及為什麼 SEO 應該關心

已發表: 2021-08-21

如果您目前正在努力讓所有用戶都可以訪問您的網站,那麼您可能已經聽說過美國殘疾人法案 (ADA)。 這條美國聯邦立法的通過是為了防止政府機構或私營公司對殘疾人的歧視。

儘管 ADA 是在大多數組織出現在線業務之前創建的,但最近的法律先例表明,該法案適用於網站和移動應用程序的可訪問性,就像它適用於商店、餐館和電影院等實體場所一樣。

ADA 本身沒有為網絡和移動可訪問性制定任何具體標準。 相反,許多 Web 開發人員和法律專業人士轉向 Web 內容可訪問性指南 (WCAG),該指南被廣泛接受為當今數字可訪問性的基準。

在本博客中,我們將仔細研究 WCAG,並概述您可以採取哪些步驟來滿足其標準。 我們還將簡要解釋為什麼可訪問的網站通常在搜索引擎中排名更高——讓可訪問性成為正確的選擇!

SEO 和可訪問性之間有什麼聯繫?

紫色背景上的兩個白色氣泡,其中一個標記

確保所有用戶都可以訪問您的網站已經為您的公司帶來了巨大的好處 - 如果更多人訪問您的網站,您可能會看到業務增長。 就這麼簡單。

考慮到四分之一的美國人生活在殘疾人中,而在全球範圍內,殘疾人的可支配收入為 1.2 萬億美元,讓所有人都可以訪問您的網站和移動應用程序,從而為新的消費者群體打開了您的產品和服務,並且還可以顯著增強您網站的 SEO。

考慮這個例子:搜索引擎旨在推廣內容清晰且排序正確的頁面。 這意味著您需要在標題等方面遵循 WCAG 指南。 如果您沒有以正確的順序包含標題等級 - 例如,通過將帶有第四級 (<h4>) 標題的文本放在第二級 (<h2>) 標題之後 - 您可能會導致人們的可訪問性問題使用輔助技術。

同樣,如果您沒有為圖像提供適當的替代文本,或者如果您將標題與替代圖像文本混合在一起,則會為殘障用戶帶來問題,並且還會損害您網站上的圖像搜索引擎優化。

這些只是改善網站可訪問性如何促進 SEO 的幾個例子,但要了解更多信息,請務必觀看 Cooper Hollmaier 關於可訪問性與 SEO 之間關係的新 Whiteboard Friday 系列。

事實上,您在數字可訪問性方面所做的任何投資也將反映在您的搜索排名中。 谷歌在其使命聲明中表示,其目的是“組織世界上的信息並使其普遍可用且有用。” “普遍可訪問”是這裡的關鍵詞。 它表明,隨著谷歌繼續發展其搜索引擎並使其與無障礙設計原則保持一致,具有強大無障礙功能的網站的搜索排名將越來越高。

什麼是 WCAG 以及如何實現合規性?

紫色背景上的白色框。盒子裡面是一個更新的進度條,標有

WCAG 為希望創建可訪問網站的 Web 開發人員提供了一組規則。 它由萬維網聯盟 (W3C) 創建,該聯盟是一個由公共和成員組織組成的全球社區,致力於讓互聯網向所有人開放。

隨著新技術和創新的出現,網站和移動應用程序也在不斷變化。 為了使 WCAG 指南保持最新,W3C 還致力於持續為 Web 開發人員提供新的建議。

如果您查看最近的數字可訪問性訴訟,您會發現 WCAG 2.0 是引用最廣泛的版本。 但是,您應該注意這個版本已經過時了。 WCAG 2.1 現已推出,並提供有關移動可訪問性的進一步指導——而 WCAG 2.2 緊隨其後。

同樣重要的是要注意,雖然“WCAG 合規性”是一個廣泛使用的術語,但它實際上是用詞不當。 從技術上講,考慮成功滿足 WCAG 標準更為準確。 “WCAG 合規性”一詞意味著監管機構,W3C 不是行業監管機構,也不是聯邦立法的一部分。 也就是說,WCAG 合規性是 Web 開發會議和法律研討會都接受的措辭,因此我們將在本文中使用該術語。

我的網站是否需要符合 WCAG 標準?

如果你在美國,是的,確實如此。 法律要求美國公民使用或美國公司擁有的每個網站都必須遵守 ADA。 由於 WCAG 經常被引用為訴訟期間數字可訪問性的標準,因此遵循其指導可以幫助您的組織避免代價高昂且具有破壞性的訴訟。 任何公司都免於遵守 ADA 的想法也是一個神話。

如何使我的網站符合 WCAG 標準?

紫色背景上的四個白色盒子,每個盒子包含四個插圖之一:一隻眼睛、一個操縱桿、一個燈泡和一個齒輪。

WCAG 制定了四項主要原則。 這些提供了一個堅實的基礎,Web 開發人員可以遵循這些基礎來構建每個人都可以訪問的網站。 讓我們仔細看看每一個:

1. 可感知

為了可感知,網站上包含的所有信息及其用戶界面中的所有功能(例如鍊接、文本框和按鈕)必須以一種方式呈現,以便所有用戶都可以通過他們的至少一種感官感知它們。 如果任何內容對任何用戶隱藏,則該網站不能被視為可感知的。

2. 可操作

當所有用戶都可以與其交互並成功導航時,該網站被認為是可操作的。 如果網站具有任何交互功能,則所有用戶都需要能夠操作這些組件。

3. 可以理解

所有用戶都必須能夠理解網站的信息和界面。 網頁應該以可預測的方式出現和運行,並且應該保護用戶免於在導致法律承諾或金融交易發生的頁面上輸入錯誤。

4. 堅固

網站上的內容必須對各種用戶代理進行解釋。 例如,標準 Web 瀏覽器和屏幕閱讀器等輔助技術必須能夠訪問網站,並且隨著輔助技術的發展,網站上的內容必須繼續可訪問。

如何開始我的合規之旅?

紫色背景上的三個白框標記為:

在紙面上,WCAG 中提出的四項可訪問性原則聽起來很簡單。 但是你怎麼能應用它們呢? 為了幫助回答這個問題,WCAG 為四個主題中的每一個都提供了更詳細的指南,並將每個建議分解為一組成功標準。 WCAG 還概述了幾種“足夠的技術”,提供了開發人員如何在實踐中實現它們的示例。 將其視為合規性檢查清單。

每個成功標準也根據三個級別進行分類:A、AA 和 AAA。 A 表示最基本的可訪問性級別,AAA 表示最全面。 目前,法院正在將中間級別 AA 解釋為基準。

雖然本文旨在讓您更好地了解 WCAG 標準,但並未完整列出所有指南。 如果您想了解有關每個標準的更多信息,請查看 W3C 網站上的“如何滿足 WCAG”快速參考指南。 這為 WCAG 的各個方面提供了權威指南,並提供了有關開發人員如何滿足他們的建議。

1. A:部分用戶可以訪問您的網站

A 級成功標準詳細說明了您可以採取哪些步驟來避免一些最嚴重的違反可訪問性原則的行為。 例如,準則 1.4 側重於可區分性,這只是意味著讓用戶更容易感知內容。

1.4.1顏色的使用是 A 級成功標準。 它解釋說,網站不應僅使用顏色作為傳達指示行動、提示響應或區別視覺元素的信息的主要方式。

如果網站包含一段紅色文本,並且該文本中的超鏈接以綠色突出顯示,則紅/綠色盲用戶將無法區分鏈接與文本。 提高可訪問性的一種方法是向鏈接添加另一個視覺提示,例如給它們加下劃線或使用不同的字體。

2. AA:幾乎所有用戶都可以訪問您的網站

要達到 AA 級,您首先需要滿足所有 A 級成功標準。 AA 級指南自然建立在 A 級標準之上,提供了額外的要求。

例如,在指南 1.4 中, 1.4.3 對比度(最低)級別 AA 成功標準增強了1.4.1 顏色使用的指南。 它概述了任何頁面上的文本必須具有 4.5:1 或更高的顏色對比度。 如果文本很大,或者文本圖像完全是裝飾性的,或者是品牌或徽標的一部分,則有一些例外。

您可以在我們關於該主題的完整文章中了解有關如何實現正確顏色對比度的更多信息。 就本博客而言,想像一下主要文本在白色背景上顯示為黑色文本的網站與文本在白色背景上呈淡黃色的網站之間的區別就足夠了。 白底黑字的對比度很高,而白底黃字的對比度很低。 有視覺障礙的用戶通常很難看到顏色對比度的微小差異,這使得網站更重要的是確保文本的顏色對比度足夠高以使其所有人都能閱讀。

AA 級成功標準還包括1.4.4 Resize Text ,它建議用戶應該能夠在不需要輔助技術的情況下將文本放大到標準大小的 200%。

3. AAA:您的網站可供盡可能多的用戶訪問

與前兩個級別一樣,AAA 級合規性要求首先滿足所有 A 級和 AA 級成功標準。 為了達到 AAA 級,網站必須滿足更詳細的標準。 例如,在準則 1.4 中,我們發現1.4.6 Contrast (Enhanced) ,它將所需的色彩對比度從 4.5:1 提升到 7:1。

Criterion 1.4.8 Visual Presentation1.4.4 Resize Text進行了補充,要求文本的大小最多可調整 200%,同時確保用戶仍然可以閱讀每一整行文本,而無需水平滾動瀏覽器窗口。 該標準還提供了其他建議,例如允許用戶自己選擇前景色和背景色,並指定行間距和對齊方式的設置,使具有視覺或認知障礙(例如閱讀障礙)的人更容易閱讀文本。

開始改善您網站的可訪問性

通過遵循無障礙設計的原則,您還可以讓搜索引擎更輕鬆地解析和排名您的網站。

當然,數字可訪問性是一個巨大的話題,因此您可能需要方向! 令人高興的是,有許多資源可以提供幫助,其中最重要的是 W3C 的完整 Web 內容可訪問性指南 (WCAG),它應該成為所有事物可訪問性的試金石。 您還可以使用他們的快速參考指南作為主要可訪問性主題的清單。

還有許多自動化工具可幫助您查找和修復輔助功能問題,包括我的公司 AudioEye 創建的工具,您可以免費試用它們。 我們還提供由經過認證的專家團隊領導的託管服務,因此在您採取下一步行動時,請隨時與我們聯繫以獲取建議和建議。