起始点
要开始此挑战，您应该去获取 包含示例文件的 ZIP 包。将内容解压到本地计算机上的某个新目录中。
或者，您也可以使用在线编辑器，例如 CodePen 或 JSFiddle。
完成后的挑战站点应如下所示：
您会发现挑战起始状态的显示存在一些差异/问题 — 这主要是由于标记中的差异，进而导致 CSS 未正确应用而产生的一些样式问题。不用担心 — 您将在接下来的部分中修复这些问题！
注意：如果你遇到困难，可以通过我们的 交流渠道 与我们联系。
项目简介
对于本项目，您将看到一个虚构的自然网站，其中包含一篇关于熊的“事实性”文章。目前，它存在许多可访问性问题 — 您的任务是探索现有网站并尽您所能修复它们，同时回答以下问题。
颜色
由于当前的配色方案，文本难以阅读。您能否测试当前的颜色对比度（文本/背景），报告测试结果，然后通过更改指定的颜色来修复它？
语义化 HTML
- 内容仍然可访问性不高 — 请报告当您尝试使用屏幕阅读器导航它时会发生什么。
- 您能否更新文章文本，使其更易于屏幕阅读器用户导航？
- 可以通过将其放入合适的 HTML 语义元素中，来提高网站导航菜单部分（包裹在
<div class="nav"></div>中）的可访问性。应该更新成哪个元素？请进行更新。
注意： 您需要更新样式标签的 CSS 规则选择器，使其与相应的语义标题标签相匹配。添加段落元素后，您会注意到样式看起来更好。
图片
目前的图片对于屏幕阅读器用户来说是不可访问的。您能修复这个问题吗？
音频播放器
<audio>播放器对于听障人士（聋哑人士）来说是不可访问的 — 您能否为这些用户添加某种可访问的替代方案？<audio>播放器对于不支持 HTML 音频的旧版浏览器用户来说是不可访问的。您如何让他们仍然能够访问音频？
表单
- 顶部搜索表单中的
<input>元素缺少一个标签，但我们不想添加一个可见的文本标签，因为这可能会破坏设计，并且对于视力正常的用户来说并非真正需要。您如何添加一个仅对屏幕阅读器可访问的标签？ - 评论表单中的两个
<input>元素有可见的文本标签，但它们没有明确地与其标签相关联 — 您如何实现这一点？请注意，您也需要更新一些 CSS 规则。
显示/隐藏评论控件
显示/隐藏评论控件按钮目前无法通过键盘访问。您能否使其可以通过键盘访问，包括使用 Tab 键聚焦，以及使用 Enter 键激活？
表格
数据表目前可访问性不高 — 屏幕阅读器用户很难将数据行和列关联起来，而且表格也没有任何摘要来说明其显示的内容。您能否在 HTML 中添加一些功能来解决这个问题？
其他考虑因素？
您能否列出另外两个可以改进网站可访问性的想法？