在這段視頻中，來自 WebFX Interactive 團隊的 Jaci 解釋瞭如何開始使用無障礙網頁設計。

成績單：

如果您真的很高興查看一個網站，但是當您訪問該網站時，您無法訪問其任何內容，您會有什麼感覺？ 我個人會感到沮喪，我想你也會。

如果您不使用可訪問的網頁設計，這就是您為美國四分之一的殘疾成年人創建的場景。大約有 6100 萬人無法平等地訪問您的網站。

如果您以前從未這樣做過，遵循網頁設計可訪問性指南並不容易，但我將概述一些您可以開始做的事情。

如果您想跳到此視頻的不同部分，請使用視頻說明中的時間戳。 現在，我將深入了解網站可訪問性的概述。

什麼是網站可訪問性？

網站可訪問性意味著您的網站的設計目的是讓殘疾人可以使用它。 無障礙設計的目標是消除技術障礙，以便任何人都可以與您的內容進行交互。

根據萬維網聯盟（也稱為 W3C）的說法，一個可訪問的網站適用於有聽覺、認知、神經、身體、語言和視覺障礙的人。

如果您不確定從哪裡開始，請不要擔心。 W3C 的文檔告訴您您的網站應包含哪些內容才能滿足其標準。

本文檔包括：

• 創作工具可訪問性指南 (ATAG)
• Web 內容可訪問性指南 (WCAG)
• 用戶代理可訪問性指南 (UAAG)

ATAG 專注於人們用來創建 Internet 內容的工具，UAAG 著眼於呈現 Web 內容的工具的可訪問性。

在本視頻中，我將重點關注WCAG ，它是使每個人都可以訪問網站內容的指南。

使用 WCAG，您可以獲得三個不同級別的合規性：A、AA 和 AAA。 當您從 A 到 AA 再到 AAA 時，您會遵循WCAG 制定的更多標準，並使更多人可以訪問您的網站。

那麼，你怎麼知道你是否有一個可訪問的網站？ 做審計！

如何審核您的網站可訪問性

您不必自己進行審核。 如果您希望將審計外包，請與可以分析您的網站並為您進行任何必要調整的顧問團隊聯繫。

現在，如果您更願意在內部處理事情，那麼您有很多選擇。 您可以手動梳理您的網站頁面以查找問題，但這可能會佔用您很多時間。

您可能想使用一些工具來幫助您。 將您的 URL 插入WAVE 等可訪問性檢查器，以查看您需要在一個頁面上更新的內容。 您還可以使用批量可訪問性檢查器一次分析多個頁面。

W3C 網站上有大量可訪問性工具，因此您不必自己做所有事情。

我們還為您的可訪問性和一些可訪問的設計示例列出了五個重要元素 - 我將在接下來討論這些 - 所以請堅持我。

5 個網頁設計可訪問性指南

請記住，這些是 WCAG 指南的簡短摘要。 我鼓勵您使用 W3C 的快速參考指南來學習更深入的可訪問設計技術。

1. 確保文本可讀

任何傳達重要信息的常規大小的文本都需要易於閱讀。

對比度在其中起著重要作用。 就目前而言，大文本（如主要標題）需要 3:1 的文本與背景對比度。 常規（或更小）文本（例如構成內容主體的文本）需要 4.5:1 的對比度。

對比度太低的一個例子看起來像淺綠色文本在稍深的綠色背景上。 將文本更改為黑色或白色，您的網站上就會有更多的對比。

用戶還應該能夠以不影響您網站功能或導致他們錯過內容的方式放大文本。

2.優化圖片可看可讀

向圖像添加替代文本不僅僅是一種常見的 SEO 做法。 它可以幫助看不到圖像的人了解其中的內容。

替代文字是一段文字，可以清楚地解釋圖像中發生的事情。 替代文字正好適合您的圖像的嵌入代碼。 正如您在 Mashable 的這個示例中看到的那樣，頁面有圖像，當您翻到事物的代碼方面時，您會看到 alt 文本。

3. 為您的觀眾提供更多理解視頻的方式

如果您以前從未在視頻中添加過字幕，那麼現在是時候開始了。 不要只依賴 YouTube 或其他託管服務提供商自動生成的內容。

如果您有時間和耐心，請查看自動生成的字幕並進行編輯。 來自人工智能的它們不會是完美的。

您還可以使用 Rev 之類的工具訂購字幕，然後將它們添加到您的視頻中。

在您的視頻中包含成績單使它們更易於訪問。 如果您已經編寫了腳本，那麼您已經準備好了成績單！

音頻描述增加了另一層可訪問性。 這些是單獨的音軌，描述了對話間隙之間視頻中正在發生的事情。

因此，如果您有兩個人談論他們最近的購物之旅，然後視頻切換到一個人試穿衣服的一些鏡頭，音頻描述將解釋視頻中發生的事情。 可能是這樣的：一個女人站在鏡子前，將兩條圍巾披在肩上。

像 Wistia 這樣的託管平台允許您上傳音頻描述（甚至在您上傳視頻時有一個視頻可訪問性清單）。

4.將您的網站設計為鼠標和鍵盤友好

不是每個人都使用鼠標來瀏覽 Internet。 您的網站應該反映這一點。

這不僅意味著您必須確保有人可以通過鍵盤與您的網站進行交互，而且還要求您有明顯的方式來突出您網站的哪些部分是焦點。

查看另一個可訪問的設計示例，您會看到當我單擊 Keds 網站上的搜索欄時，會出現經典的閃爍線，讓我知道我可以打字。 單擊時，搜索欄也會變得更加突出。

為滿足 WCAG 指南，此功能應在使用鍵盤時發生。

5. 讓您的網站導航易於理解

這個提示超越了可訪問性。 使您的網站導航簡單明了通常是一件好事。

編寫具有明確目的的頁面標題和標題。 使用鏈接錨文本，可以輕鬆理解您鏈接到的內容中的內容。

同樣，使用焦點指示器，以便人們知道他們在頁面上的位置。 提供不止一種方式來訪問網頁，例如通過站點地圖、主導航或目錄。

我怎麼能跳過這個？ 有一致的導航。 這意味著如果你有一個主導航標題，當用戶從一個頁面跳到另一個頁面時，它真的不應該改變。

在這個以 At Home 網站為特色的示例中，雖然我從一個頁面單擊到下一個頁面，但頁面頂部的導航並沒有改變。

正如我之前所說，這絕對不是遵循網頁設計可訪問性指南需要做什麼的完整列表。 這些指南也可能會發生變化，因此請在您準備好評估您的可訪問性時進行研究。

要繼續了解不同的網頁設計和數字營銷主題，請訂閱我們的YouTube 頻道和我們的電子郵件通訊，收入周刊。 你不會失望的。

謝謝你加入我！

加入從 WebFX 視頻中獲取營銷知識的 5,000 名營銷人員。

現在訂閱