网络无障碍初学者

介绍

创建易于访问的应用程序或网站并不是今天的常态,这是因为大多数开发人员都知道易于访问的想法,而实际上它往往被忽视,而不是今天在网络开发领域的常见做法。

在本教程中,您将了解 Web 可访问性对开发人员意味着什么,它如何影响 Web 用户,以及如何改进应用程序和工具,以利用和提高工作流中的可访问性。

什么是 Web 可用性?

Web 可用性或 a11y 通常被称为是设计和开发网站、工具和技术的实践,以便残疾人可以使用它们。

易用性通常被称为a11y,因为在易用性一词中有A和Y之间的11个字母。

可访问性是关于让网络对每个人都具有访问性,这包括所有形式的残疾人,包括:

认知
神经学
身体
语音
视觉
听力障碍

可访问性包括残疾,但还包括使用网络的人有以下限制的情况:

互联网连接不良
临时伤害,例如手臂断裂
使用智能手表或智能电视等小屏幕设备的人

POUR 原则

POUR原则是构建易于访问的网站的指导方针,该原则有助于将人们置于这个过程的中心。

可感知:网页上的内容应该可感知。这意味着网页应该通过浏览器或通过屏幕阅读器、屏幕放大器等辅助技术
可操作:网页上的内容必须可操作。这意味着用户可以通过鼠标、键盘或辅助设备与所有控制和交互元素进行交互。如果内容无法导航,则无法访问
可以理解:网页上的内容应该是清晰、简洁和易于理解的。尽可能地尝试减少拼写错误和复杂的语法。这是因为网页开发人员永远不应该为用户假设相同的知识
可靠:在网页上保持一致性非常重要。这是什么意思?你正在最大限度地提高构建

技巧让您的网站在网络上可用

有几种方法可以帮助将可访问性纳入你的常规程序,当建立网站. 这些技巧大多数可以实现,而不会影响您的网站的整体外观和感觉。

添加图像替代文本:当您在网站中使用图像时,人们错过的一件重要事情是将alt="属性添加到图像中。

1<img src="./cat.png' alt="A cat sitting on a chair">

所有图像中具有 alt 属性,而不包括它之间的主要区别在于,屏幕阅读器可以向视觉和认知障碍的人宣布 alt 标签。一个重要指南是确保 alt 描述是相关的,这意味着它应该描述实际图像的内容和意图。

使用语义HTML:这是许多开发人员忽略的另一个重要规则. 大多数开发人员使用div来表示一切,而忘记对标题,列表和表的适当标签。HTML5提供了额外的元素,如<nav>,<section>和<aside>,以更好地构建您的内容。

 1<body>
 2  <header>
 3    <h1>Shop</h1>
 4  </header>
 5  <main>
 6    <article>
 7      <h2>An inside look at the new Shop v2</h2>
 8      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 9    </article>
10  </main>
11  <footer>
12    <p>© Shop Inc.</p>
13  </footer>
14</body>

始终提供跳过主内容的选项:对于依赖屏幕阅读器和键盘的用户来说,这个功能非常重要,因为它提供了跳过主内容的选项。实现这一方法是通过添加跳过主内容的链接,使其看不见,直到元素获得键盘焦点。一个例子是 BBC.com 官方网站。使用键盘导航时,在键盘专注于该元素并可见时提供跳过主内容的选项
识别页面语言和语言变化: 始终记住使用 HTML 标签中的lang属性来表示每个页面的主要语言。

1<html lang="en">
2<head>
3  ...
4</head>
5<body>...</body>
6</html>

将标签与每个表单元件相关联: 只要可能,使用标签元素以明确地将文本与表单元件相关联。标签的for属性必须准确匹配表单控制的id。在特定情况下,可以视觉地隐藏<label>元素,但在大多数情况下,需要标签来帮助所有读者理解所需的输入。

1<form>
2  <label for="username">Username</label>
3  <input type="text" name="username" id="username">
4  <label for="email">Email</label>
5  <input type="email" name="email" id="email">
6</form>

在构建可访问的网站时使用的工具

有无数的工具可帮助您构建易于访问的网站. 以下是您可以使用的几个工具来使您的网站更易于访问,并了解更多关于 a11y 的信息:

您可以从已编制的 Web 可访问性评估工具列表(https://www.w3.org/WAI/ER/tools/)中找到更多工具,以及一些其他一般资源:

结论

在本文中,您了解了网页可访问性是什么,以及具有不同能力的用户使用易于访问的网站意味着什么。您还了解了您可以使用的各种方法来使网站可访问所有用户。