測試你的技能：WAI-ARIA

此技能測試的目的是評估您是否理解了我們的 WAI-ARIA 基礎 文章。

注意：您可以在此頁面上的互動式編輯器或線上編輯器（例如CodePen、JSFiddle或Glitch）中嘗試解決方案。

如果您遇到困難，可以透過我們的溝通渠道之一聯絡我們。

WAI-ARIA 1

在我們的第一個 ARIA 任務中，我們為您提供了一段非語義標記，顯然它應該是一個列表。假設您無法更改使用的元素，您如何才能讓螢幕閱讀器使用者將其識別為列表？

嘗試更新下面的即時程式碼以重新建立完成的示例。

下載此任務的起點，以便在您自己的編輯器或線上編輯器中進行操作。

WAI-ARIA 2

在我們的第二個 WAI-ARIA 任務中，我們提供了一個簡單的搜尋表單，我們希望您新增幾個 WAI-ARIA 功能來提高其可訪問性。

  1. 您如何才能讓螢幕閱讀器將搜尋表單作為頁面上的單獨地標調用出來，以便於查詢？
  2. 您如何在不顯式地向 DOM 新增可見文字標籤的情況下為搜尋輸入提供合適的標籤？

嘗試更新下面的即時程式碼以重新建立完成的示例。

下載此任務的起點，以便在您自己的編輯器或線上編輯器中進行操作。

WAI-ARIA 3

在這個最後的 WAI-ARIA 任務中，我們回到了之前在CSS 和 JavaScript 技能測試中看到的示例。和以前一樣，我們有一個簡單的應用程式，它顯示了一個動物名稱列表。單擊其中一個動物名稱會導致該動物的進一步描述出現在列表下方的框中。在這裡，我們從一個滑鼠和鍵盤可訪問的版本開始。

我們現在遇到的問題是，當 DOM 更改以顯示新的描述時，螢幕閱讀器無法看到發生了什麼變化。您能否對其進行更新，以便螢幕閱讀器宣佈描述的變化？

下載此任務的起點，以便在您自己的編輯器或線上編輯器中進行操作。