Assessment: Accessibility troubleshooting
| 先决条件: | 基本的计算机知识，对HTML，CSS和JavaScript的基本了解，了解课程中的以前的文章。 |
|---|---|
| 目的: | 测试无障碍基本知识的基本知识。 |
初始点
要开始进行此评估，您应该访问 ZIP，其中包含构成示例的文件。 将内容解压缩到本地计算机上某处的新目录。
完成的评估网站应如下所示:
height:457px; margin:0px auto; width:800px;">
您将看到与评估的开始状态的显示有一些差异/问题 - 这主要是由于标记的差异，这又导致一些造型问题，因为CSS未正确应用。 不要担心，你会在下一节中解决这些问题！
工程概要
对于这个项目，你会看到一个虚构的自然网站，显示一个关于熊的"事实"文章。 就像它，它有一些无障碍的问题 - 你的任务是探索现有的网站，并解决他们的最好的能力，回答下面的问题。
颜色
由于当前的颜色方案，文本难以阅读。 你可以测试当前的颜色对比(文本/背景)，报告测试的结果，然后通过更改指定的颜色修复它？
语义HTML
- The content is still not very accessible — report on what happens when you try to navigate it using a screenreader.
- Can you update the article text to make it easier for screenreader users to navigate?
- The navigation menu part of the site (wrapped in
<div class="nav"></div>) could be made more accessible by putting it in a proper HTML5 semantic element. Which one should it be updated to? Make the update.
请注意:您需要更新CSS规则选择器，将样式标记设置为语义标题的正确等效。 一旦你添加段落元素，你会注意到样式看起来更好。
图像
屏幕阅读器用户目前无法访问这些图片。 你能修这个吗？
音频播放器
- The
<audio>player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users? - The
<audio>player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?
形式
- The
<input>element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders? - The two
<input>elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.
显示/隐藏注释控件
显示/隐藏注释控制按钮不是当前键盘可访问的。 你可以让键盘可以访问，无论是在使用tab键进行聚焦还是使用返回键激活它？
桌子
数据表当前不是很容易访问 - 对于screenreader用户来说，很难将数据行和列关联在一起，而且该表也没有类型的摘要来清楚显示什么。 你能添加一些功能到你的HTML来解决这个问题吗？
其他考虑？
你能列出两个更多的想法的改进，将使网站更容易访问？
评定
如果您作为有组织课程的一部分参加此评估，您应该能够将您的工作交给您的老师/导师进行标记。 如果您是自学习的，那么您可以轻松地通过 dev-mdc 邮件列表，或者在 #mdn IRC频道中。 org / IRC"class ="external"> Mozilla IRC 。 尝试练习第一 - 没有什么可以通过作弊获得！