初学者的Web Accessibility指南

Web Accessity最近一直在脑海中。与经验丰富的软件工程师交谈并参加React.js Girls活动以Sophie Koonin作为扬声器，都强调了Web可访问性的重要性。它让我感到惊讶的是，许多美国公司不需要Web Accessibility功能。

当您想到的Web可访问性时，大多数人都会想到只是将Alt文本添加到图像中，但它有更多的东西！本文是初学者＆＃39;网页辅助功能指南，并列出了一些简单的方法，使您的网站更可访问。

技术和网络应该让人们的生活更容易。可访问性意味着创建一个网站（无论该人的物理，认知或当前能力是什么）都可以导航，互动和贡献该网站。

Sophie有一个来自Microsoft包容性设计工具包的伟大报价，强调了创建网站时网络可访问性的重要性。

''如果我们使用自己的能力和偏见作为起点，我们最终会获得专为特定性别，年龄，语言能力，技术识字和物理能力而设计的产品。那些具有具体获取金钱，时间和社交网络的人。“

开发人员通常不会在开发时以主意的最前沿。但一个人应该！毕竟，Web是为所有人使用的，所以我们不应该确保所有网站都可以由每个人使用？

自从有许多类型的残疾人才能考虑，有很多需要考虑。 Web内容可访问性指南理解这一点并将核心概念分解为4个原则。

可感知：用户必须能够在某种程度上以某种方式感知它。

可操作：用户必须能够控制UI元素（例如，必须以某种方式可点击按钮 - 鼠标，键盘，语音命令等）。

强大：必须使用良好采用的Web标准开发内容，现在和将来会在不同的浏览器上工作。

以下是您可以做些什么来使您的网站更可访问的简短列表。请注意，有很多东西和残疾人才能解释，这个大纲是你能做的最少。请阅读WC3文档以获得完整的指南。

不要使用颜色作为唯一可以告诉用户某些信息的方法。这有助于无法从另一个颜色判断出一种颜色的用户。这对于错误消息，尤其是用户输入非常重要。这可以帮助那些是色盲的人（12名男子和200名女性1人中1人），低视野（30人中有1人），或盲人（188人1人）。您可以使用文本或图标来指示用户需要的字段或出现错误，而不是依赖颜色。

使用图像时使用alt属性。这是当用户无法加载图像时显示的内容，或者它们依赖于屏幕读取器。大多数浏览器都支持alt文本，文本应该最好地描述图像是什么。

＆lt; img src =“baby_elephants.png”alt =“一群两只婴儿大象走在他们的妈妈身后在一个开放的领域。”＆gt;

W3C的设计模式的创作实践有关于如何构建可访问的菜单，模数，形式等等的指导方针。这些中的每一个都有预期的HTML语义元素使用，例如例如＆lt; p＆gt;，和＆lt; nav＆gt ;.

aria地标是您可以添加到元素的属性，以在网页上定义其角色。 HTML语义元素和aria地标，让屏幕读者知道它们正在进行的位置，允许它们从一个部分轻松跳转到另一个部分。

您可以使用角色属性添加地标。地标的一些例子是横幅，形式和搜索。值得注意的是，您应该只将角色属性放在像＆lt; div＆gt的元素上;和＆lt;跨越;，不要放置在具有语义含义的元素上，例如＆lt; ul＆gt;或＆lt; p＆gt ;.

如果没有焦点功能，用户几乎不可能使用键盘访问您的网站。开发人员经常不喜欢焦点特征的外观（我必须最初承认我也是）。然而，一旦学习它的重要性，我就会来欣赏美学。但如果您必须删除它，请务必创建一些可见的指示。

边界和标签对表格很重要，不应省略。可访问的表单是具有定义边框的形式和描述所需输入的可见标签。占位符文本对标签没有足够的替代品。

对于具有移动性损伤和认知残疾的用户来说，Form Input的定义边界是必不可少的。边框使用户更容易了解输入的位置和大小，以便用户知道在哪里单击。

我们希望使用低视觉的用户能够放大文本大小，如果您在PX或像素中编码，这可能很困难。如果使用PX文本大小和行间距将无法响应。这就是为什么最好练习使用REM或EM为您的文本，他们是响应的。查看下面的示例！

第一个例子向我们展示了PX使用时会发生什么，不好！ 在第二个示例中，间隔不会以文本大小扩展。 这是因为使用PX设置了线路高度。 最后一个例子是我们想要看到的！ 使用REM或EM设置线路高度和字体大小，因此我们的字体将相应地缩放。