6

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

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

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

可访问性和整体用户体验不仅仅是简单地创建有效的 XHTML 并称之为一天。

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

4

7 回答 7

4

如果您从未做过，那么创建可访问的页面是一件很难想象的事情。但是，一旦您了解了基本概念，95% 的情况下就很容易做到。我将主要重复其他人所说的话，但是：

  1. 仅将表格用于表格数据
  2. 确保您使用通过 HTML 提供给您的语义工具。这意味着将 TH 与范围属性一起使用。使用 <em> 代替 <i> 和 <strong> 代替 <b>。使用首字母缩写词和缩写标签。使用定义列表。如果有人愿意，我可以扩展这些内容。

  3. 最重要的事情之一是在输入字段上使用标签标签。对于每个输入字段、单选按钮、复选框和文本输入，您应该拥有：

    <label for="username">用户名：</label><input name="username" />

  4. 根据大块文本的位置添加“跳过导航”或“跳到导航”。如果您在政府网站上工作，这应该是您创建的所有内容都允许您跳过重复信息的第二天性。

  5. 不要使用颜色来强调。

  6. 确保所有文本都可以调整大小。这几乎意味着不要在你的 CSS 中使用“px”。

  7. 我将再次强调这一点：创建语义页面。为您的标题使用H标签。使用ul / li进行导航。

  8. 在所有图像上使用alt属性。如果你有一个间隔 gif ......好吧......不要。否则，请解释图片是什么以及它对相关内容的意义。不要使用“图表”作为您的 alt 标签。使用“YTD 财务图表：第一季度 5,000 美元、第二季度 4,000 美元、第三季度 8,000 美元”或类似内容。

  9. 为所有音频和视频组件提供隐藏式字幕或成绩单

这里的关键是为有视觉、听觉和运动障碍的人提供与具有标准身体能力的人相同的体验。如果您无法进入某个字段，那么屏幕阅读器也不能。如果您无法单击复选框旁边的文本以将其选中，则屏幕阅读器不知道该文本与复选框相关。

您应该经常查看没有样式表的站点（如果您有 Firefox 和Web Developer Toolbar ，请按 ctrl-shift-s ）来查看页面是否有意义。如果这对视力正常的人来说没有意义，那么对于使用屏幕阅读器的人来说也没有意义。

于 2008-09-17T14:14:45.560 回答
4

看看獠牙

Fangs是 Firefox 的浏览器内工具，它模拟屏幕阅读器在访问网页时“看到”的内容。它的功能很简单：在访问网页时输出屏幕阅读器将向用户读出的内容的副本。这是一个有用的工具，可以快速分析您是否有效地构建了内容，以便视力受损的人可以理解和使用它，而不会强迫您学习使用（和购买）屏幕阅读器应用程序，例如 JAWS 或 Windows Eyes。

于 2008-11-19T03:27:36.157 回答
3

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

  1. 仅将表格用于数据。如果可以避免，请不要使用表格进行布局。
  2. 当使用数据表时，你的列标题应该嵌套在 TH 标签中，你应该使用 title 和 scope 属性。您的表格标签应使用摘要属性。
  3. 图像都应该具有描述图像中发生的事情的 alt 属性的值，如果图像没有任何用途（它是 shim 图像或类似的东西），则 alt 属性应该设置为空字符串。
  4. 尝试使用文本到语音阅读器和/或仅通过键盘导航和/或关闭样式表。我相信您需要购买 JAWS，但我敢肯定那里有免费的屏幕阅读器。您需要通过屏幕阅读器体验网站，才能真正了解在没有屏幕阅读器解释的提示的情况下浏览大多数网页的难度。
于 2008-09-16T19:31:30.063 回答
2

“视力受损”包括色盲。我曾经和一个不能很好地区分红绿的人一起工作，所以任何使用红绿灯风格界面的应用程序对他来说都很难使用。在我们工作的行业中，行中的警报是用颜色编码的，因此另一种形式的显示对他很有用，例如在行中有一个额外的列，其中包含警报类型的文本（“紧急”、“警告”等）。

于 2008-09-14T15:56:01.130 回答
1

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

于 2008-09-14T15:23:41.097 回答
1

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

  1. 标题
  2. 顶部导航
  3. 左侧导航
  4. 内容
  5. 页脚

以这种方式构建时，“跳到主要内容”的隐藏链接是有益的。但是，使用 CSS 布局，您可以重新排序，以便您拥有：

  1. 内容
  2. 标题
  3. 顶部导航
  4. 左侧导航
  5. 页脚

然后，您使用 CSS 定位和浮动在屏幕上移动这些不同的元素，使页面看起来像您想要的那样。

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

于 2008-09-14T15:57:26.740 回答
1

对于部分视力不佳的人，我们需要确保文本不会过小并且与背景颜色形成显着对比。我们还应该通过使用诸如em之类的相对大小单位而不是诸如px之类的绝对单位来确保文本可调整大小（尽管在我看来，随着浏览器越来越倾向于放大文本大小调整，这已不再是一个问题） .

对于屏幕阅读器的用户来说，了解屏幕阅读器的实际使用方式会很有帮助。以下文章基于对使用屏幕阅读器浏览网页的盲人的观察提出了指导方针；它现在有点过时了，但让您很好地了解什么会帮助屏幕阅读器用户，什么不会：

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

此外，美国盲人基金会在其网站上有一个部分专门为网络开发人员提供有关如何满足视力受损用户的建议。

除了视力障碍者之外，我们还需要考虑那些阻止他们使用鼠标的残疾人，以及那些有神经障碍的人。如果有人可以提供有关如何满足这些人的建议的资源，那就太好了。

于 2008-09-14T16:22:11.423 回答