回到設計筆記

網站可近用性怎麼開始?中小企業先做好閱讀、操作與提示

可近用性不是只為特定族群增設功能,而是讓更多人在不同裝置與情境下順利使用網站。本文整理中小企業可優先處理的文字、鍵盤操作、表單提示與內容檢查方式。

網站可近用性怎麼開始?中小企業先做好閱讀、操作與提示

網站使用者的情境比想像中更多元:有人在強光下看手機、有人暫時無法精準操作滑鼠、有人需要透過螢幕閱讀工具取得內容,也有人只是因為網路不穩而看不到部分介面。可近用性(accessibility)並非額外裝飾,而是降低使用阻礙的設計與製作原則。

中小企業不必一開始就把網站全面重做。較務實的方式是,從最常被使用的頁面與流程開始,找出「看不懂、按不到、填不完」的地方,再把改善要求納入後續內容上架與改版流程。

先確認資訊能被看懂

可近用性的起點,往往是清楚的文字與結構。不要只用顏色區分狀態,例如把必填欄位標成紅色卻沒有文字說明;也不要把一整段內容做成圖片,讓文字無法放大、選取或被輔助工具辨識。

內容編排可先檢查幾件事:

  • 標題依內容層級使用,不要只為了字變大而跳過層級。
  • 連結文字要說明目的,避免頁面中充滿「點這裡」或「更多」。
  • 內文與背景需有足夠辨識度,淺灰細字通常不利閱讀。
  • 圖片若承載訊息,應提供能表達用途的替代文字;純裝飾圖片則不必硬寫描述。
  • 影片若有口語重點,可提供字幕、逐字稿或至少摘要。

這些調整也會讓一般訪客更容易快速掃讀,並有助於內容日後的維護。

不用滑鼠,也要能完成重要任務

許多網站在桌面操作時看似正常,實際用鍵盤按 Tab 鍵瀏覽卻會出現焦點消失、選單卡住或彈出視窗無法關閉的狀況。對於依賴鍵盤操作的使用者,這會直接中斷任務。

請優先測試首頁導覽、站內搜尋、聯絡入口、登入與重要下載頁。從瀏覽器網址列外開始按 Tab,觀察焦點是否清楚可見、順序是否合理;按 Enter 是否能開啟按鈕與連結;彈出視窗出現後,焦點是否停留在視窗內,並能用鍵盤關閉。

若自訂元件很多,例如下拉選單、輪播、日期選擇器或地圖,建議在採購或開發前就要求供應商說明鍵盤操作方式。外觀接近原稿不等於操作完整,尤其不要只用滑鼠點擊來驗收。

用明確提示降低表單挫折

表單錯誤訊息常在送出後才以紅框顯示,而且沒有指出問題。更好的做法是在欄位旁先說明格式或用途;送出後,將錯誤原因以文字呈現,並讓使用者容易回到需要修正的欄位。

例如,與其只顯示「格式錯誤」,不如說明「請輸入可收件的電子郵件地址」。若某欄位為必填,請同時以文字與視覺符號標示。錯誤不應只靠顏色傳達,成功送出後也應提供可辨識的確認訊息,避免使用者重複送件。

把檢查納入日常上稿

可近用性最怕只在專案結束時做一次檢核,之後每次上稿又回到舊習慣。建議為內容人員建立簡短的發布清單:標題有無層級、圖片有無替代文字、連結是否描述去向、重要資訊是否只存在圖片中。

技術面則可在版本更新後,固定檢視常用頁面的鍵盤操作與錯誤提示。自動檢測工具能協助找出部分問題,但無法判斷一段文字是否真正清楚,也無法替代真人操作。把實際使用者任務納入測試,才能更接近網站的真實狀況。

今天可以先做的事

  • 用鍵盤 Tab 鍵走完網站的導覽與聯絡流程,記下焦點不清楚或卡住的位置。
  • 檢查首頁與服務頁的圖片,補上真正有助理解的替代文字。
  • 將表單錯誤訊息改成具體的修正指引,不只顯示紅框。
  • 建立一份四項以內的上稿檢查清單,讓每次更新都能套用。
Q
Written by麵包屑工作室

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

Ready when you are

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

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

開始聊聊