网站可访问性的 10 项基本准则

网站可访问性的 10 项准则，可确保包括残疾人在内的所有人都可以访问您的网站。

W3C 的主席蒂姆·伯纳斯-李曾说过：“互联网的力量在于它的无处不在。”作为以制作网站为生的人，我们有责任让每个人都可以访问它们。在论文中，网络可访问性似乎是一项艰巨的任务，但实际上比听起来容易得多。

这十项原则旨在对所有网站通用。

这些指南不仅可以帮助屏幕阅读器，还可以改善在低速连接下浏览的用户体验。我们按照实施顺序排列了这些指南，以帮助您了解可以在此过程中投入多少时间和精力。在您感觉自己赢得了很多之前，请相信我的话：这篇文章充满了有用的信息，值得一读！

首先我们先来说第一件事：

什么是网络可访问性？

根据W3C标准，网络可访问性意味着任何人都可以感知、理解、浏览、交互或为网络做出贡献。即网络可达性包括影响网络接入的所有条件，包括人的视觉、听觉、身体、言语、认知和神经功能障碍等。

您可以在网上找到很多有关此主题的内容，如果您感兴趣，您可能需要查看 Web Accessibility Initiative (WAI)。

话不多说，以下是十项基本原则。

1。不依赖颜色值（约45分钟）

颜色是一个非常强大的工具。我们经常使用不同的颜色来表达或传达情感。然而，我们不能过分依赖颜色能够向用户传达的信息。为什么？例如，大多数人都知道绿色是正确的，红色是错误的，但是如果我们只用颜色来表示这些信息呢？

色盲是一种非常常见的视力障碍。它影响了世界上大约 4.5% 的人口（你知道，甚至比 IE11 用户还要多......）。

如果我们只用颜色告诉用户输入是否正确，那么4.5%的色盲人不会知道这个信息。

颜色可以帮助显示错误消息，但切勿单独使用颜色。为了保证所有用户都能正确获得即时信息，我们需要添加适当的标签或图标来表明所提供的信息是否正确。

caniuse.com 提供了一个有趣的解决方案。提供了一个调色板来显示适当的兼容性列表。

在设计过程中检查颜色对比度是否符合要求是理想的选择，因此请确保您和设计团队拥有正确的工具来检查。我们建议使用 Sketch 插件 Stark 插件来检查您的设计是否满足可访问性要求。

2。不要禁用缩放（大约五分钟）

在自适应设计时代，我们总是会犯一些损害适应性的错误。

一个常见的错误是使用maximum-scale=1.0，因为它会禁用移动设备上的缩放。

散光影响欧洲和亚洲 30-60% 的成年人，但视力模糊影响所有年龄段和国籍的人（嗨，妈妈，我说的是你！）。

允许网页缩放不仅是 WCAG 的另一条准则，也是简化这些人日常生活的工具。因此，下次您建立网站时，请考虑像我妈妈这样患有视力丧失和视力模糊的用户。

除了让用户在移动设备上自由缩放之外，是否还应该考虑桌面浏览器缩放到200%时是否仍然可以看到页面布局？

3。再次了解 alt 属性（约 45 分钟）

无论您开发网站多久，您可能仍然会惊讶地发现这些关于 alt 属性的著名但神秘的技巧。

1. alt 是所有 img 成员的必需属性，但空的 alt 属性仍然有效。如果图像是装饰性的或不需要了解其内容，您可以简单地使用 alt="" 命令。
2. 屏幕​​阅读器告诉用户此标签是图像，因此 alt 不需要任何附加信息，例如“图像的图像”，只需说出图像的内容即可。
3. 图像的功能至少与其含义一样重要：如果徽标图像直接指向网站的主页，则替代文本应该是“Home”，而不是“Logo”。
4. 的替代替换文本不仅是为了更好的可访问性。有时，数据连接速度较慢的用户会阻止图像以加快浏览速度。因此，每次编写图像的alt属性时，请记住存在这样的用户！

但是，并非您网站上的所有图像都有 img 标签，不是吗？您可以为图像使用一到两个 SVG，或者所有图标都可以是 SVG。

我们如何使 SVG 可用？幸运的是，可扩展矢量图形标准已经包含了这些内容。简短描述标签 和较长描述标签 用于描述此向量。

<symbol id="langIcon">
    <title>Language Icon</title>
    <desc>Longer description</desc>
    <path d="M0 2C6.47 2 2 6.48 2 12s4.47 10 9.99 0h24v24H0z" />
</symbol>

4。向视频添加字幕和描述

这可能是 WCAG 最难实施的标准之一。这并不是说技术实现困难，而是非常耗时。有多种方法可以实现这一目标：

1. 以 YouTube 为例。您可以在上传视频时关闭描述。此内容是自动生成的，但在某些情况下可能不准确。语言、背景噪音和说话者的口音都会影响内容的准确性。但总的来说，大多数都很容易实现，大多数英文视频摘要提取也可以正常工作。
2. 如果我们力求100%准确的描述，YouTube就没那么可靠，所以我们要么自己写视频摘要，要么找第三方准备。 YouTube可以使用最常见的字幕格式（.srt、.sub、.sbv）并允许我们在平台上填充字幕；如果你不会使用字幕软件，这个功能就非常方便了，当然我们也可以向社区求助，在不给予账号权限的情况下翻译内容。
3. 但您可能不想使用 YouTube 作为平台。也许您只在自己的服务器上使用 HTML5 视频。不用担心！ HTML5 还附带标签，因此您可以轻松添加与常用的 WebVTT 格式非常相似的各种文本描述和标题文件。

<video controls>
    <source   type="video/mp4">
    <track label="English Captions"  kind="captions"  srclang="eN"    default>
    <track label="Subtitulos en español"  kind="captions"  srclang="es"  >
</video>

5。语义 = 无障碍（约 45 分钟）

你还记得字体标签吗？我希望你不记得了，那毕竟是一段黑暗的时光。

尽管现在每个人都同意，但语义支持并不是 HTML5 固有的。自第一个 HTML 页面出现以来，语义支持就已经存在，并且自那时以来已经有了显着的改进。 HTML5 标准引入了适合日常使用的新语义标签。

那太好了，但是语义不只是为了 SEO 吗？

不是真的。当您有意识地选择标签而不是链接时，您就有意更改了元素的含义，赋予其不同的级别，并创建了页面的信息树结构。

屏幕阅读器软件不允许这样做。事实上，语义信息是一种非常有用的工具。

请记住，能力越大，责任越大，因此请确保为每个元素使用正确的语义标签，从 h1 到全新的主标签。

6。使用正确的记号（约30分钟）

还有一些容易出错、有些争议的部分想和大家讨论一下。

时间与时间日期和时间

时间元素通常可以有多种格式，例如ISO8601显示的时区格式或持续时间。日期和时间是帮助显示时间含义的可选属性之一。让我们看一个例子：

<time>14:54</time> Hours and minutes
<time>2018-06</time> Year and month
<time>-03:00</time> Time zones
<time>2h 32m</time> Harry Potter 2 Duration
<p>CSSConf Argentina took place on <time datetime=”2016-08-07”>August 7th</time></p>

Del 和 Ins

网络正在快速变化，但不要让对太多变化的恐惧阻止您关注细节。我们还可以使用 ins 和 del 以及 datetime 属性来标记内容。元素

ins 表示文档中的附加内容：

<ul>
    <li><ins datetime="2017-08-02">Icecream</ins></li>
    <li>Candy</li>
    <li>Pasta</li>
</ul>

del 表示删除的内容：

<ul>
    <li><del datetime="2017-06-05">Rewatch Harry Potter 8</del></li>
    <li><del datetime="2017-06-05">Cry because ____ dies.</del></li>
    <li><del datetime="2017-06-06">Write article</del></li>
    <li>Order room</li>
</ul>

按钮与按钮会员

拿点爆米花，下一段很棒♓。我们使用哪一个？我们来看一下：标签通常是指向当前窗口中的另一个页面或打开一个新窗口的链接。但是，如果触发某些操作（例如折叠菜单或图片库），则无法应用此标签。在这些情况下，button 元素是合适的选择，并且通常与 JavaScript 一起使用。

同样，button标签经常与input type="button"标签混淆，但两者之间的区别（通常取决于图像或文本的文字）只需等待短信）。

使用按钮标签时，一般需要考虑两点：

第一是按钮的上下文是否足够清晰（例如关闭“X”按钮），请务必添加额外的 aria -label 属性以帮助用户理解其用途。

<button aria-label="Close">X</button>

其次，如果需要使用标签（比如搜索框或者灯箱效果的相册），需要使用标签和javascript来控制效果，而不是单独使用一个标签。图片库经常使用标签和href链接，因此如果禁用js，浏览器可以正常处理点击事件。

但是...

7。如有必要，请使用角色属性（大约 1 小时）

为了告诉屏幕阅读器用户我们的链接触发操作而不是普通标签，我们需要将角色属性添加到“按钮”- 中。

但是要小心！

编写 JavaScript 时，不仅要在用户单击时调用函数，还要在用户按空格键时调用函数。这是因为用户使用键盘浏览时的行为与使用鼠标单击链接时的行为不同。两种方法都应该能够正确触发事件。

<a href="img/kitten.jpg" role="button" onclick="handleBtnClick(event)" onKeyPress="handleBtnKeyPress(event)">
    Button
</a>

function handleBtnClick(event) {        
    // Do something
}

function handleBtnKeyPress(event) {
    // Check to see if space or enter were pressed
    if (event.keyCode === 32 || event.keyCode === 13) {
        // Prevent the default action to stop scrolling when space is pressed
        event.preventDefault();
        // Do something
    }
}

更多相关内容可以在MDN上找到。

请注意，aria 属性并不总是必需的，除非您不需要像上面的示例一样遵循此规则。HTML语义元素有默认的角色，例如navigation是“导航”，reference是“链接”等。换句话说，只有在需要更改默认值时才应该使用角色属性。

8。隐藏元素（约 1 小时）

HTML 和 CSS 中有一些方法可用于隐藏元素。下表将帮助您找到应该使用的正确方法。

如果您想从视图中隐藏元素，但屏幕阅读器仍会找到它，则最后一种方法适用。

这种方法非常适合某些需要更改内容的标签或链接。VisuallyHidden伪类是CSS，您可以轻松保存以在不同项目中使用。如果您愿意，可以更改名称，像.pottersCloak，仅供参考。

9. 遵循网站可访问性标准（每周约 30 分钟）

Web 可访问性很难实现，因此有标准，但作为指导的标准很少。

读完本文后，您可能想知道：以前的规范如何工作以及我们什么时候使用它们？ display:none 和visibility:hidden CSS 规则有什么区别？

W3C 标准和 WCAG 规范乍一看可能很无聊，但实际上它们非常可靠且具有启发性。赶紧去看看吧，沉浸在信息的海洋里。我想你还会发现许多你以前从未使用过的编码练习。

10.审核和复习（约3小时）

如果你已经掌握了这些知识，就尝试一下吧。这里有一些用于检查网络可访问性的好工具。

• ChromeVox：适用于 Mac 和 Windows 用户，您可以使用此 Chrome 扩展程序测试您的网站。
• 适用于 Chrome 的辅助功能开发人员工具：您可以每天使用的另一个浏览器扩展来测试辅助功能。
• 滤色镜：用于测试您网站的配色是否适合色盲和色弱人士。
• W3C 验证器：W3C 的官方测试工具，可确保您的 HTML 满足网络可访问性要求。
• A11Y 合规平台：互联网可访问性审查局 (BOIA) 会生成一份评估报告，概述您的网站相对于一些关键 WCAG A/AA 点的得分。
• WAVE：WebAIM 开发的网络可访问性评估工具。

Aerolab 在网络可访问性方面的经验

我们始终努力让测试成为日常工作习惯。我们的下一个产品应该总是比上一个更好。我们会犯错误，但我们不断改变和发展，并始终从挑战中学习。

我们希望我们的产品能够始终为用户提供最好的体验，这也是我们从一开始就逐步将我们的产品适配为无障碍标准的原因。

“路漫漫其修远兮，吾将上下而求索”。但我们很庆幸自己选择了这条路。

下面的网站是我们为Xapo所做的示例，您可以根据可访问性标准查看我们是如何做的。

Xapo 的主页和商店页面满足上述条件 1、3、5、6、7 和 9。虽然我们还没有100%满足您的要求2和7，但我们一直在朝这个方向努力，那么实施和测试就会容易得多。