测试你的技能：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 更改以显示新的描述时，屏幕阅读器无法看到发生了什么变化。您能否对其进行更新，以便屏幕阅读器宣布描述的变化？

下载此任务的起点，以便在您自己的编辑器或在线编辑器中进行操作。