写给开发人员的Web无障碍标准 _Web无障碍标准

网络可访问性标准很重要，对Web开发人员，必须要解知识一些应Web可访问性标准，以便创造更好的访问体验。然而，有在一个问题实践中公认的W3C Web内容可访问性指南（WCAG，现在是2.1版本）太复杂了。每条规则都繁深奥无比，在阅读每段令人麻木的规则时，会让人感到越来越偏离真正的初衷——为每个人创造出色的用户体验。
归根结底，我们希望为人们而不是为规则开发Web应用程序。我们应该能够找出真正的变化，可以让我们的产品和网站体验对任何用户都更佳。本文中我们节选了《Practical Web Inclusion and Accessibility》的关于Web无障碍的一些基本规则和标准，希望它们为大家提供一个起点，开始思考和实施当今的无障碍标准。

文章插图

概述本文中的Web无障碍标准概括了Ashley Firth于2019年撰写的《Practical Web Inclusion and Accessibility》的关于Web无障碍的最佳书籍。本书设计时没有考虑任何角色，因为网络可访问性标准最好由整个团队共同支持。这本书对于Web开发人员来说都非常有价值。本书包含许多代码段和简单的说明，供开发人员实现Web可访问性标准。

这本书还旨在帮助批判性地思考如何为有身体障碍的人士解决问题。因此，这本书围绕永久性和暂时性的各种残疾进行了组织，将残疾定义为与与其互动的世界有关系的人们。书中的章节包括失明，低视力和色盲，运动障碍，耳聋和听觉障碍，认知障碍，心理健康等等，并承认书中没有涉及更多多其他案例。
【写给开发人员的Web无障碍标准】本书的重点是同理心，而不是规则或系统，这是我们在优先考虑以下高级技能时应该采用的哲学。
顶级的Web无障碍标准与通常的看法相反，视力障碍不一定是使用互联网的障碍。如果网站设计合理，很容易将视力不佳的用户包括在内，他们可以像其他任何人一样拥有丰富的在线体验。以下网络可访问性标准特别适合那些盲人。盲人通常通过屏幕阅读或脆弱的软件与网络互动。
使用语义标记和位置ARIA角色一个div无法为它所包含的内容提供上下文，但是我们一直都在使用div 。对于使用屏幕阅读软件的访问者，只能看到大大堆的divs标签行，而无法了解页面的位置。
究竟是页面开始，中间还是末尾呢？
有两种为用户提供上下文的解决方案：语义标记和ARIA角色。
语义标记是类似header，section，main，nav，和footer一样的标签。对于header，main和footer标签标签，大家可能都熟识，可以很方便的添加的任何html页面中。
ARIA角色提供的上下文类似于语义标记。
区别：可以将属性添加到任何标签，包括div 。
例如，<div role="navigation"></div>和<nav></nav>等效。
为图片添加alt为说明Alt标签对许多类型的用户都很有价值，它们可以帮助用户了解他们无法感知的内容。
例如，在有视障用户进行用户，比如对于一个能够看到大型彩色图像的用户，但是没有alt文本，他们无法知道图像显示了什么。
编写好的alt文本很容易被误解，因为alt文本的编写者可能会倾向于标记图像而不是用于感知图像。
有关编写图像alt文本的有用建议，请参见下表：

文章插图

有关al文本的官方指南，可参阅WebAIM网站上的alt文本部分。
添加语言属性该lang属性通常被遗忘，但是对于用户而言，以一种预期的语言体验在屏幕阅读设备上的页面至关重要。lang属性位于html标签中。例如：对于英语，可以将值设置为en 。可以通过脚本和子标签获得更具体的信息。
<html lang="en">
…
</html>
创建"跳至内容部分"链接可以在文档顶部添加一个链接，以允许屏幕阅读器用户选择跳过常见的重复性内容，例如徽标和主导航。用户可以直接进入页面主要内容。每次用户进入新页面时，都可以通过为他们提供简单的导航选项，而不是执行相同的"欢迎序列"来改善他们的体验。可以使用css直观地隐藏此链接，但是当用户使用键盘导航到该链接时，该链接才可见。
要添加这样的链接，可参见下面的例子：
HTML:
<a class="skip-to-content" href=https://www.isolves.com/it/cxkf/cxy/2020-06-15/"#content">跳到内容部分
<main id="content">…</main>