我正在听Hanselminutes的最近一集，其中Scott Hanselman讨论了Web应用程序中的可访问性，这让我开始思考自己应用程序中的可访问性。

我们都理解语义标记在Web应用程序中的重要性，因为它与可访问性有关，但是可以进行其他一些简单的增强来改善残障用户的用户体验又如何呢？

在这一集中，有好几次我都拍打额头说："当然！为什么我没有那样做？"特别是，斯科特(Scott)谈到了一个网站，该网站在网页的顶部放置了一个隐藏链接，上面写着"跳至主要内容"。该链接仅对使用屏幕阅读器的用户可见，并且允许他们的屏幕阅读器跳过菜单和其他辅助内容。这是一个明显的改进，但是很容易想到。

除了简单地创建有效的XHTML并每天调用它之外，可访问性和整体用户体验还更多。

我们有哪些简单的技巧可以改善视力障碍者的用户体验？

解决方案

回答

屏幕阅读器最大的问题通常是用于在页面上放置内容的表格。屏幕阅读器无法真正处理这些问题。将内容放入html的div中，并按合理的顺序放置。然后使用CSS将div放置在页面上。使用表格来显示应该在表格中的内容。

回答

"视力受损"包括色盲。我曾经和一个不能很好地将红色与绿色区分开的人一起工作，所以任何使用交通信号灯风格界面的应用程序都很难被他使用。在我们从事的行业中，警报行采用了颜色编码，因此另一种显示形式对他很有用，例如该行中的额外一列带有警报类型的文本("紧急"，"警告"等)。

回答

许多网页的代码结构如下：

• 标头
• 顶部导航
• 向左导航
• 内容
• 页脚

如果采用这种结构，则"跳过主要内容"的隐藏链接将很有用。但是，使用CSS布局，我们可以对它进行重新排序，以便：

• 内容
• 标头
• 顶部导航
• 向左导航
• 页脚

然后，我们可以使用CSS定位和浮动控件在屏幕上四处移动这些不同的元素，以使页面看起来像我们想要的样子。

以这种方式构造网页的主要优点是，如果浏览器不支持CSS，则内容首先位于页面上。除了屏幕阅读器之外，这对于移动设备和搜索引擎蜘蛛也很有用。

回答

对于部分失明的人，我们需要确保文本不会过小并且与背景色​​形成实质性的对比。我们还应该通过使用相对大小单位(例如em)而不是绝对单位(例如px)来确保文本可调整大小(尽管在我看来，由于浏览器越来越倾向于缩放文本而不是缩放大小，这已不再是问题。

对于屏幕阅读器的用户，了解屏幕阅读器的实际使用方式很有帮助。以下文章基于盲人使用屏幕阅读器浏览网络的观察结果提供了指导；现在有点过时了，但是让我们对可以帮助屏幕阅读器用户，以及不能帮助屏幕阅读器的用户有很好的感觉：

http://redish.net/content/papers/interactions.html

此外，美国盲人基金会的网站上有一部分专门为网络开发人员提供有关如何迎合视力障碍用户的建议。

除了视觉障碍者外，我们还需要考虑那些妨碍他们使用鼠标的残障人士以及神经系统残障人士。如果任何人都可以提供资源，就如何迎合这些人提供建议，那将是很好的。

回答

自从我从事一项必须遵守第508节的工作以来已经有一段时间了，但是我记得这是其他海报还没有涉及到的……

• 仅将表用于数据。如果可以避免，请勿使用表格进行布局。
• 在将表用于数据时，列标题应嵌套在TH标签中，并且应使用title和scope属性。表标签应使用summary属性。
• 图像都应具有alt属性的值，该值描述图像中发生的事情，如果图像无用(是匀场图像或者类似图像)，则应将alt属性设置为空字符串。
• 尝试将文本用于语音阅读器和/或者仅通过键盘导航和/或者关闭样式表。我相信我们需要购买JAWS，但是我敢肯定那里有免费的屏幕阅读器。我们需要通过屏幕阅读器来体验网站，以真正了解大多数网页在没有屏幕阅读器解释的提示的情况下导航的难度。

回答

如果我们从未完成过创建可访问页面的工作，那就很难考虑了。但是，一旦学习了基本概念，在95％的情况下就很容易做到。我将主要重复别人所说的话，但是：

• 仅将表格用于表格数据
• 确保使用通过HTML提供的语义工具。这意味着将TH与scope属性一起使用。使用<em>代替<i>，并使用<strong>代替<b>。使用首字母缩写词和缩写。使用定义列表。如果有人愿意，我可以扩展这些事情。
• 最重要的事情之一是在输入字段上使用标签标签。对于每个输入字段，单选按钮，复选框和文本输入，我们应该具有：<label for =" username">用户名：</ label> <input name =" username" />
• 根据大块文本的位置添加"跳过导航"或者"跳过导航"。如果我们在政府网站上工作，这应该是第二天性，即我们创建的所有内容都允许我们跳过重复信息。
• 请勿使用颜色进行强调。
• 确保我们所有的文本都可调整大小。这几乎意味着不要在CSS中使用" px"。
• 我将再次强调这一点：创建语义页面。对标题使用H标签。使用ul / li进行导航。
• 在所有图像上使用alt属性。如果我们有间隔gif ...好吧..不要。否则，请解释图片的含义及其与内容关联的意义。不要将"图表"用作alt标签。使用"年初至今融资图表：$ 5,000 Q1，$ 4,000 Q2，$ 8,000 Q3"或者类似内容。
• 为所有音频和视频组件提供隐藏式字幕或者字幕记录

关键是要为那些视觉，听觉和运动障碍的人提供与标准身体功能的人相同的体验。如果我们无法在字段中输入标签，那么屏幕阅读器也不会。如果无法单击复选框旁边的文本以将其选中，则屏幕阅读器将不知道该文本与该复选框有关。

我们应该经常查看没有样式表的网站(如果我们使用Firefox和Web Developer Toolbar，则应使用ctrl-shift-s)，以查看该页面是否有意义。如果这对于作为有识之士的个人来说没有意义，那么对于使用屏幕阅读器的人来说则没有意义。

回答

看看F牙

Fangs是Firefox的浏览器内工具，它模拟访问网页时屏幕阅读器看到的内容。它的功能很简单：在访问网页时，向用户输出屏幕阅读器将向用户输出的文字记录。它是一种有用的工具，可以快速分析我们是否有效地构造了内容，以使视障人士可以理解和使用它，而不必强迫我们学习(购买)屏幕阅读器应用程序，例如JAWS或者Windows Eyes。