增强视力障碍者的网络用户体验

StackOverflow https://stackoverflow.com/questions/61399

  •  09-06-2019
  •  | 
  •  

题

我正在听一个 《汉塞尔分钟》最近一集 Scott Hanselman 正在讨论 Web 应用程序中的可访问性，这让我开始思考我自己的应用程序中的可访问性。

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

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

可访问性和整体用户体验不仅仅是创建有效的 XHTML 并结束。

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

有帮助吗？

解决方案 2

查看 獠牙

獠牙 是 Firefox 的浏览器内工具，可模拟屏幕阅读器在访问网页时“看到”的内容。它的功能很简单：输出屏幕阅读器在访问网页时向用户读出的内容的记录。它是一个有用的工具，可以快速分析您是否有效地构建了内容，以便视力障碍人士可以理解和使用，而无需强迫您学习使用（和购买）JAWS 或 Windows Eyes 等屏幕阅读器应用程序。

其他提示

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

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

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

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

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

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

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

  7. 我要再次强调这一点： 创建语义页面。 使用 H 为您的标题添加标签。使用 乌尔/李 用于导航。

  8. 使用 替代 属性上 全部 图片。如果你有间隔 gif...出色地..不。否则，请解释图片的含义以及它对其相关内容的意义。不要使用“图表”作为您的 alt 标签。使用“年初至今的财务图表：第一季度 5,000 美元、第二季度 4,000 美元、第三季度 8,000 美元”或类似的金额。

  9. 为所有音频和视频组件提供隐藏式字幕或文字记录

这里的关键是为人们提供视觉、听觉和 发动机 与具有标准身体能力的人具有相同的经历。如果您无法按 Tab 键进入某个字段，那么屏幕阅读器也不能。如果您无法单击复选框旁边的文本来选择它，则屏幕阅读器不知道该文本与该复选框相关。

您应该经常查看没有样式表的站点（如果您有 Firefox 和 ctrl-shift-s 网页开发者工具栏）来查看该页面是否有意义。如果它对于视力正常的人来说没有意义，那么对于使用屏幕阅读器的人来说也没有意义。

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

  1. 仅使用表格来存储数据。如果可以避免的话，不要使用表格进行布局。
  2. 使用表格存储数据时，列标题应嵌套在 TH 标签中，并且应使用标题和范围属性。您的表格标签应使用摘要属性。
  3. 所有图像都应该有一个 alt 属性值，用于描述图像中发生的情况，如果图像没有任何用途（它是填充图像或类似的图像），则 alt 属性应设置为空字符串。
  4. 尝试使用文本语音阅读器和/或仅通过键盘导航和/或关闭样式表。我相信您需要购买 JAWS，但我确信那里有免费的屏幕阅读器。您需要通过屏幕阅读器体验网站，才能真正了解在没有屏幕阅读器解释的提示的情况下导航大多数网页有多么困难。

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

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

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

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

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

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

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

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

对于视力不佳的人，我们需要确保文本不会过小，并且与背景颜色形成鲜明对比。我们还应该确保文本可以通过使用相对大小单位来调整大小，例如 嗯's 而不是像这样的绝对单位 像素（尽管在我看来，随着浏览器越来越倾向于缩放而不是文本调整大小，这已不再是一个问题）。

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

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

此外，美国盲人基金会还设立了 他们网站的一个部分专门为网络开发人员提供有关如何满足视力障碍用户需求的建议.

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top