测试你的技能：HTML 可访问性

此技能测试的目的是评估您是否理解了我们的 HTML：可访问性的良好基础 文章。

注意：您可以在此页面上的交互式编辑器或在线编辑器（如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。

如果您遇到困难，可以通过我们的 沟通渠道之一联系我们。

HTML 可访问性 1

在此任务中，我们将测试您对文本语义的理解，以及为什么它们有利于可访问性。给定的文本是一个带有操作按钮的简单信息面板，但 HTML 非常糟糕。

我们希望您使用适当的语义 HTML 进行更新。您无需过多担心重现完全相同的样式和文本大小，只要语义良好即可。

尝试更新下面的实时代码以重新创建完成的示例

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

HTML 可访问性 2

在第二个任务中，您有一个包含三个输入字段的表单。您需要

  • 在语义上将输入与其标签关联。
  • 假设这些输入将是更大表单的一部分，并将它们包装在一个元素中，将它们全部关联在一起作为一个相关的组。
  • 为该组提供一个描述/标题，总结所有信息作为个人数据。

尝试更新下面的实时代码以重新创建完成的示例

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

HTML 可访问性 3

在此任务中，您需要将段落中的所有信息链接转换为良好的、可访问的链接。

  • 前两个链接只是指向常规网页。
  • 第三个链接指向 PDF，并且文件很大——8MB。
  • 第四个链接指向 Word 文档，因此用户需要安装某种可以处理该文档的应用程序。

尝试更新下面的实时代码以重新创建完成的示例

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

HTML 可访问性 4

在我们的最后一个 HTML 可访问性任务中，您将获得一个简单的图片库，它存在一些可访问性问题。您可以修复它们吗？

  • 标题图片存在可访问性问题，图库图片也存在。
  • 您可以进一步处理标题图片，并使用 CSS 实现它，以获得更好的可访问性。为什么这样更好，解决方案是什么样的？

尝试更新下面的实时代码以重新创建完成的示例

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