世界各地有數(shù)百萬患有不同殘疾的網(wǎng)絡(luò)用戶，但他們無法完全訪問許多網(wǎng)站。許多網(wǎng)頁設(shè)計(jì)師在構(gòu)建網(wǎng)站或移動應(yīng)用程序時(shí)，完全忽略了網(wǎng)絡(luò)可訪問性，使得只有一定數(shù)量的用戶能夠充分利用給定的數(shù)字產(chǎn)品。那么什么是 Web 可訪問性和 WCAG？如何讓您的網(wǎng)站更易于訪問？如何檢查您的網(wǎng)站是否可以訪問？在今天的條目中，我將回答所有這些問題。

目錄：

• 什么是無障礙網(wǎng)頁？定義
  • 網(wǎng)絡(luò)無障礙和商機(jī)
  • 網(wǎng)頁可訪問性和立法
• 什么是 Web 內(nèi)容可訪問性指南 (WCAG)？
  • WCAG 1.0
  • WCAG 2.0
  • WCAG 2.1
• 如何讓您的網(wǎng)站更易于訪問？8 種行之有效的方法
• 如何檢查您的網(wǎng)站是否可訪問？
  • WAVE Web 可訪問性評估工具
  • 燈塔
• 讓所有用戶都能訪問您的網(wǎng)站

什么是無障礙網(wǎng)頁？定義

網(wǎng)站可訪問性是旨在使所有工具或數(shù)字產(chǎn)品（例如網(wǎng)站、移動應(yīng)用程序、軟件）對各種殘疾的網(wǎng)絡(luò)用戶完全可訪問的所有做法。因此，用戶不會遇到阻礙甚至無法使用特定數(shù)字產(chǎn)品的障礙。

Web 可訪問性考慮了與聽覺、認(rèn)知、神經(jīng)、身體、言語和視覺障礙有關(guān)的不同類型的障礙。重要的是，Web 可訪問性也適用于非殘障人士，他們的情況是臨時(shí)訪問數(shù)字產(chǎn)品更具挑戰(zhàn)性。例如，這些人可能是手臂骨折或眼鏡丟失的用戶、互聯(lián)網(wǎng)連接速度慢或不穩(wěn)定的用戶、使用小屏幕分辨率手機(jī)的用戶或老年人。

網(wǎng)絡(luò)無障礙和商機(jī)

事實(shí)證明，網(wǎng)絡(luò)可訪問性在商業(yè)成功中也起著重要作用。無障礙設(shè)計(jì)可讓您改善用戶體驗(yàn)和使用您的網(wǎng)站或移動應(yīng)用程序的滿足感。更重要的是，通過網(wǎng)絡(luò)可訪問性，您可以確保所有用戶都能平等地訪問您的數(shù)字產(chǎn)品：年輕人或老年人，有或沒有不同殘疾的人，富裕國家的人，或者在訪問高科技設(shè)備或互聯(lián)網(wǎng)的發(fā)展中國家的人更多有限的。簡而言之，通過不排除任何用戶，您可以擴(kuò)大受眾范圍并提升您的品牌。

網(wǎng)頁可訪問性和立法

立法是您絕對不能忽視網(wǎng)絡(luò)可訪問性的主要原因之一。隨著互聯(lián)網(wǎng)和在線活動正在成為我們生活中幾乎不可分割的一部分，在許多國家，平等獲得數(shù)字產(chǎn)品并不是一種善意，而是一種法律義務(wù)。許多國家，尤其是歐洲、北美以及部分亞洲和南美的國家，在其立法中采用了 Web 內(nèi)容可訪問性指南 (WCAG) 2.0 中規(guī)定的規(guī)則。

美國

在這個(gè)國家，? 引入了 1973 年《康復(fù)法》第 508 條修正案，以確保所有有各種殘疾的用戶都可以完全訪問每個(gè)數(shù)字產(chǎn)品。這意味著絕對每個(gè)聯(lián)邦機(jī)構(gòu)都有義務(wù)遵守該法律并提供對其信息技術(shù)的平等訪問。

此外，2017年引入了美國殘疾人法案 (ADA) 第三章——其主要目標(biāo)是打擊對殘疾人的歧視。到目前為止，已經(jīng)有許多基于 ADA 對未向所有用戶提供完全可訪問性的數(shù)字產(chǎn)品所有者提起的訴訟。

歐洲聯(lián)盟

2016 年，歐洲議會接受了 Web 可訪問性指令，這意味著所有歐盟成員國公共部門機(jī)構(gòu)管理的每個(gè)網(wǎng)站和移動應(yīng)用程序都必須對所有用戶完全可訪問。

什么是 Web 內(nèi)容可訪問性指南 (WCAG)？

Web 內(nèi)容可訪問性指南 (WCAG) 是由萬維網(wǎng)聯(lián)盟 (W3C)的 Web 可訪問性倡議 (WAI) 制定的建議，它提供了有關(guān)如何使具有不同殘疾的用戶更容易訪問 Web 內(nèi)容的指導(dǎo)。

WCAG 1.0

WCAG（1.0 版）于 1999 年首次出版，其中包含 14 項(xiàng)應(yīng)遵循的無障礙設(shè)計(jì)原則清單。它們已按優(yōu)先級劃分，并指出必須（優(yōu)先級 1）、應(yīng)該（優(yōu)先級 2）或可能（優(yōu)先級 3）實(shí)現(xiàn)哪些準(zhǔn)則。WCAG 1.0 中描述的原則與以下問題相關(guān)：

• 提供清晰的導(dǎo)航，
• 使用標(biāo)記和樣式表，
• 不僅僅依賴顏色，
• 提供信息以更好地定位，
• 使用 W3C 指南。

WCAG 2.0

WCAG 2.0 于 2008 年發(fā)布，包含的建議分為 4 個(gè)主要原則，表明每個(gè)網(wǎng)站都必須是：可感知的、可操作的、可理解的和健壯的。WCAG 2.0 描述了定期更新的技術(shù)，以幫助網(wǎng)頁設(shè)計(jì)師滿足所有標(biāo)準(zhǔn)以提供完全可訪問的設(shè)計(jì)。WCAG 2.0（就像 WCAG 1.0 一樣）使用一致性級別（A、AA、AAA）來表示滿足給定標(biāo)準(zhǔn)的義務(wù)。

根據(jù) WCAG 2.0，每個(gè)數(shù)字產(chǎn)品都應(yīng)該，例如：

• 包含所有非文本元素的替代文本，
• 提供從鍵盤訪問所有功能，
• 提供可讀和可理解的文本內(nèi)容，
• 確保每個(gè)頁面都可以以完全可預(yù)測的方式進(jìn)行操作，
• 確保用戶可以糾正他們的錯(cuò)誤，
• 給用戶足夠的時(shí)間閱讀文本內(nèi)容。

WCAG 2.1

WCAG 2.1 是 2018 年發(fā)布的 WCAG 2.0 的升級版本，擴(kuò)展了其他 17 項(xiàng)成功標(biāo)準(zhǔn)。WCAG 2.1 主要側(cè)重于提供指導(dǎo)，以使 3 類主要用戶更容易訪問數(shù)字產(chǎn)品：低視力、認(rèn)知障礙和使用手機(jī)的殘疾用戶。

如何讓您的網(wǎng)站更易于訪問？8 種行之有效的方法

1.對所有圖像使用替代文本

如果您已經(jīng)針對搜索引擎優(yōu)化了您的網(wǎng)站，您可能知道每張圖片都應(yīng)該有一個(gè)替代文本，其中包含最重要的關(guān)鍵字，但您應(yīng)該知道替代文本也可以用于其他目的。由于替代文本，所有使用屏幕閱讀器的視覺障礙用戶都可以訪問視覺信息。簡而言之，屏幕閱讀器會讀取添加到每個(gè)圖像的此屬性，從而允許殘疾用戶找出給定圖像包含的內(nèi)容。

向圖像添加替代文本很容易，您通常可以在 CMS 中完成。這是在 WordPress 中的實(shí)現(xiàn)方式：

在 WordPress 中添加替代文本

2. 為您的視頻內(nèi)容提供字幕

視頻是最受歡迎的內(nèi)容形式之一，這是肯定的。但您必須記住，不僅您網(wǎng)站上的文本或圖像必須可供所有用戶完全訪問，您為網(wǎng)站、博客或社交媒體渠道（如 Vimeo、YouTube 甚至 Instagram）創(chuàng)建的視頻也是如此故事。

為了讓每個(gè)用戶都能輕松訪問您視頻內(nèi)容中的所有信息，您必須提供字幕。它們應(yīng)該與內(nèi)容同步并在各種設(shè)備上可用：手機(jī)、臺式機(jī)和平板電腦。

YouTube 上的字幕

3.提供正確的標(biāo)題結(jié)構(gòu)

每個(gè)頁面的正確結(jié)構(gòu)對于使用屏幕閱讀器的用戶來說是一個(gè)巨大的幫助，因?yàn)樗鼓膬?nèi)容導(dǎo)航變得更加輕松和高效。因此，您應(yīng)該提供正確的標(biāo)題以使頁面結(jié)構(gòu)良好，以指示哪個(gè)部分是主要部分，哪個(gè)部分不太相關(guān)。這樣，屏幕閱讀器將更容易解讀您的內(nèi)容。

由于標(biāo)題定義了頁面的結(jié)構(gòu)，因此它們對于殘疾用戶極為重要。以下是您需要遵循的關(guān)鍵規(guī)則，以提供正確的標(biāo)題結(jié)構(gòu)以促進(jìn)輔助技術(shù)的導(dǎo)航：

• 永遠(yuǎn)不要跳過標(biāo)題——每一頁都必須有結(jié)構(gòu)良好的標(biāo)題，
• 每個(gè)頁面應(yīng)該有一個(gè) H1 標(biāo)題——一個(gè)頁面上的多個(gè) H1 標(biāo)題不受屏幕閱讀器的良好支持，并且可能會誤解內(nèi)容，
• 使用副標(biāo)題（從 H2 到 H6）來定義特定的部分。

4.使用對比色

在向您解釋在您的網(wǎng)站上選擇顏色時(shí)應(yīng)遵循哪些規(guī)則之前，我想向您展示具有不同色覺缺陷的人如何感知顏色 – protanomaly、deuteranomaly 和 tritanomaly。

Deuteranomaly – 對綠光的敏感性降低，這是最常見的色盲類型
Protanomaly – 對紅光的敏感性
降低 Protanomaly – 對藍(lán)光的敏感性降低

因此，如您所見，色盲的類型不止一種，在設(shè)計(jì)網(wǎng)站和選擇視覺布局時(shí)，您必須將它們?nèi)靠紤]在內(nèi)。請記住，顏色不僅僅用于視覺目的 – 它們應(yīng)該傳達(dá)信息或指示動作。為了讓不同類型色盲的用戶更容易訪問您的網(wǎng)站，請確保顏色不是呈現(xiàn)信息的唯一組成部分，還要使用形狀、圖標(biāo)、聲音和不同的大小。

WCAG 還指示文本和文本圖像之間的最小對比度，即 4.5:1。但是，此規(guī)則有 3 個(gè)例外：

• 大文本：大尺寸文本的最小對比度應(yīng)為 3:1；
• 附帶：純粹的裝飾元素，不提供任何重要內(nèi)容，沒有定義的最小對比度；
• 標(biāo)識：當(dāng)涉及到作為標(biāo)識的組成部分的文本時(shí)，沒有指定的最小對比度。

5. 讓每個(gè)表單都易于訪問

表單幾乎是每個(gè)網(wǎng)站不可或缺的一部分。也許您通常不會注意到它們的重要性，但即使在每個(gè)社交媒體平臺上您都需要填寫表格才能注冊，或者在在線商店中，您需要提供所有必要的信息才能完成交易。在您的網(wǎng)站上，您必須將所有表單設(shè)計(jì)為盡可能易于訪問。

如何做到這一點(diǎn)？

• 確保每個(gè)字段都正確標(biāo)記。
• 提供有關(guān)如何正確填寫表格中每個(gè)字段的信息和說明。
• 防止錯(cuò)誤：立即通知用戶他們的表單中出現(xiàn)了一些錯(cuò)誤，甚至在他們完成提交之前。
• 當(dāng)用戶正確填寫字段時(shí)通知用戶。
• 如果表單很長并且包含許多字段，請將其分成幾頁并告知用戶進(jìn)度。

視覺上的注冊表單

6.提供信息豐富的標(biāo)題標(biāo)簽

在搜索引擎優(yōu)化方面，標(biāo)題標(biāo)簽無疑是直接影響自然搜索結(jié)果排名的最重要元素。出于這個(gè)原因，許多人只是用關(guān)鍵字填充標(biāo)題標(biāo)簽，希望這樣他們會提高他們的位置。好吧，這種做法與可訪問性無關(guān)。您放置在 <title> 中的內(nèi)容是用戶在使用屏幕閱讀器時(shí)獲得的第一個(gè)信息，因此請盡可能使其易于訪問。

記得：

• 在標(biāo)題標(biāo)簽中包含有關(guān)頁面內(nèi)容和目的的最重要信息；
• 不要用關(guān)鍵字填充 <title> – 使標(biāo)題標(biāo)簽相關(guān)；
• 遵循最佳 SEO 實(shí)踐。

7. 使導(dǎo)航保持一致和直觀

上面我已經(jīng)描述了標(biāo)題以及它們?nèi)绾巫屇虢Y(jié)構(gòu)良好且正確的 Web 導(dǎo)航，但導(dǎo)航遠(yuǎn)不止這些。因此，如果您想設(shè)計(jì)可訪問的 Web 導(dǎo)航，請記住以下問題：

• 您網(wǎng)站中的每個(gè)頁面都應(yīng)具有相似的布局，因此請確保它們的構(gòu)建一致。
• 所有具有相似功能的視覺元素（例如箭頭、圖標(biāo)）都應(yīng)具有連貫的形式；通過這種方式，用戶將能夠輕松猜測給定符號的含義以及它的主要功能是什么。

• 為復(fù)雜和復(fù)雜的網(wǎng)站創(chuàng)建站點(diǎn)地圖——這樣，一些頁面和部分將更容易到達(dá)，并且用戶在瀏覽您的網(wǎng)站時(shí)不會迷路。
• 面包屑也可能是一個(gè)巨大的幫助——它們會向用戶指示他們是如何到達(dá)給定頁面的。如果您想了解有關(guān)面包屑及其在 SEO 中的重要性的更多信息，請查看我們博客上的條目，該條目將告訴您有關(guān)面包屑的所有信息。

8.啟用可調(diào)整大小的文本

所有使用不同類型設(shè)備或?yàn)g覽器的用戶都應(yīng)該能夠調(diào)整文本大小。此功能對于有視覺障礙的用戶非常有用。這就是為什么您應(yīng)該以這樣一種方式設(shè)計(jì)您的網(wǎng)站，以便可以調(diào)整文本大小而不是完全破壞您網(wǎng)站的布局。最好使用能夠縮放文本的相對大小。WCAG 指出，文本應(yīng)該可擴(kuò)展至 200%，而不會丟失其功能和相關(guān)內(nèi)容。

在文本間距方面，WCAG 準(zhǔn)備了一些您需要遵循的準(zhǔn)則：

• 段落之間的間距至少應(yīng)為字體大小的 2 倍；
• 行高至少應(yīng)為字體大小的 1.5 倍；
• 跟蹤（字母之間的間距）應(yīng)至少為字體大小的 0.12 倍；
• 字間距至少應(yīng)為字體大小的 0.16 倍。

如何檢查您的網(wǎng)站是否可訪問？

如果您想檢查您的網(wǎng)站是否完全可以訪問并滿足 WCAG 提供的所有要求，有幾種方法可以做到：

WAVE Web 可訪問性評估工具

這個(gè)由 WebAIM 開發(fā)并自 2001 年以來不斷更新的官方工具將向您顯示您網(wǎng)站上的所有可訪問性錯(cuò)誤。您也可以將其添加為 Chrome 或 Firefox 的擴(kuò)展。使用 WAVE，如果所有非文本元素都有替代文本，您將能夠檢查您的網(wǎng)站結(jié)構(gòu)是否正確，如果顏色對比度足夠，并識別缺少的表單標(biāo)簽或空按鈕和鏈接。

燈塔

這個(gè)由谷歌開發(fā)的 Chrome 和 Firefox 擴(kuò)展提供了您可以用來提高網(wǎng)站性能和質(zhì)量的所有信息。該工具會生成一份報(bào)告，其中包含 4 個(gè)類別的最終分?jǐn)?shù)：性能、可訪問性、最佳實(shí)踐和 SEO。

如果您想了解您的數(shù)字產(chǎn)品是否可訪問，只需轉(zhuǎn)到主要的可訪問性報(bào)告，您將在其中找到所有需要優(yōu)化或改進(jìn)的元素。

讓所有用戶都能訪問您的網(wǎng)站

在設(shè)計(jì)您的網(wǎng)站或移動應(yīng)用程序時(shí)，您絕對不應(yīng)該跳過或忽視可訪問性。全世界有數(shù)以百萬計(jì)的網(wǎng)絡(luò)用戶在與不同類型的殘疾作斗爭，他們不應(yīng)該被排除在使用數(shù)字產(chǎn)品之外。

如果您想了解 WCAG 提供的所有建議，請?jiān)L問 W3C 官方網(wǎng)站。您將在那里找到所有必要的信息！