:::
每日生活資訊
Accesserty UI Kit 的無障礙實作示範頁。目前以每日時間、天氣、空氣品質、UV、日出日落與月相資訊為例,說明狀態播報、圖示與顏色的處理方式。
現在時刻
氣象資訊
資料來源:Open-Meteo。天氣
請先選擇城市。
這一頁示範了哪些無障礙做法
這一頁是可以實際使用的工具,也是實作範例。以下說明它在哪些地方做了選擇,以及為什麼這樣選。
- 非同步載入的狀態要能被聽見
- 天氣資料是選擇城市之後才載入的。載入中、定位中、失敗與完成都寫在一個常駐的 aria-live 區域裡,螢幕報讀軟體才會在狀態改變時說出來,而不是讓使用者對著沒有變化的畫面等待(WCAG 4.1.3 狀態訊息)。
- 不是所有會變的東西都該被報讀
- 現在時刻每分鐘更新,但它刻意沒有加上 aria-live。持續自動播報時間對螢幕報讀使用者是干擾,不是幫助。會動的內容不等於需要被通知的內容。
- 圖示不承擔資訊
- 天氣、月相與分級使用的 emoji 都標記為 aria-hidden,實際資訊由旁邊的文字提供。即使圖示沒有顯示,這一頁仍然讀得懂。
- 分級不只用顏色表示
- 空氣品質與 UV 的分級同時提供圖示與文字級別名稱,並可展開完整分級對照表。只靠顏色判讀的資訊,對色覺辨識障礙者或在強光下閱讀的人是不可用的(WCAG 1.4.1 顏色的使用)。
- 先用原生 HTML
- 城市搜尋使用原生的 datalist,不是自製下拉選單。原生元素本身就帶有鍵盤操作與輔助科技支援,不需要再用 ARIA 補回來。
這些做法都來自 Accesserty UI Kit。示範不等於保證:實際頁面仍需要人工檢查與輔助科技測試。