:::
每日生活資訊｜無障礙介面實作示範
用時間與天氣小工具，觀察載入狀態、文字分級與裝飾圖示的處理方式。這頁結合 Accesserty UI Kit 與原生 HTML，可作為實作參考，不是完整無障礙驗收範本。
現在時刻
氣象資訊
天氣資料提供： WeatherAPI.com
天氣資訊僅供一般參考，預報有不確定性，未必符合您所在位置與時間的實際情況。涉及人身安全、航空、海上航行、緊急應變等決策時，請查閱官方氣象服務與相關機關資訊，不要只依據此頁。
輸入至少兩個字，按 Enter 或「搜尋城市」，再從下方結果選擇城市。選擇後會在這台裝置上記住。
只有按下「使用我的位置」才會請求定位。本站不將定位座標寫入本機儲存，也不會在下次開頁時再次使用。手動選擇的城市會記在這台裝置上，下次開頁會查詢該城市；定位不會覆蓋已記住的城市。
城市搜尋字詞與查詢用座標會先送到 Accesserty 的 Cloudflare 天氣服務，再傳給 WeatherAPI。座標在送出前會四捨五入至小數點後兩位，仍代表大致位置。服務商可能依其政策保存請求紀錄。 查看 WeatherAPI 的隱私說明（英文）
天氣
請先選擇城市。
這一頁示範了哪些無障礙做法
這一頁是可以實際使用的工具，也是實作範例。以下說明它在哪些地方做了選擇，以及為什麼這樣選。
- 非同步載入的狀態要能被聽見
- 選擇城市後，載入中、定位中、失敗與完成會更新到常駐的 aria-live 區域，讓輔助科技有機會在不移動焦點的情況下通知狀態。加入屬性不等於已驗收：仍需用實際瀏覽器與螢幕閱讀器確認是否播報、是否重複或打斷操作。
- 不是所有會變的東西都該被報讀
- 時鐘顯示這台裝置的時間，精確到分鐘，沒有設定 aria-live，避免每次更新都主動打斷朗讀。讀者仍可自行移到時間文字查看；會變動的內容不一定都要主動通知。
- 圖示不承擔資訊
- 天氣、月相與分級使用的 emoji 都標記為 aria-hidden，實際資訊由旁邊的文字提供。即使圖示沒有顯示，這一頁仍然讀得懂。
- 分級不只用顏色表示
- 空氣品質與 UV 的分級同時提供圖示與文字級別名稱，並可展開完整分級對照表。只靠顏色判讀的資訊，對色覺辨識障礙者或在強光下閱讀的人是不可用的（WCAG 1.4.1 顏色的使用）。
- 讓搜尋結果可看見、可操作
- 城市搜尋使用 UI Kit 輸入框，結果以原生 HTML 按鈕顯示，不依賴瀏覽器的建議選單。可按 Enter 搜尋，使用 Tab 移動到城市，再按 Enter 選擇；選擇後焦點回到輸入框。仍需檢查螢幕閱讀器朗讀與縮放後的操作。
這頁的輸入元件來自 Accesserty UI Kit；狀態訊息、裝飾標記與文字分級由頁面實作。請把這些選擇帶回自己的操作情境驗證，不要把示範當成已通過 WCAG 2.2 AA 的證明。