Assessment: Accessibility troubleshooting

在此模块的评估中,我们为您提供了一个简单的站点,其中包含许多您需要诊断和修复的可访问性问题.

Prerequisites: 基本的计算机知识,对HTML,CSS和JavaScript的基本理解,对本课程中以前文章的理解.
Objective: 测试可访问性基础知识的基本知识.

Starting point

要开始进行此评估,您应该获取包含包含示例的文件ZIP . 将内容解压缩到本地计算机上某处的新目录中.

或者,您可以使用JSBinGlitch之类的网站进行评估. 您可以将HTML,CSS和JavaScript粘贴到这些在线编辑器之一中. 如果您使用的在线编辑器没有单独的CSS / JS面板,请随时将它们放在适当的<style> / <script>元素中.

完成的评估站点应如下所示:

在评估开始状态的显示中,您会看到一些差异/问题-这主要是由于标记中的差异,由于CSS的应用不正确,这些差异又引起了一些样式问题. 不用担心-您将在接下来的部分中解决这些问题!

注意 :如果您遇到困难,请向我们寻求帮助-请参阅本页底部的" 评估或其他帮助"部分.

Project brief

对于此项目,将为您提供一个虚构的自然网站,其中显示了有关熊的"事实"文章. 就目前而言,它存在许多可访问性问题-您的任务是浏览现有网站,并尽最大可能解决这些问题,并回答以下问题.

Color

由于当前的配色方案,文本难以阅读. 您可以对当前的颜色对比(文本/背景)进行测试,报告测试结果,然后通过更改分配的颜色进行修复吗?

Semantic HTML

  1. 内容仍然不是很容易访问-报告您尝试使用屏幕阅读器导航时发生的情况.
  2. 您是否可以更新文章文本,以使屏幕阅读器用户更容易浏览?
  3. 通过将站点的导航菜单置于适当的HTML5语义元素中,可以使其更易于访问(包装在<div class="nav"></div> ). 应该更新到哪一个? 进行更新.

注意 :您需要更新CSS规则选择器,以将标签样式设置为语义标题的适当等价物. 添加段落元素后,您会发现样式看起来更好.

The images

屏幕阅读器用户当前无法访问这些图像. 你能解决这个问题吗?

The audio player

  1. 听力障碍(聋哑)的人无法使用<audio>播放器-您可以为这些用户添加某种可访问的替代品吗?
  2. 使用不支持HTML5音频的旧版浏览器的用户无法访问<audio>播放器. 您如何允许他们仍然访问音频?

The forms

  1. 顶部搜索表单中的<input>元素可以使用标签,但是我们不想添加可见的文本标签,该标签可能会破坏设计,而且视力不佳的用户并不需要. 如何添加仅屏幕阅读器可以访问的标签?
  2. 注释表单中的两个<input>元素具有可见的文本标签,但它们并未与它们的标签明确关联-如何实现此目的? 请注意,您还需要更新一些CSS规则.

The show/hide comment control

显示/隐藏注释控制按钮当前无法通过键盘访问. 您可以通过使用Tab键将其聚焦并使用回车键来激活键盘吗?

The table

数据表当前不是很容易访问-屏幕阅读器用户很难将数据行和数据列关联在一起,并且该表也没有任何摘要可以使显示内容清晰明了. 您可以在HTML中添加一些功能来解决此问题吗?

Other considerations?

您能否列出另外两个想法进行改进,以使网站更易于访问?

Assessment or further help

如果您希望对自己的工作进行评估,或者遇到困难并希望寻求帮助:

  1. 将您的工作放入在线共享编辑器中,例如CodePenjsFiddleGlitch .
  2. MDN Discourse论坛"学习"类别中写一篇文章,要求评估和/或帮助. 您的帖子应包括:
    • 具有描述性的标题,例如"辅助功能疑难解答所需的评估".
    • 有关您已经尝试过的内容以及您希望我们进行的操作的详细信息,例如,如果您遇到困难并需要帮助,或者需要评估.
    • 联机共享编辑器中指向您要评估或需要帮助的示例的链接(如上面的步骤1中所述). 这是进入的好习惯-如果看不到他们的代码,很难帮助有编码问题的人.
    • 指向实际任务或评估页面的链接,因此我们可以找到您需要帮助的问题.

In this module