Enhancing the web user experience for the vision impaired我正在听Hanselminutes的最近一集，其中Scott Hanselman讨论了Web应用程序中的可访问性，这让我开始思考自己应用程序中的可访问性。 我们都理解语义标记在Web应用程序中的重要性，因为它与可访问性有关，但是可以进行其他一些简单的增强来改善残障用户的用户体验又如何呢？ 在那集中，有好几次我拍额头说："当然！为什么我没有那样做？"特别是，斯科特(Scott)谈到了一个网站，该网站在网页的顶部放置了一个隐藏链接，上面写着"跳至主要内容"。该链接仅对使用屏幕阅读器的用户可见，并且允许他们的屏幕阅读器跳过菜单和其他辅助内容。这是一个明显的改进，但是却很容易想到。 除了简单地创建有效的XHTML并每天调用它之外，可访问性和整体用户体验还更多。 您有哪些简单的技巧可以改善视障人士的用户体验？ 看看F牙 Fangs是Firefox的浏览器内工具，它模拟屏幕阅读器在访问网页时所看到的内容。它的功能很简单：在访问网页时向用户输出屏幕阅读器将向用户输出的文字记录。这是一个有用的工具，可用于快速分析您是否有效地构造了内容，以使视障人士可以理解和使用它，而不必强迫您学习(购买)屏幕阅读器应用程序(例如JAWS或Windows Eyes)。 如果您从未完成过创建可访问页面的工作，那就很难考虑。但是，一旦学习了基本概念，在95％的情况下就很容易做到。我将主要重复别人所说的话，但是： 最重要的事情之一是在输入字段上使用标签标签。对于每个输入字段，单选按钮，复选框和文本输入，您应该具有：
根据大块文本的位置添加"跳过导航"或"跳过导航"。如果您在政府网站上工作，那应该是第二天性，即所创建的所有内容都允许您跳过重复的信息。 请勿使用颜色进行强调。 确保您所有的文本都可调整大小。这几乎意味着不要在CSS中使用" px"。 我将再次强调：创建语义页面。对标题使用H标签。使用ul / li进行导航。 在所有图像上使用alt属性。如果您有间隔gif ...好吧。否则，请解释图片的含义及其与内容关联的意义。不要将"图表"用作您的alt标签。使用"年初至今融资图表：$ 5,000 Q1，$ 4,000 Q2，$ 8,000 Q3"或类似内容。 为所有音频和视频组件提供隐藏式字幕或字幕记录 关键是要为那些视觉，听觉和运动障碍的人提供与标准身体功能的人相同的体验。如果您无法在字段中切换，则屏幕阅读器也不会。如果无法单击复选框旁边的文本以将其选中，则屏幕阅读器将不知道该文本与该复选框有关。 您应该经常查看没有样式表的站点(如果您使用Firefox和Web Developer Toolbar，则应使用ctrl-shift-s)，以查看该页面是否有意义。如果这对于作为有识之士的个人来说没有意义，那么对于使用屏幕阅读器的人来说则没有意义。 自从我从事一项必须遵守《 508节》的工作以来已经有一段时间了，但是我记得这是其他海报并没有提及的…… "视力受损"包括色盲。我曾经与无法很好地将红色与绿色区分开的人一起工作，因此任何使用交通信号灯风格界面的应用程序都很难使用。在我们从事的行业中，行警报使用了颜色编码，因此另一种显示方式对他很有用，例如行中额外的一列带有警报类型的文本("紧急"，"警告"等)。 对于部分视线不佳的人，我们需要确保文本不会过小，并且不会与背景色形成实质性的对比。我们还应该通过使用相对大小单位(例如em)而不是绝对单位(例如px)来确保文本可调整大小(尽管在我看来，由于浏览器越来越倾向于缩放文本而不是缩放大小，这已不再是问题。) 对于屏幕阅读器的用户，了解屏幕阅读器的实际使用方式很有帮助。下面的文章基于盲人使用屏幕阅读器浏览Web的观察结果提供了指导；现在有点过时了，但是让您对可以帮助屏幕阅读器用户，以及不能帮助屏幕阅读器的用户有很好的感觉： http://redish.net/content/papers/interactions.html 此外，美国盲人基金会网站上有一部分专门为网络开发人员提供有关如何迎合视力障碍用户的建议。 除了视障人士外，我们还需要考虑那些妨碍他们使用鼠标的残障人士以及神经系统残障人士。如果任何人都可以提供资源，就如何迎合这些人提供建议，那将是很好的。 许多网页的代码结构如下： 如果采用这种结构，则"跳过主要内容"的隐藏链接将很有用。但是，使用CSS布局，您可以对它进行重新排序，以便： 然后，您可以使用CSS定位和浮动控件在屏幕上四处移动这些不同的元素，以使页面看起来像您想要的样子。 以这种方式构造网页的主要优点是，如果浏览器不支持CSS，则内容首先位于页面上。除了屏幕阅读器之外，这对于移动设备和搜索引擎蜘蛛也很有用。 屏幕阅读器最大的问题通常是用于在页面上放置内容的表格。屏幕阅读器无法真正处理这些问题。将内容放入html的div中，并按合理的顺序放置。然后使用CSS将div放置在页面上。使用表格来显示应该在表格中的内容。 |
