什麼是包容性網頁設計？

網站可用性是一個廣義術語，描述了網站使用和交互的難易程度。 然而，在設計一個可用的網站時要記住的重要一點是，並非每個人都以相同的方式或在相同的情況下與網站互動。

如果你為“普通”或“理想”用戶設計一個網站，你最終可能會為其他人創建一個令人不快、困難或無法使用的界面。

萬維網聯盟和地方政府提供的指南幫助設計師縮小了可用性和可訪問性方面的差距。 但是，這並不一定會使網站具有完全包容性。

在接下來的文章中，我們將探討包容性設計的含義、它在網頁設計中的價值，以及在設計包容性界面和交互時需要考慮的因素。

了解如何設計 Web 可訪問性

什麼是包容性設計？

包容性網頁設計消除了網站的偏見和假設，這樣用戶就不會因為障礙、人口統計或其他臨時或永久情況而感到被排斥在外。

可訪問的網頁設計和用戶體驗設計都是包容性網站的關鍵組成部分。 無障礙設計是消除殘疾人和其他障礙人士進入障礙的過程。 UX 設計是一種數據驅動的設計方法，用於測試和驗證真實用戶如何與網站互動。

正因為如此，包容性設計有很多需要考慮的因素，因為嚴格來說並不是用戶的障礙會阻止他們充分使用網站或對網站感到滿意。 網頁設計師還可以通過為一組獨特的用戶設計體驗來遇到問題。

因此，網頁設計師需要考慮以下因素：

• 與視力、聽力或靈活性有關的身體損傷
• 影響認知或言語的精神障礙
• 阻止用戶充分參與產品的情境限制
• 硬件、互聯網連接和計算機素養等技術限制
• 語言和地理障礙
• 人口統計學差異，如年齡、種族和性別
• 社會經濟差異

底線：包容性設計最終轉化為通用設計。

網頁設計師可以使用各種工具來解決包容性設計的可訪問性方面。 例如，WordPress 可訪問性工具、Web 可訪問性檢查器、WAI-ARIA 指南等可以使可訪問性設計和實施更容易。

然而，對於包容性設計，它需要更深入地了解用戶在網絡上可能面臨的限制。 沒有一種工具可以掃描您的網站並確認您已經創造了最多樣化和最公平的體驗。 這是您必須學習如何實施和自行檢查的東西。

為什麼包容性網頁設計很重要

網頁設計師需要將可訪問性和包容性納入他們構建的每個網站的原因有很多。 讓我們先看看一個不包容的網站是如何傷害每個人的：

非包容性的缺點

2021 年，WebAIM 發布了屏幕閱讀器用戶調查 #9 的結果。 7.7% 的調查受訪者表示，他們在上網時必須使用屏幕閱讀器。

當被問及他們對當今互聯網可訪問性狀態的看法時，只有 39.3% 的人表示它比往年更容易訪問。 42.3% 的人認為沒有任何改變，而 18.5% 的人表示情況更糟。

根據 CivicActions 的 Mike Gifford 的說法，可能有超過 7.7% 的人口經歷過交通不便並有以下感受：

“殘疾和人們克服障礙的方法的組合極其多樣化。 從道德上講，必須優先考慮為我們最不利的用戶進行構建。 不幸的是，由於我們不斷追求新的和華麗的東西，我們經常將 10-20% 的同胞排除在外。”

根據美國律師協會的數據，在 2017 年至 2020 年期間，有 8,000 起美國殘疾人法案第 III 條訴訟向聯邦法院提起。根據 Accessibility.com 的數據，僅在 2021 年，這一數字就增長了 14.3%，達到 2,352 起訴訟。

有些人可能會覺得被網站排除在外，但沒有法律追索權。 例如，世界數據實驗室說有 11 億互聯網窮人。 在某些情況下，這意味著他們負擔不起移動數據計劃。 在其他情況下，他們可以，但他們沒有足夠的數據來使用，所以他們不能花時間在資源密集的網站上。

還需要考慮老年人口。 皮尤研究中心發現，近年來使用互聯網的老年人數量有所增加。 也就是說，TechCrunch 報告稱，大約 50% 的老年人需要有人幫助他們設置和使用新的數字技術。 此外，舊金山市 40% 的老年人是數字文盲——就在矽谷旁邊，所有地方。

即使您的網站沒有受到訴訟，請考慮由於非包容性設計而失去 20% 或更多的訪問者會對品牌的長期生存能力產生什麼影響。 有很大一部分觀眾會因為網站不受歡迎或不可用而消失。

包容性的好處

當您設計一個具有包容性的網站時，您的設計是為了讓每個想要參與的人都可以充分參與其中而不會感到被排斥。 當互聯網成為一個包容的地方時，每個人都會贏：

包容性的網頁設計可以帶來更好的產品設計。

從網站到移動應用程序以及介於兩者之間的一切，包容性設計迫使設計師回歸良好、實用和善解人意的設計的基礎。

品牌可以接觸到更多的受眾。

一個優先考慮為每個人而不僅僅是理想用戶的普遍積極體驗的品牌將吸引更忠誠的用戶群，他們也重視包容性和公平性。

用戶感覺更好地與包容性網站互動。

人們在屏幕前花費的時間如此之多，以至於腕管綜合症、計算機視覺綜合症和網絡成癮症等問題如今都非常普遍。 包容、合乎道德的設計可以幫助用戶在思想和身體上都感覺更好。

包容性網頁設計有助於網站在搜索結果中排名更高。

谷歌幾年前更新了它的搜索算法，命名了創造最佳頁面體驗的四個關鍵因素：性能（速度）可訪問性、最佳實踐（設計和代碼）和搜索引擎優化（例如替代文本）。 包容性設計對這些都有貢獻。

如何創建包容性網頁設計角色

通常，設計師會在網站項目開始時提出虛構的角色。 這有助於他們可視化並與他們正在為其構建網站的最終用戶建立聯繫。 它還可以幫助他們了解特定用戶將如何與網站互動。

當您在網頁設計過程中包含包容性時，您的用戶角色描述將需要進行一些調整。 典型的用戶角色分解如下：

• 姓名
• 人口統計（例如年齡、性別、職業等）
• 性格
• 嗓音
• 目標
• 動機
• 挫折
• 恐懼

包容性用戶角色還需要包括：

能力：這是包容性的可訪問性組件。 您必須預測您的一些用戶在使用和參與網站的方式方面可能會受到怎樣的限制——身體上和認知上。

能力：如果您查看有關在線用戶數量的數據，您會發現您的一些用戶可能沒有數字素養。 偏離基本結構和佈局並且沒有提供足夠的上下文（如聯繫表單中的標籤）可能會損害這些用戶的體驗。

態度：這是指可能將網站視為不安全環境的用戶。 無論他們是過度關注自己的隱私還是擔心遇到惡意軟件，這些類型的恐懼都應該通過可識別且值得信賴的安全和隱私功能來解決。

訪問：用戶不必為了有限的訪問網絡而上網。 例如，據聯合國教科文組織稱，世界上超過一半的人口在家中可以上網。 這並不意味著他們不能上網，只是意味著他們必須找到其他方式來上網——比如去圖書館或網吧。 因此，連接性、硬件、軟件甚至位置都會影響訪問。

本地化：假設每個用戶都生活在同一個國家，來自同一個文化，說同一種語言是絕對不安全的。 因此，在創建包容性用戶角色時必須解決這些差異。

包容性設計的 7 條原則

為了讓包容性設計發揮作用，網頁設計師必須消除假設、先入為主的觀念，以及將普通用戶的利益置於所有用戶的利益之上。 要成功做到這一點，設計師必須遵循以下原則：

1. 靈活性

沒有一種尺寸適合所有網頁設計。 這並不意味著您必須為不同的用戶構建不同的網站或登錄頁面。 但是，當您認為它們將有助於縮小不同用戶體驗之間的差距時，這確實意味著向 UI 添加額外的功能。

例如，最好在嵌入文件下方包含視頻腳本。 這樣，不能或不想听到或觀看視頻的用戶可以閱讀文本。

2.簡單

極簡主義是一種持久的網頁設計趨勢，並且有充分的理由。 這不僅僅是因為它創建了更視覺上令人愉悅的界面，還因為極簡主義和簡單性為更直觀的設計鋪平了道路。

解決此問題的最佳方法是將網站視為最小可行產品 (MVP)。 構建使其成為可用且有價值的產品的核心功能。 然後，只在需要的地方添加額外的元素，並為每個人的體驗帶來價值。

3. 一致性

一致性並不意味著網站必須變得可預測或無聊。 在保持一致性的同時，您仍然可以發揮創造力。

每個人都受益於設計的一致性。 它消除了在同一網站上以不同方式呈現的相同元素或功能所造成的挫敗感和困惑。 此外，與大多數 Web 處理核心元素（如網站導航）的方式保持一致，可以提高網站的可用性並加快轉換時間。

4. 感知

除了考慮人們如何與網站互動外，設計師還必須考慮他們更喜歡如何與網站互動。 例如，一個以圖像為主的網站對於不是視覺學習者的用戶來說可能很難消化內容。

當您將網站的內容整合在一起時，請確保它們的健康組合。 如果只有一種類型的內容（如所有文本而沒有圖像），那麼您的一些訪問者可能在理解或易用性方面處於劣勢。

5. 股權

網頁設計中的公平是指公平的結果。 換句話說，無論訪客是誰，每個訪客都應該能夠輕鬆完成任務。

這就是用戶體驗設計過程派上用場的地方。 將第一手的用戶輸入納入用戶的目標以及完成目標所需的內容有助於設計師為每個人創建無摩擦的交互和用戶旅程。

例如，考慮一個像圖像滑塊這樣的 UI 組件。 設計它的包容性方法是禁用自動滑動功能。 然後，包括滑動和單擊功能，以便每個用戶都可以控制滑塊及其速度。

6.預防

包容性設計將減少人為錯誤。 這意味著設計一個 UI 以防止盡可能多的錯誤，同時對確實發生的錯誤提供寬容和有用的響應。 通過減少與犯錯相關的挫敗感或羞恥感，包容性設計更有助於建立與訪客的信任。

這一特定原則最常在參與時發揮作用。 例如，按鈕的設計應始終確保它們足夠大，可以看到和點擊。

聯繫表格中的錯誤消息是另一個很好的例子。 通過以每個人都可以閱讀的顏色和大小顯示內聯錯誤消息，您將減少重複錯誤的可能性。 您還將擁有一個聯繫表格，它比提供模糊錯誤消息或在流程中出現得太晚的表格更有幫助。

7. 住宿

網站像實體企業一樣受到可訪問性訴訟的原因之一是因為它們被視為“公共場所”。 除了確保每個人都可以閱讀、瀏覽和參與網站之外，包容性設計還保證了訪問者一定的舒適度。

舒適對許多人來說意味著很多東西——充足的空間、可預測的佈局等。包容性設計還要求設計師考慮他們的用戶對網站內容的舒適程度。

例如，使用反映目標受眾的多樣化圖像將創造一個比用戶一次又一次看到的通用庫存圖像更受歡迎的環境。 使用直截了當的文案而不是只有一部分觀眾才能理解的充滿行話的文案也可以這樣說。

結論

包容性網頁設計是一個包羅萬象的術語，包括用戶體驗設計、可訪問設計和響應式設計等學科。 但是，包容性設計更進一步，以確保最終結果是一個普遍可用且廣受好評的網站。

這種網頁設計方法需要對不同的人在使用網站時所面臨的挑戰有深刻的理解，這不僅僅是障礙或殘疾。

將包容性整合到您的網頁設計過程中的最佳方法是首先確保您使用的工具可以幫助您實現它——比如 WordPress 和 Elementor 的輔助功能。 然後，使用能力、資質和訪問權限等包容性因素更新您的用戶角色模板。 最後，當您了解更多有關用戶體驗以及他們在使用網絡時面臨的常見挑戰時，請及時更新您的流程。