出色的設計如何影響網站可訪問性

已發表: 2021-07-19

您是否正在尋找可訪問性這一廣泛學科的起點？我們將深入研究您可以在設計過程中實施的實際實踐和工具，以通過讓更多用戶包容您的數字產品來改進您的數字產品。

什麼是可訪問性？

可訪問的網站使更多類型的用戶能夠以順暢的方式與您網站上的內容互動。無論我們是從 UI 還是 UX 的角度來探討這個主題，重點都是創建適合不同受眾的優質產品。

這種多樣化的受眾“擴展到任何正在經歷任何永久性、暫時性或情境性殘疾的人，例如，只有一隻手臂是永久性的，手臂受傷是暫時的，並且一隻手臂抱著嬰兒是情境性的——在每種情況下，用戶只用一隻手就能完成任務。” （阿維納什考爾，2018 年）。

作為設計師，我們有責任確保我們以所有用戶都可以訪問的方式進行設計，而不管他們的情況、能力或背景如何。因此，網絡可以成為包容所有人的空間，無論他們是否有認知障礙、視力障礙或身體障礙。

創建一個可訪問的網站不需要大量的預算或更改。由於它不需要額外的功能或內容，因此可以通過設計項目開始時的教育和意識來實現可訪問性。

這對商業來說也很重要：研究表明，可訪問的網站有更好的搜索結果，它們可以覆蓋更多的受眾，它們對 SEO 友好，下載時間更快，鼓勵良好的編碼實踐，並且它們總是具有更好的可用性。

您需要進行某些調整併遵循一個框架，以確保您針對不同的能力、年齡和設備經驗水平進行設計。

可訪問性是一個獨立的學科，它不斷發展以適應數字產品。但同樣，軟件解決方案也在增長。這意味著我們無法涵蓋主題中的所有內容，但如果您覺得本文有用，我們可以做第 2 部分！

我們將深入探討 5 個主要領域：

確保文本和背景之間有足夠的顏色對比可以幫助視力不佳的用戶。這會影響比預期更多的用戶，並且經常被視為一個問題而被忽略。然而，多達 12 名男性中有 1 名是色盲，而其他許多人則是弱視或失明。

首先，可訪問性指南規定顏色永遠不應是傳達信息的唯一方式。換句話說，對於那些以不同方式感知顏色並可能錯過我們基於顏色的說明的用戶，必須有額外的提示。

為了在文本和背景之間保持適當的對比度，最好的比例至少為 4.5 比 1。這可以讓視力低下或色盲的用戶清楚地區分兩者。

對比度檢查器

4.5 比 1 的對比度符合一致性級別 AA（三個級別中的：A、AA 和 AAA），但這會根據字體大小和您希望達到的一致性級別而變化。如果類型為 18 pt（或 14 pt 粗體），較大的字體需要較小的對比度，僅為 3 比 1。

這些最小比率不適用於徽標或品牌名稱中的文本，但使用此方便的工具自行檢查對比度很有用。

對於使用屏幕閱讀器訪問網絡的用戶，顯示的內容並不總是正確傳達。替代 (alt) 文本是屏幕閱讀器用來通知用戶頁面上有哪些圖像的內容。

這可以通過將替代文本轉換為盲文、音頻描述或視覺閱讀文本來完成。這意味著為那些看不到它的人準確描述圖像中發生的事情很重要。

有時可能沒有必要添加替代文本。例如，圖像周圍可能有足夠的上下文指示符，或者圖像除了審美之外沒有其他功能。

筆記本電腦的高級女士

您很可能在不知不覺中就已經熟悉了焦點指標。焦點狀態是（通常）在選擇元素時出現的藍色輪廓，例如鍊接、菜單、按鈕和表單域。

這些表示用戶在使用鍵盤時當前關注的是哪個元素。通常，這些指標被視為不雅觀或好像它們沒有任何用途，但它們實際上非常重要。許多用戶僅限於使用鍵盤，而使用屏幕閱讀器的視障人士也需要焦點指示器來幫助進行頁面導航。

焦點指示器是一種簡單的方法，可以讓您的頁面導航清晰易懂，而且只需很少的努力，但對用戶來說卻有很大的不同。它們可以使用適當的顏色無縫地與品牌聯繫起來，它們只需要形成對比，以便元素脫穎而出。

形式

表單對任何人來說都可能很複雜，但是當表單過於簡約和不清楚時，那些有額外可訪問性問題的人通常會遇到困難。下面列出了一些需要解決的常見問題，以解決可訪問性問題：

當信息不雜亂且在一個空間中太多時，信息更容易消化。這也適用於可訪問的網站。如前所述，字體大小可以改變對比度的最低要求，但字體大小不應低於 10 pt。

如您所見，閱讀 9 pt 具有挑戰性。

增加兩行文本和單個單詞之間的空白量可以幫助視力受損或有閱讀障礙的用戶。以下最小間距可確保滿足這些用戶的要求：

令人驚訝的是，這些小的變化可以對可訪問性產生很大的影響。它不需要大量預算和大量時間來使您的網站符合 Web 內容可訪問性指南，但它可以極大地改變用戶的體驗，從而也促進您的業務。

將這些建議添加到您的設計過程中可以成為第二天性，為未來更易於訪問的網站鋪平道路——這取決於我們作為設計師。

如果您在創意方面需要幫助，請隨時與我們聯繫。