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

Question

我在听recent episode of Hanselminutes时，S​​cott Hanselman在讨论Web应用程序中的可访问性，这让我开始思考自己应用程序中的可访问性。

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

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

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

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

Answer 1

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

仅将表格用于表格数据

确保使用通过HTML提供的语义工具。这意味着将TH与scope属性一起使用。使用代替，并使用代替。使用缩写和缩写标记。使用定义列表。如果有人愿意，我可以扩展这些事情。

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

用户名: <输入名=“username”/>

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

不要将颜色用于强调。

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

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

在所有图像上使用 alt 属性。如果您有间隔gif ...好吧..不要。否则，请解释图片的含义及其与内容关联的意义。不要将“图表”用作您的alt标签。使用“年初至今融资图表:$ 5,000 Q1，$ 4,000 Q2，$ 8,000 Q3”或类似内容。

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

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

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