技能测试：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 上查看此页面 • 报告此内容的可用性问题