無障礙網頁 101:為所有人設計

已發表: 2022-01-10

網頁設計是關於可訪問性的。 大多數網頁設計師的目標是為他們的觀眾中最多的人創造產品,將他們的設計像張開的網一樣投射出來,為他們帶來最大的用戶湧入。

雖然該設計原則有邏輯,但它掩蓋了一個更簡單、更具包容性的原則:為所有人設計,而不是為大多數人設計。

優化內容,讓每個可能的用戶都能享受您的網站並與之互動,並訪問可用的信息和數據。 參與這種做法將有助於開發更廣闊的市場並使您的客戶群多樣化。 世界上 15% 的人口有一定程度的殘疾。

這些人與其他所有人一樣,經常使用互聯網並嚴重依賴數字通信和工具。 優化您的網站以確保用戶可以享受出色的體驗可以擴展您的互動網絡。 通過在您的設計中練習包容性,您將能夠接觸到數百萬經常被忽視的人。

無障礙設計並不難。 它只需要簡單並考慮到所有潛在用戶。 以下是如何優化您的網站以獲得最大的可訪問性。

了解您的用戶

了解您的受眾在任何項目中都至關重要,因此這是最好的起點。 了解您的用戶可以包括具有不同能力的個人。 您的一些用戶可能有聽力或視力障礙,其他用戶可能患有癲癇症,其他用戶可能仍有行動不便。

雖然您無法針對所有可能的場景進行設計,但如果您花時間盡可能多地思考,您將拓寬您的設計視野。 在您考慮了擴大的受眾群體之後,請進行一些研究。 閱讀案例研究,與有經驗的朋友交談,查閱無障礙指南。

也許嘗試從教育領域學習,通用設計原則是一個很好的參考。

想想用戶體驗

既然您已經與未來的用戶建立了理解,請將這種理解放入您的用戶體驗 (UX) 框架中。 此步驟將幫助您同情您的用戶並考慮您以前可能沒有想到的事情。 它還將為您指明各種輔助技術定義的方向。

正如設計師應該考慮每個主要瀏覽器中網站的行為一樣,輔助技術應該是功能清單的一部分。 有時,即使是網頁設計中最小的變化也可以為殘疾用戶打開新的大門。

一個簡單的改變

例如,可能最容易實現的更改是如何使用強調標籤。

在視覺上, <b><strong>之間沒有區別, <i>看起來也與<em>沒有任何不同。 但是對於殘疾人來說,這些標籤可以極大地改變他們的用戶體驗。

雖然它們呈現相同的、有效的粗體斜體,但這些標籤之間的區別在於它們的功能。 雖然更簡單的粗體和斜體標籤是表示性的(改變文本呈現方式),但強烈和強調表示輔助技術的不同語音模式。

但這並不像盲目地將所有<b>替換為<strong>那樣簡單。 例如,許多標題使用粗體文本進行對比,但對於殘障用戶來說,在這裡體驗<strong>標記可能不是最好的。 想一想,“用戶是否需要以不同的方式說出這段文字才能體驗其全部含義?” 如果沒有,請考慮刪除<strong><em> ,除非它們確實有必要。

像這樣的細微變化和考慮可以為殘疾用戶帶來很大的不同。 升級而不是降級 UX 很重要。

為視障人士設計

雖然上述建議已經使視障者受益,但並非每個有視力問題的人都會有相同的障礙程度或類型。 同樣重要的是提供可以適應那些保留視力的人的選項。

考慮這些元素:

  • 允許用戶放大字體。 大多數瀏覽器都會在您同意或不同意的情況下執行此操作,但如果您為它準備了 CSS,它會看起來更好。
  • 避免某些顏色組合,如紅色和綠色或藍色和黃色。 相反,為什麼不使用顏色來增加轉化率,同時增加可訪問性呢?
  • “替代文本”中的代碼。 輔助技術可以閱讀替代文本並解釋頁面上的任何圖形。
  • 在縮寫中使用句點,即使是眾所周知的。 屏幕閱讀器處理信息的方式通常是語音:想像一下聽到“Fibby”與 FBI

有關為視障用戶整合元素的方法的更多信息,請查看美國盲人基金會。

為聽障人士設計

儘管聽力受損者需要較少的住宿,但最近在網站上使用視頻的趨勢增加了對智能設計選擇的需求。 因此,如果您的網站包含任何聽覺組件,請使用隱藏式字幕或手語翻譯。

避免使用自動隱藏式字幕的誘惑 - 停下來查看使用自動轉錄處理的任何隨機視頻,以查看沒有意義的單詞翻譯,並且可以產生效果。

對於特定的字幕指南,可以在此處找到全國聾人協會的建議。

光敏性癲癇的設計

圍繞視頻的普遍使用,特別是使用自動播放功能的視頻的設計關注點之一,圍繞著患有光敏性癲癇的用戶。 這些用戶可能會經歷由頻閃燈類型效果或移動圖像觸發的癲癇發作。 網頁設計師可以使用光敏癲癇分析工具來檢查其內容觸發癲癇發作的可能性。

如果內容被確定為有風險但無法更改以降低風險,請始終警告潛在風險並且不要自動播放視頻。 確保警告可見且靠近播放按鈕。

為行動不便而設計

一些行動障礙的範圍從精細運動控制的完全喪失到輕度震顫。 任一級別的損害都會在未考慮它們的網站上產生相同的用戶體驗:

  • 用戶必須付出更大的努力才能到達鏈接,並且可能很快就會感到疲倦。
  • 用戶無法瀏覽該網站,因為它不允許使用鍵盤。
  • 必須滾動瀏覽長頁面會導致疲勞,因為沒有“返回頂部”或跳過選項可用。

針對觸摸屏或精細鼠標輸入進行了優化的站點可能會給行動不便的人帶來更嚴重的後果,可能導致站點無法使用。

結合可以使用鍵盤操作的導航和可以將用戶吸引到頁面不同部分的頻繁錨鏈接等設計元素可以大大幫助這些用戶。

創建“基本”網站選項

你的設計完美無瑕、互動性強、引人注目,使用了公開市場上最新和最偉大的趨勢——上述任何用戶幾乎都無法接觸到。

如果這聽起來像你的網頁設計,一個更簡單的替代方案是創建一個用戶可以打開和關閉的“簡單”佈局。 這將吸引的不僅僅是殘疾用戶:例如,對於患有高對比度引發的偏頭痛的用戶,擁有一個易於訪問的切換可能是成為客戶或離開以應對三個小時的偏頭痛的區別。

也不要止步於此。 為您的訂閱列表應用相同的選項,允許用戶在接收電子郵件營銷之前輕鬆編輯他們的偏好。

繼續了解您的不同用戶。 繼續想他們。 您對用戶的理解和同情越多,用戶體驗設計就會變得越容易訪問。 誰知道? 你甚至可以改變某人的世界。