开发人员的Web可访问性标准

Web可访问性标准非常重要。对于网页开发者来说，了解一些网页无障碍标准是很有必要的，这样才能创造更好的访问体验。然而，一个问题是公认的W3CWeb内容可访问性指南（WCAG，现在是2.1版）在实践中过于复杂。每条规则都非常复杂，当您阅读每个令人头脑麻木的段落时，感觉越来越偏离为每个人创造出色用户体验的真正目的。归根结底，我们要为人们开发Web应用程序，而不是为规则开发Web应用程序。我们应该能够确定真正的变化，这些变化可以使我们的产品和网站对任何用户的体验都更好。在这篇文章中，我们从《Practical Web Inclusion and Accessibility》中挑选了一些关于Web无障碍的基本规则和标准，希望它们能为大家提供一个起点，开始思考和实施当今的无障碍标准。本文中的Web可访问性标准概述总结了AshleyFirth的《Practical Web Inclusion and Accessibility》2019年关于Web可访问性的优秀书籍。这本书的设计没有考虑任何角色，因为Web可访问性标准得到整个团队的最好支持。本书对所有Web开发人员都非常有价值。本书包含许多代码片段和简单的说明，供开发人员实施Web可访问性标准。这本书还旨在帮助批判性地思考如何为残疾人解决问题。因此，这本书围绕各种永久性和暂时性残疾进行组织，将残疾定义为与他们互动的世界有关系的人。书中的章节涵盖了失明、低视力和色盲、运动障碍、耳聋和听力障碍、认知障碍、心理健康等等，当然还有许多其他案例在书中没有涉及。本书的重点是同理心，而不是规则或系统，这是我们在优先考虑以下高级技能时应该采用的哲学。良好的网络可访问性标准与普遍看法相反，视力障碍不一定是使用互联网的障碍。如果网站设计得当，就很容易吸引视力不佳的用户，他们可以像其他人一样拥有丰富的在线体验。以下Web可访问性标准与盲人特别相关。盲人通常通过屏幕阅读或脆弱的软件与网络互动。使用语义标记和位置ARIA角色div不能为其包含的内容提供上下文，但我们一直使用div。对于使用读屏软件的访问者来说，只能看到大量的div标签行，却看不懂页面的位置。它是页面的开头、中间还是结尾？为用户提供上下文有两种解决方案：语义标记和ARIA角色。语义标签是像标题、部分、主要、导航和页脚这样的标签。header、main、footer标签大家可能都不陌生，它们可以很方便的添加到任何html页面中。ARIA角色提供的上下文类似于语义标记。区别：属性可以添加到任何标签，包括div。例如，和是等价的。在图片中添加alt作为描述Alt标签对很多类型的用户都很有价值，它们帮助用户理解他们无法感知的内容。例如，对于视力受损的用户来说，比如说可以看到大型彩色图像但没有替代文本的用户，他们无法知道图像显示的内容。写得好的替代文本很容易被误解，因为替代文本的作者可能倾向于标记图像而不是用它来感知图像。有关编写图像替代文本的有用建议，请参见下表：替代文本的官方指南可在WebAIM网站的替代文本部分找到。添加语言属性lang属性经常被遗忘，但对于用户以预期语言在屏幕阅读设备上体验页面来说是必不可少的。lang属性在html标签中。例如：对于英语，您可以将值设置为en。可以通过脚本和子选项卡获取更具体的信息。…创建“跳至内容部分”链接以在文档顶部添加一个链接，以允许屏幕阅读器用户选择跳过常见的重复内容，例如徽标和主导航.用户可以直接进入页面的主要内容。您可以通过在用户每次登陆新页面时为他们提供简单的导航选项来改善用户体验，而不是经历相同的“欢迎序列”。可以使用CSS在视觉上隐藏此链接，但仅当用户使用键盘导航到它时才可见。要添加此类链接，请参见以下示例：HTML:跳到内容…CSS...低视力是那些罕见的可访问性领域之一，修复障碍实际上可能为其他用户制造障碍。实用的Web包容性和可访问性低视力或色盲的用户可能非常多样化。一项针对低视力用户的协作调查发现，用户既可以放大屏幕查看屏幕，也可以使用屏幕阅读器对其进行增强。因此，屏幕和屏幕阅读器之间的一致性非常重要。尽管残障用户的体验各不相同，但以下Web访问标准对视力不佳或色盲的用户特别有用。使用相对大小而不是像素来显示字体大小使用像像素这样的固定测量值可能不利于使用放大的测量值。像素大小的文本会忽略用户偏好。如果14px的字号太小，放大后还是会太小，改用rem或者em这样的单位。这些测量单位不会影响用户偏好，并带来更灵活的阅读体验。测试颜色对比度和文本大小高颜色对比度和文本大小可以改善所有人的体验，但是，我们在设计中仍然使用小文本大小和浅灰白色文本作为弱化文本的方式。一般来说，我们应该以高对比度为目标，并尝试增加基本字体大小并优先考虑可读字体。不要使用不同的颜色来指示状态在许多设计中，红色和绿色等颜色用于指示状态。如果只是这些指标，那些患有常见色盲类型的人可能不会察觉到差异或发现它具有挑战性。红绿色盲的人更容易区分浅绿色和深红色。但是，浅绿色和浅红色指示状态可能更难区分。可以使用颜色以外的指示剂。例如，图标也可以用作指示器。移动障碍的顶级Web可访问性标准是否曾经尝试过不用鼠标浏览网站？这比您想象的要难，尤其是当您需要跨多个页面执行某个操作时，例如注册或购买某物。一些行动不便的用户通常只使用键盘与计算机交互。以下Web可访问性标准对那些有运动障碍并使用键盘浏览网页的人很有帮助。使用焦点样式默认情况下，当使用tab按钮时，元素周围有一个蓝色的光，但是很多设计者可能会去掉这个样式，因为他们可能会觉得不舒服，使用CSS样式干脆去掉焦点指示符：*:focus{大纲：0；可以想象，移除焦点是一个大问题。拥有清晰的焦点风格是非常宝贵的，因此请考虑创建既有品位又明显的焦点指示器。作为开发人员，在我们的应用程序中切换并注意焦点指示器何时不明显是很重要的。还要小心模态等叠加层。确保关闭按钮很明显并且可以使用键盘访问。避免悬停内容在下拉导航等元素中，悬停状态被触发为键盘上的焦点区域。但这里有一个问题：当顶级项目被移出时，菜单会折叠。此外，如果屏幕阅读器在内容上设置了visibility:hidden或display:none，它们将不会阅读内容。如果使用下拉导航，使元素不可见，但对屏幕阅读器仍然可见。绝对定位可以用与“跳到主要内容”链接相同的方式来完成。如果我这样解决问题，键盘仍然可以触及内容，但它仍然不可见。该问题的解决方案是允许菜单在单击时永久展开。针对聋人和听力障碍者的出色Web可访问性标准乍一看，这些用户会遇到类似的访问需求——听觉信息必须以其他方式传达。实际上，还有很多，重要的是要记住，不同的聋人用户对如何接收这些信息有不同的偏好。使用track元素添加字幕和字幕操作在HTML中，您可以微调字幕控制。使用HTMLtrack元素可以将多个字幕文件添加到不同语言的视频中。字幕的常见文件格式是.vtt或网络视频文本轨道格式。您还可以使用CSS设置字幕样式。您可以为video::cue或audio::cue选择字幕本身的样式。撰写标题时，务必牢记行动和对话。可以使用方括号指示操作。例如，[吐出饮料]。总之，上述Web可访问性标准是一组很棒的标准，可以让我们的网站大大改善残障人士的可访问性体验，但仍有很多东西需要学习，尤其是涉及处理表单等复杂网站时和在线支付体验。互动的时候。