回到設計筆記

網站無障礙從哪裡開始?先改善鍵盤操作、文字與表單

無障礙不只是特定族群的需求,也是讓所有訪客在不同裝置與情境下更容易使用網站的基礎。本文從鍵盤操作、文字結構、圖片說明與表單回饋,整理中小企業可優先改善的項目。

網站無障礙從哪裡開始?先改善鍵盤操作、文字與表單

網站使用者不一定總是在理想環境中閱讀內容。有人用手機單手操作,有人暫時無法清楚看螢幕,也有人透過鍵盤或輔助工具瀏覽。當網站的互動與資訊只依賴滑鼠、顏色或圖片,部分訪客就可能無法完成原本很簡單的任務。

無障礙不必等到全面改版才開始。先處理會阻礙閱讀、導覽與送出表單的基本問題,通常也能同步提升一般使用者的操作體驗與內容清晰度。

先用鍵盤走一次重要流程

不少人以為網站只能靠滑鼠點選,其實鍵盤操作是重要的基本檢查方式。請在電腦上使用 Tab、Shift+Tab 與 Enter,從首頁依序移動焦點,測試能否完成查看選單、開啟按鈕、填寫表單與送出詢問。

檢查時特別留意:

  • 目前焦點是否清楚可見,而不是移到看不見的位置。
  • 選單展開後,是否能進入子項目並順利關閉。
  • 彈出視窗開啟時,焦點是否停留在視窗內。
  • 關閉視窗後,焦點是否回到原本觸發的位置。
  • 是否有只能用滑鼠拖曳或滑過才可使用的功能。

若焦點樣式被設計成與背景太接近,使用者會不知道自己正在操作哪裡。這類問題常在追求視覺簡潔時被忽略,卻會直接增加操作挫折。

用標題結構整理內容,不只放大字級

頁面標題與段落小標題應依內容層級排列,而不是只依視覺大小決定。清楚的標題結構能讓讀者快速掃讀,也能協助使用輔助工具的人跳到需要的段落。

一個頁面通常有一個主要標題,再依序安排第二、第三層標題。不要因為想讓字變大,就把每段文字都設為標題;也不要只用粗體或顏色區分段落。當內容層次正確,後續改版時也較容易維持一致。

連結文字同樣要具備意義。「點這裡」、「更多」若離開上下文就無法理解目的,建議改為「查看網站維護服務內容」或「閱讀品牌案例」。這也讓所有讀者更容易預期點擊後會到哪裡。

為圖片提供合適的文字替代

圖片替代文字的目的,是補充圖片承載但正文尚未說明的資訊。若圖片純粹是裝飾,不需要重複描述;若是產品照片、流程圖、資訊圖表或按鈕圖示,就應提供能理解其用途的文字。

替代文字不必寫得冗長,也不需要以「圖片是」開頭。重點是回答:看不到這張圖的人,少了什麼關鍵訊息?例如產品圖可說明品項與主要特徵;圖表則應在正文附近先交代結論與重要比較,而不是把所有視覺細節都塞進單一句子。

表單的提示與錯誤要能被理解

表單欄位不能只用輸入框內的淡色提示字作為標籤,因為使用者輸入後提示會消失。每個欄位應有固定、清楚的名稱,必要時再補充填寫格式或用途。

驗證錯誤時,除了用紅色標示,也要以文字說明問題,例如「請填寫可聯絡的電子信箱」。不要只顯示圖示或改變邊框顏色。送出後若成功,請提供明確訊息;若失敗,也應說明可採取的替代聯絡方式。

把無障礙納入日常內容流程

最容易持續的做法,是把檢查點放進發布流程:新增圖片時填寫替代文字、建立頁面時確認標題層級、設計按鈕時使用具體文字、修改表單後實際操作一次。這比每隔幾年才進行大規模修正更有效。

無障礙涉及技術、設計與內容,複雜功能或重要服務流程可請具相關經驗的人協助測試。但從基本操作開始,企業就能先發現許多可立即修正的障礙。

今天就能做的事

  • 用鍵盤完成一次首頁到聯絡表單的流程,記下卡住的位置。
  • 檢查一個重要頁面是否只有一個主要標題,且小標題層級合理。
  • 將三個「點這裡」類型的連結改成可理解目的的文字。
  • 實際送出一次表單,確認錯誤與成功訊息都清楚可讀。
Q
Written by麵包屑工作室

整理品牌與網站之間,那些值得慢慢想清楚的小事。

Ready when you are

心裡那個網站,
我們一起把它做出來。

告訴我們你的品牌、目標與期待,
我們會在 2 個工作天內回覆。

開始聊聊