你有沒有走進過實體店,卻發現前門只有六英寸寬,電燈開關卻裝在天花板上?
好吧,可能沒有。但你懂的。那樣導航簡直不可能,而這正是你的網站在缺乏基本無障礙功能的情況下,對依賴螢幕閱讀器、鍵盤導航或高對比度模式的使用者來說的感受。
據世界衛生組織統計,全球約有 13 億人患有嚴重殘疾。這意味著,如果你的網站不能讓每個人都能輕鬆瀏覽,你可能會失去六分之一的潛在客戶。
網站無障礙並非昂貴的“錦上添花”,它只是良好的使用者體驗——投入一點時間,就能獲得良好的搜尋引擎最佳化(以及良好的回報)。你需要的大多數修復都是微調,而不是重新設計。
下面,我們提供了一些清單、示例和免費工具,你可以使用它們來確保你的網站無障礙功能得到充分的保障。我們都有責任讓網路成為人人自由開放的地方,所以讓我們一起努力吧。
為什麼無障礙設計對企業有益(而不僅僅是禮貌)
隨著壽命的延長,殘疾人士的比率也在上升,導致慢性疾病的發病率上升。殘障人士應該能夠與非殘障人士一樣獲取相同的資訊,因此,我們所有人攜手合作,使數字內容無障礙,並努力消除線上無障礙的障礙至關重要。
作為網站所有者,務必確保您沒有將殘障人士排除在外——即使是無意的。《美國殘疾人法案》(ADA) 是一部民權法,禁止企業和組織基於殘障進行歧視,因此,如果您的網站並非人人無障礙,您可能會陷入法律困境!
但法律合規性並非您在設計網站時將無障礙設計置於首要位置的唯一原因。以下是其他一些因素:
- 更大的受眾群體,更低的跳出率:無障礙頁面對於輔助技術和移動訪問者來說,載入速度都更快,Google 會注意到這一點——這意味著您的網站在演算法中的排名會得到提升。
- 無障礙訪問 = SEO:這不僅僅關乎快速載入。文字替代、語義標題和邏輯焦點順序都能為搜尋引擎抓取工具提供簡潔、富含關鍵詞的標記。簡而言之,您在無障礙訪問方面投入的每一分錢,都意味著轉化率的提升。
- 更受品牌喜愛:研究表明,越來越多的購物者希望購買與自身價值觀相符的品牌。打造無障礙訪問的網站,可以傳遞出您的公司擁有包容性價值觀的資訊。更具多元化和包容性的公司,其財務回報高於行業平均水平的可能性高達 35%。
無障礙訪問的網站設計不僅方便殘障人士輕鬆瀏覽您的網站,還包含一些設計原則,可以真正提升所有網站訪問者的使用者體驗。這絕對沒有任何壞處。
無障礙訪問網站的10個要素
您可以在網站上運用許多無障礙元素,其中大部分來自《Web 內容無障礙指南》(WCAG),這是一項國際公認的 Web 無障礙標準。
如果您是從零開始,以下 10 點將是您的理想起點。使用這份清單,確保您不會遺漏任何一項:
- 文字和背景之間的高對比度顏色組合:WAVE 等免費工具可以幫助您檢查對比度是否足夠高。
- “跳至正文”連結:新增一個 href=”#main” 錨點,該錨點出現在鍵盤焦點上,以便使用鍵盤瀏覽您網站的使用者可以快速跳過導航選單,直接找到他們想要的內容。
- 描述性替代文字:這應該傳達視覺效果的目的,而不是檔名,以便無法看到圖片和影片的使用者也能知道它們是什麼。
- 邏輯標題大綱:螢幕閱讀器使用者按標題級別跳轉,因此按正確的層次順序排列標題(即 H1、H2、H3 等)非常重要。
- 鍵盤友好的導航和表單:您可以使用自己的鍵盤測試網站上的互動元素,並確保它們易於訪問。
- 網路安全字型:這些字型始終可被螢幕閱讀器讀取,在各種型別的裝置上正確顯示,並可根據不同使用者的需求正確縮放。
- 帶字幕或轉錄的媒體:這不僅使失聰或聽力障礙的網站訪問者可以訪問您的媒體,還可以提升您的 SEO。
- 響應式、支援縮放的佈局:這意味著至少使用 320 畫素的寬度,並且不使用“zoom=1”視口鎖定。
- 內容排列合理的固定導航選單:這使得使用者在想要切換到新頁面時能夠快速找到所需內容,而無需滾動很長的距離。
- 清晰的連結目的:使用錨文字,例如“下載選單 (PDF)”,而不是“點選此處”,以便使用螢幕閱讀器的使用者知道他們點選的是什麼。
7個真實案例:完美實現無障礙訪問的小型企業網站
準備好看看這些網站的實際效果了嗎?這些網頁無障礙訪問示例都包含一些您可以在網站上實現的功能。要檢視它們的實際效果,只需訪問這些網站,然後使用鍵盤上的“Tab”鍵即可開始瀏覽。
1. Blue Bottle Coffee
鍵盤使用者在這裡首先看到的是“Skip to content”連結,它可以直接跳過超級選單跳轉到主標題。在首頁上,該連結甚至位於“跳至 Cookie 通知”選項之前,這不僅體現了對導航的尊重,也體現了對隱私提示的尊重。
由於跳過連結使用 href="#main"
編碼,並且僅在焦點對準時顯示,因此它保持了視覺設計的整潔,同時為螢幕閱讀器使用者和切換裝置使用者提供了流暢的開始體驗。
Blue Bottle 在其沖泡指南中始終使用 H2 副標題,以及豐富的 alt 格式產品圖片。最終,這個精品咖啡品牌在可用性方面與手衝咖啡一樣用心。
2. Fort Myers Brewing Co.
輕觸 Tab 鍵進入 Fort Myers Brewing Co. 的主頁,導航欄前會出現一個醒目的高對比度跳過連結。繼續輕觸 Tab 鍵,您會注意到每個下拉選單都透過 Enter/Space 鍵開啟,而不僅僅是懸停——這對於無法操作滑鼠的使用者來說至關重要。
字型大小適中,高於 18 畫素,按鈕符合 WCAG-AA 顏色對比度標準,因此顧客無需眯眼即可訂購航班。
3. Partake Foods
Partake 的整個品牌都圍繞著包容性、無過敏原的零食展開,因此他們的網站也順理成章。每個頁面頂部都設有跳過連結,每張主圖都配有描述口味和包裝的替代文字。
結賬時的錯誤資訊以通俗易懂的語言(“請輸入郵政編碼”)顯示,並透過 aria-live 向螢幕閱讀器播報,以便患有閱讀障礙或視力障礙的購物者不會錯過任何資訊。
該公司的品牌形象全部採用柔和的色彩,但其懸停時柔和的配色方案預設仍能達到 4.5:1 的對比度,這證明您無需在柔和的美感和合規性之間做出選擇。
4. Little Seed Farm
這個田納西州的山羊奶護膚品牌即使在網速較慢的鄉村也能輕鬆訪問:首頁會載入一個輕量級的英雄元素,後面跟著一個跳過連結和邏輯地標角色( <main>
、 <nav>
)。
產品卡片使用大型、觸感良好的點選目標(44 × 44 畫素以上),替代文字不僅可以識別產品,還能增加感官體驗(“薰衣草枝旁的無香除臭棒”),這對於無法看到圖片的消費者在選擇香水時非常有幫助。
5. United By Blue
啟用鍵盤後,United By Blue 會立即提供兩個快捷方式:“Skip to content”和“Skip to Accessibility Statement”。無障礙宣告列出了他們提供的所有輔助技術功能:對比度切換、替代文字策略、ARIA 地標,甚至還公佈了鍵盤快捷鍵(按 M 鍵開啟選單,按 H 鍵開啟標題)。這種透明度可以引導訪客並增強信任。
視覺上,深色配色方案符合 WCAG AAA 大文字標準,同時由於輪廓較粗,移動焦點永遠不會消失。
6. Charlotte’s Web CBD
Charlotte’s Web 將無障礙功能放在首位,在所有促銷資訊的頂部都設定了高對比度的雙跳轉連結“Skip to content”/“Open the Accessibility Widget”。
20 畫素的大字型和寬大的行高符合可讀性指南,每張產品圖片的替代文字中都包含藥效資訊——這對於尋找 CBD 劑量資訊的購物者來說至關重要。
7. Beardbrand
在《美國殘疾人法案》(ADA)訴訟之後,Beardbrand 做了充分的準備。跳轉連結引導標籤順序,頁尾標註邀請“Shoppers with disabilities”致電或傳送電子郵件尋求幫助——這是許多小品牌不具備的包容性服務。
此外,所有小型 UI 元素(例如數量步進器)周圍的焦點環都加粗,避免了視力障礙使用者產生“我的游標去哪兒了?”的困惑。
免費的DIY無障礙測試工具
在採取任何措施重新設計您的網站之前,最好先了解網站的現狀、它如何符合無障礙標準和最佳實踐,以及您可能需要透過更改或重新設計來克服哪些無障礙障礙。
檢查網站無障礙性的方法有很多。讓我們來探索一些最簡單、最常用的方法。
工具 | 功能 / 作用 | 獲取方式 |
---|---|---|
WAVE 網頁無障礙評估工具 | WAVE 是一套工具,可用於評估您的網頁和內容,使其更易於殘障人士訪問。WAVE 工具不僅會檢查其是否符合無障礙標準(例如 WCAG),還可以根據您的需要進行人工稽覈。要使用 WAVE,只需在“網頁地址”欄位中輸入您要評估的網頁網址,然後點選箭頭按鈕即可。WAVE 將生成一份報告,顯示該頁面上的任何錯誤或潛在的無障礙問題。您還可以安裝 WAVE 的 Chrome、Firefox 和 Edge 瀏覽器擴充套件程式,直接在瀏覽器中測試無障礙功能。除了錯誤報告之外,WAVE 還會提供有關如何改進網頁以提高其無障礙性的反饋。例如,它可以指出缺少替代文字的圖片,或結構元素的組織方式可能會讓網站訪問者感到困惑。 | WAVE 官網或瀏覽器擴充套件 |
Lighthouse(Chrome DevTools) | Lighthouse 是一款開源的自動化工具,旨在幫助您提升網頁質量。您可以在 Chrome DevTools 中、透過命令列或 Node 模組執行 Lighthouse。只需輸入一個 URL 進行稽覈,Lighthouse 就會對該頁面執行一系列稽覈,然後生成一份關於頁面效能的報告。報告中包含無障礙功能稽覈。每項稽覈還會包含稽覈的重要性以及如何解決問題的資訊。 | Chrome DevTools、命令列、Node 模組或 Web UI |
WebAIM | WebAIM 代表“Web Accessibility In Mind”。該網站提供大量免費資源,幫助網站所有者提高其網站的可訪問性,包括文章、清單等。要手動提高您網站的可訪問性,請按照 WCAG 2 清單中的建議進行操作。要立即檢查您網站的顏色對比度並檢視它是否符合 WCAG 標準,請使用 WebAIM 對比度檢查器。 | WebAIM.org |
VoiceOver / NVDA | 免費的螢幕閱讀器(分別適用於 Windows 和 Mac),您可以使用它來檢查您的流程。要使用 VoiceOver,請轉到 系統設定 > 輔助功能 > VoiceOver 並將其切換到開啟狀態。NVDA 不是預先安裝的,因此您需要先下載它。 | 下載 NVDA(VoiceOver 在系統設定中開啟) |
鍵盤 | 使用 Tab 鍵瀏覽您的網站,親身體驗不使用滑鼠瀏覽網站的感受。記下任何您遇到困難或不清楚如何到達目標位置的地方。這些地方就是您需要改進無障礙功能的地方。 | 你很可能已經擁有 |
無障礙路線圖簡圖:本週即可釋出的3個修復方案
想要快速提升無障礙體驗?雖然提升網站無障礙體驗是一場馬拉松,而非短跑衝刺,但有些修復方案並不需要花費太多時間。以下是三項您可以在本週付諸實踐的方案,可立即提升網站對殘障訪客的使用者體驗。
1. 為每張圖片新增替代文字
網站上的每張圖片都應有相應的替代文字,準確簡潔地描述圖片的內容或功能。每頁花 15 分鐘時間,描述圖片的用途,而不是畫素。
此描述應與圖片向視力正常使用者傳達的資訊一致。
2. 新增“跳轉至內容”連結
這允許依賴鍵盤的使用者繞過重複的導航連結,直接訪問主要內容,您應該在每個頁面的頂部都新增一個連結。
您可以透過 Tab 鍵瀏覽頁面進行測試,確保其清晰可見且功能正常。
3. 執行Lighthouse稽覈,解決三大危險訊號
重點關注那些影響較大的問題,例如缺少表單標籤或對比度低的按鈕。每週重複此操作,很快您就無需再修復任何可訪問性問題了。
小結
完美的可訪問性並非一朝一夕就能實現的,這沒關係。每一次調整都能拓寬您的訪問範圍:無論是使用 5 英寸手機、55 英寸顯示器還是其他尺寸的使用者,都能獲得同樣的體驗。從今天開始,明天進行測試,並不斷改進。
評論留言