評估：輔助功能故障排除
在本模組的評估中，我們將向您展示一個簡單的網站，其中包含一些您需要診斷和修復的可訪問性問題。
| 先決條件 | 對 HTML、CSS 和 JavaScript 的基本瞭解，以及對課程中之前的文章的理解。 |
|---|---|
| 目標 | 測試可訪問性基礎知識。 |
起點
要開始此評估，您應該獲取包含示例檔案內容的 ZIP 檔案。將內容解壓縮到本地計算機上的新目錄中。
或者，您可以使用線上編輯器，例如CodePen、JSFiddle 或Glitch。
完成的評估站點應如下所示
您將看到評估起始狀態的顯示中存在一些差異/問題——這主要是由於標記的差異，而這些差異又導致了一些樣式問題，因為 CSS 沒有正確應用。不用擔心——您將在接下來的部分修復這些問題！
注意：如果您遇到困難，可以透過我們的溝通渠道之一聯絡我們。
專案簡介
在此專案中，我們將為您提供一個虛構的自然網站，其中顯示了一篇關於熊的“事實”文章。就目前而言，它存在許多可訪問性問題——您的任務是探索現有網站並盡力修復它們，並回答以下問題。
顏色
由於當前的配色方案，文字難以閱讀。您可以測試當前的顏色對比度（文字/背景），報告測試結果，然後透過更改分配的顏色來修復它嗎？
語義化 HTML
- 內容仍然不太容易訪問——報告一下當您嘗試使用螢幕閱讀器導航時會發生什麼。
- 您可以更新文章文字，使其更易於螢幕閱讀器使用者導航嗎？
- 網站的導航選單部分（包裝在
<div class="nav"></div>中）可以透過將其放入合適的 HTML 語義元素中來使其更易於訪問。它應該更新為哪個元素？進行更新。
注意：您需要將為標籤設定樣式的 CSS 規則選擇器更新為語義標題的相應等價物。新增段落元素後，您會注意到樣式看起來更好了。
影像
螢幕閱讀器使用者目前無法訪問影像。您可以解決此問題嗎？
音訊播放器
<audio>播放器無法被聽力障礙（聾啞）人士訪問——您可以為這些使用者新增某種可訪問的替代方案嗎？<audio>播放器無法被使用不支援 HTML 音訊的舊版瀏覽器的人訪問。如何讓他們仍然可以訪問音訊？
表單
- 頂部搜尋表單中的
<input>元素需要一個標籤，但我們不想新增一個可見的文字標籤，這可能會破壞設計，並且對於有視力的人來說並不是真正需要的。如何新增一個僅供螢幕閱讀器訪問的標籤？ - 評論表單中的兩個
<input>元素具有可見的文字標籤，但它們沒有明確地與其標籤相關聯——如何實現這一點？請注意，您還需要更新一些 CSS 規則。
顯示/隱藏評論控制元件
顯示/隱藏評論控制元件按鈕目前無法透過鍵盤訪問。您可以使其可以透過鍵盤訪問嗎，無論是使用 Tab 鍵聚焦還是使用 Return 鍵啟用？
表格
資料表目前的可訪問性不是很好——螢幕閱讀器使用者很難將資料行和列關聯起來，並且該表也沒有任何型別的摘要來明確說明它顯示的內容。您可以向 HTML 新增一些功能來解決此問題嗎？