指導包容性網頁設計的 10 條核心原則

研究表明，大約 70% 的網站在使用輔助技術時至少部分無法閱讀。

這個統計數字聽起來令人震驚。 這麼多品牌怎麼會放棄對數百萬殘疾互聯網用戶的明顯考慮？

不幸的是，當我們考慮到殘疾人在社會和企業中被隱形的頻率時，它開始變得更有意義。

Web 內容可訪問性指南 (WCAG) 定義了網站如何提高其可訪問性，從而提高其包容性。

其中許多準則已載入法律，因此如果您的網站無法訪問，您的企業可能會面臨風險。

包容性對您的業務和客戶的好處是巨大的。

可訪問性將為您提供更大的受眾份額，但這也是建立客戶信任的關鍵。

所有客戶，無論是否殘疾，都將受益於更流暢的網站體驗。 他們會欣賞關心這種體驗的企業。

包容性意味著考慮客戶的需求範圍，以及如何限制他們對您的服務的訪問。 成功實施輔助功能將幫助您克服這些限制。

雖然本文側重於網站設計，但請記住，一個關鍵的可訪問性問題是缺乏互聯網訪問，因此您應該尋求提高所有領域的可用性。

電話技術，例如撥入電話會議選項，可以幫助您與所有客戶保持遠程聯繫。

現在，讓我們繼續學習指導包容性網頁設計的十項核心原則。

包容性設計指南

1. 靈活

“殘疾”一詞涵蓋了廣泛的人類經歷和需求。 在考慮如何使您的網站具有可訪問性和包容性時，這可能令人生畏。

但是，請記住，您的所有客戶，無論是否殘障，來到您的企業時都有截然不同的需求和偏好。

誠然，您無法取悅所有人，但您可以提供靈活的體驗來吸引盡可能多的客戶。

考慮用戶訪問您網站的上下文。 例如，他們使用什麼類型的設備？ 他們更有可能在工作場所還是在家中使用您的服務？

分析您的客戶以確定他們的人口統計數據，例如年齡和性別。 這是了解適合您企業的最佳電子商務平台或頁面設計的關鍵之一。

滿足現有客戶和吸引新客戶的最佳選擇是靈活性。

提供各種在線和離線聯繫方式。 聯繫您的企業和使用您的服務應該是順暢無痛的。 這將使您的所有客戶受益，而不僅僅是那些有額外需求的客戶。

2. 避免壓倒客戶

雖然一定程度的移動內容可以幫助您的網站流行起來，但過多會引起焦慮和壓力。 對於有心理健康需求（例如焦慮、自閉症或多動症）的用戶，這些問題尤其重要。

WCAG 對移動內容有明確的指導方針。 移動內容（即 GIF、滾動和自動更新新聞提要等）必須具有暫停機制，如果它們自動啟動、持續時間超過 5 秒並且與其他內容平行。

根據您的受眾，您可能需要考慮完全放棄自動播放內容。 想想您可能不習慣使用 Web 服務的老客戶。

太多動人的、對時間敏感的信息是令人反感和壓倒性的。

如今，許多網站在您進入網站後都會立即彈出實時聊天窗口。 這有其作為易於訪問的聯繫工具的好處。 但是，如果每次使用該網站時都會立即出現一條消息，這可能會令人惱火。

您可以在不顯眼的位置使用可折疊的、帶路標的實時聊天選項，而不是彈出窗口。 客戶一到就強行與他們聯繫可能會非常有壓力。

這也應適用於貴公司對短信應用程序的使用。 不要用通知淹沒您的客戶。

3. 使用清晰的排版

WCAG 明確了排版要求：

• 保持文本左對齊或右對齊（不對齊）
• 行距和段落間距應至少為 1.5 倍
• 最大段落寬度為 80 個字符

您應該始終遵守這些準則，但您可以走得更遠，讓更多的客戶受益。

使用清晰、無襯線字體、大小合適且與背景顏色形成對比的字體。 語言應該簡單直接，不要光顧您的客戶。

利用您的客戶研究來確定客戶對您網站的期望。

另一個重要的問題是圖像中的文本。 應盡可能避免這種情況。

盲人和視障用戶經常使用屏幕閱讀器軟件。 這些程序會大聲朗讀屏幕上的文本，但無法解碼圖像。

因此，如果文本“隱藏”在圖像中，您的客戶可能會錯過重要信息。 重要的是，您的視障客戶不會覺得他們對您網站的訪問受到限制。

4. 使圖像可訪問

當然，圖像對於良好的網頁設計仍然必不可少。 而且，相反，它們可以提高其他客戶的可訪問性。

對於有閱讀障礙（例如閱讀障礙）的人，相關圖像可以提高文本理解能力。 幾乎可以肯定，您網站的某些區域（例如產品頁面）需要圖像。

您仍然可以讓屏幕閱讀器用戶訪問圖像。 您網站上的每張圖片都應包含替換文字。 這是當您將光標懸停在圖像上時出現的文本。

它也由屏幕閱讀器讀出，不能顯示圖像本身。 好的替代文字清晰準確地描述了顯示的圖像。

使用 HTML 將替代文本分層到您的網站中很容易。 包含替代文本不會干擾其他用戶，並且將極大地有益於使用屏幕閱讀器的用戶。 替代文本和可訪問的圖像也有利於您的搜索引擎排名。

除了替代文本之外，重要的是圖像本身的呈現方式易於訪問。 出於 WCAG 的目的，顏色對比度被測量為一個比率。 有許多應用程序和瀏覽器擴展可以用來衡量這個比率。

雖然用於裝飾的附帶圖像沒有對比度要求，但背景上的文本應具有 4.5:1 的對比度。 圖表等圖形項目和可點擊圖標等 UI 元素的要求為 3:1。

最後，幾乎每 20 人中就有 1 人是色盲。 考慮哪些顏色組合可能對這些用戶有問題。

有許多不同類型的色盲。 應用程序可用於模擬您的網站對色盲用戶的顯示方式。 更好的是，與色盲或其他視覺障礙的人聯繫，以了解您的網站的可用性。

5. 確保觸摸屏無障礙

很容易陷入認為您的桌面站點是“默認”站點的陷阱。 由於其便利性，智能手機和平板電腦的使用在所有用戶中繼續增加。 這些設備通常也比筆記本電腦或台式機更實惠。

考慮您的網站對低收入用戶的可訪問性，並註意您的移動網站。

點擊和滑動應該是簡單和直觀的。 鏈接的目的應該很明確，並且應該盡量減少誤用。

請記住，手指比光標大得多，並且會遮擋用戶的屏幕視圖。 您可以使用大小合適、間距適當的按鈕來實現這一點。 WCAG 要求按鈕大小為 44 x 44 像素。

通過您的觸摸屏優化考慮客戶的實際需求。 殘疾可能意味著客戶的身體靈活性或耐力有限，因此請避免擴展或過於復雜的觸摸要求。

“捏”手勢，通常需要縮放或旋轉，即使對於身體健全的用戶來說也很費力。 相反，您可能想要一個可點擊的縮放按鈕，這是您關心客戶舒適度的一個很好的標誌。

6. 確保用戶輸入簡單

這與觸摸屏可訪問性領域密切相關。

您網站上的表單（用於下訂單、聯繫、設置帳戶等）對於您的客戶來說應該是輕而易舉的。 確保所有框都清楚地標有所需的輸入。

您還可以在框中放置佔位符以舉例說明客戶應該輸入的內容。 例如，佔位符電子郵件地址，如 [email protected]

即使是最易於使用的設計，也總是存在人為錯誤的空間。 重要的是您的網站能夠容忍輸入錯誤。 不要讓您的客戶因錯誤而感到愚蠢，並讓這些錯誤易於修復。

最好的方法是實時突出顯示錯誤，這樣客戶就不必翻閱長表格。 不要僅僅依靠顏色來顯示錯誤； 視障用戶可能無法訪問此功能。

使錯誤消息清晰而不是神秘，並在提交之前為客戶提供最後檢查的選項。

容錯不僅可以提高網站的可訪問性。 它還讓客戶在與您打交道的每一步都感受到支持。

使表單直觀且具有包容性是您與客戶建立信任的眾多方式之一，它表明您關心他們的體驗。

7. 以信息簡單為目標

傳輸信息顯然有利於使用您網站的每個人。 它可以幫助那些有學習或閱讀障礙的人、視障用戶、非殘疾用戶和您自己的員工。

通過減少澄清查詢的數量，您網站上的清晰信息將減輕您的客戶服務團隊的壓力。

段落應保持簡短，詞彙不應比需要的更複雜。 不要迴避使用您的客戶會理解的行業特定術語，但您的網站不是展示 SAT 詞彙的地方。

盡可能消除歧義。 您的確切含義應始終明確，並且您網站上的鏈接功能應準確標記。

以最小的設計為目標，強調對您的客戶來說最重要的東西。

8. 保持一致性

對於一些殘疾客戶來說，變化可能會令人不快。 雖然隨著品牌的發展更新您的網站是可以的，但頻繁的不必要的更改可能會讓任何客戶望而卻步。

當您的品牌標識似乎在不斷變化時，您的客戶就不太可能信任您。

在客戶服務方面也應該保持一致性。

軟件定義網絡等解決方案可以幫助您維護有凝聚力的服務。 保持友好、開放的語氣，以確保您的所有客戶都感到受到支持。

一些客戶可能需要更頻繁地重複信息。 您的 CS 團隊應該為此做好準備，但也值得考慮使信息更易於訪問。

輔助功能（例如顏色對比和替換文字）應在網站的每個區域保持一致。

向殘疾用戶提供完全不同版本的網站可能很誘人。 然而，這可能是另一種情況，讓這些客戶覺得他們是一個負擔。 相反，為了所有客戶的利益，從頭開始將可訪問性集成到您的網站中。

9. 保持網站順暢

另一個可訪問性問題是，並非每個人都可以訪問快速互聯網或強大的硬件。

農村地區、發展中國家或低收入客戶的客戶可能在訪問您的網站時遇到問題。

設計您的網站，以便用戶可以選擇是否查看消耗數據的內容，例如視頻。 有很多方法可以減少您網站上的延遲以使這些客戶受益。

再次考慮客戶如何訪問您的網站。

想想他們使用的是什麼設備，以及他們所在的地理區域。無論客戶如何查看您的網站，他們都應該享受輕鬆的體驗。 您不希望您的客戶覺得使用您的網站是一項繁瑣的任務。

確保緊密、高質量的編碼，以減少令人沮喪的錯誤。 嘗試減少客戶在執行任務時必須點擊的頁面數量。

將表格保持在盡可能少的頁面。 沒有人喜歡每隔幾秒鐘就等待加載新頁面，尤其是在他們的連接很差的情況下。

10. 在網站設計中創建視覺層次結構

許多最佳網站設計的一個共同點是清晰的視覺層次結構。 這意味著導航很容易，而且很明顯用戶應該為不同的任務採取哪些步驟。

您可以分析客戶對您網站的使用情況，並將最常用的功能放在首位。 避免“平鋪”，因為這很容易讓人不知所措，而且不是特別清楚。

您可以將相關功能與統一的設計選擇（如顏色和形狀）組合在一起。 但是，您不應只依賴這些功能。 正如所討論的，它們可能無法訪問。 出於屏幕閱讀器的目的，也可以使用文本。

視覺層次結構的目的是讓您的客戶更快、更輕鬆地使用和瀏覽您的網站。

使用您的設計選擇將客戶引導至您網站的相關部分。 了解客戶的需求，並強調對他們來說最重要的事情

關於包容性的最後一句話

最終，可訪問性和包容性背後的理念是殘疾用戶與任何其他用戶一樣有價值。 這似乎很明顯，但數量驚人的品牌未能在其網站設計中將其付諸實踐。

加倍努力以確保您的所有客戶都有良好的體驗，這將在您的基地中建立信任和忠誠度。 您的客戶會更快樂，您將成為真正關心您的企業。

作者簡介

John Allen 是 RingCentral 的全球 SEO 總監，RingCentral 是全球 UCaaS、VoIP 和自動撥號軟件提供商。 他在構建和優化數字營銷計劃方面擁有超過 14 年的經驗和廣泛的背景。 他曾為 Vault 和 3DCart 等網站撰稿。