技能測試：WAI-ARIA - 學習 Web 開發

WAI-ARIA 1

我們的第一個 ARIA 任務包含一段非語義標記，視覺上應該是一個列表。假設您無法更改使用的元素，如何讓螢幕閱讀器使用者理解它是什麼？

要完成此任務，請新增一些 WAI-ARIA 語義，讓螢幕閱讀器將 <div> 元素識別為無序列表。

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

html

<p>My favorite animals:</p>

<div>
  <div>Pig</div>
  <div>Gazelle</div>
  <div>Llama</div>
  <div>Majestic moose</div>
  <div>Hedgehog</div>
</div>

css

div > div {
  padding-left: 20px;
  position: relative;
}

div > div::before {
  content: " ";
  width: 8px;
  height: 8px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 8px;
}

點選此處顯示解決方案

您完成的 HTML 應該看起來像這樣

html

<div role="list">
  <div role="listitem">Pig</div>
  <div role="listitem">Gazelle</div>
  <div role="listitem">Llama</div>
  <div role="listitem">Majestic moose</div>
  <div role="listitem">Hedgehog</div>
</div>

WAI-ARIA 2

在我們的第二個 WAI-ARIA 任務中，我們展示了一個基本的搜尋表單，並希望您新增一些 WAI-ARIA 功能以提高其可訪問性。

完成任務

新增一個屬性，允許螢幕閱讀器將搜尋表單識別為頁面上的獨立區域，以便於查詢。
為搜尋輸入框提供一個合適的標籤，而無需在 DOM 中顯式新增可見文字標籤。

html

<form>
  <input type="search" name="search" />
</form>

點選此處顯示解決方案

您完成的 HTML 應該看起來像這樣

html

<form role="search">
  <input
    type="search"
    name="search"
    aria-label="Search for your favorite content on our site" />
</form>

WAI-ARIA 3

對於這個最後的 WAI-ARIA 任務，我們將回到之前在 CSS 和 JavaScript 技能測試中看到的示例。和以前一樣，我們有一個應用程式，顯示動物名稱列表。點選其中一個動物名稱會在列表下方的框中顯示該動物的詳細描述。在這裡，我們從一個對滑鼠和鍵盤可訪問的版本開始。

我們現在面臨的問題是，當 DOM 更改以顯示新描述時，螢幕閱讀器無法看到發生了什麼變化。您能更新它，以便螢幕閱讀器能夠播報描述的變化嗎？

html

<section class="preview">
  <div class="animal-list">
    <h1>Animal summaries</h1>

    <p>
      The following list of animals can be clicked to display a description of
      that animal.
    </p>

    <ul>
      <li
        tabindex="0"
        data-description="A type of wild mountain goat, with large recurved horns, found in Eurasia, North Africa, and East Africa.">
        Ibex
      </li>
      <li
        tabindex="0"
        data-description="A medium-sized marine mammal, similar to a manatee, but with a Dolphin-like tail.">
        Dugong
      </li>
      <li
        tabindex="0"
        data-description="A rare marsupial, which looks rather like a tiny kangaroo, measuring around 50 to 75 centimeters.">
        Quokka
      </li>
    </ul>
  </div>

  <div class="animal-description">
    <h2></h2>

    <p></p>
  </div>
</section>

p {
  color: purple;
  margin: 0.5em 0;
}

* {
  box-sizing: border-box;
}

li {
  cursor: pointer;
}

const listItems = document.querySelectorAll("li");
const descHeading = document.querySelector(".animal-description h2");
const descPara = document.querySelector(".animal-description p");

listItems.forEach((item) => {
  item.addEventListener("mouseup", handleSelection);
  item.addEventListener("keyup", (e) => {
    if (e.key === "Enter") {
      handleSelection(e);
    }
  });
});

function handleSelection(e) {
  const heading = e.target.textContent;
  const description = e.target.getAttribute("data-description");
  descHeading.textContent = heading;
  descPara.textContent = description;
}

點選此處顯示解決方案

解決此任務中所述問題有兩種方法

向 animal-description <div> 新增 aria-live="" 屬性，將其轉換為一個即時區域，這樣當其內容更改時，螢幕閱讀器會讀出更新後的內容。最佳值可能是 assertive，它會使螢幕閱讀器在內容更改後立即讀出更新後的內容。polite 意味著螢幕閱讀器會等待其他描述播報完畢後，再開始讀出更改後的內容。
向 animal-description <div> 新增 role="alert" 屬性，使其具有警告框語義。這對螢幕閱讀器的效果與在此元素上設定 aria-live="assertive" 相同。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 10 月 13 日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的可用性問題