198 lines
15 KiB
Markdown
198 lines
15 KiB
Markdown
---
|
||
title: Accessibility Basics
|
||
localeTitle: 辅助功能基础知识
|
||
---
|
||
> “黑暗艺术是多种多样的，不断变化的，永恒的。对抗它们就像对抗一个多头的怪物，每次颈部被切断时，头发比以前更加凶猛，更加聪明。你正在与之抗争这是不固定的，变异的，坚不可摧的。“
|
||
>
|
||
> \- 教授Severus Snape，哈利波特系列
|
||
|
||
可访问性在开发中的作用基本上是了解用户的观点和需求，并且知道Web和应用程序是残障人士的解决方案。
|
||
|
||
在这个时代，发明了越来越多的新技术，使开发人员和用户的生活更加轻松。在多大程度上，这是一件好事，是另一个时间的争论，现在只要说开发人员，尤其是网络开发人员的工具箱就像我们的朋友所谓的“黑暗艺术”一样不断变化就足够了。斯内普。
|
||
|
||
该工具箱中的一个工具应该是可访问性。理想情况下，它应该是在编写任何形式的Web内容的最初步骤之一中使用的工具。但是，在大多数开发人员的工具箱中，这个工具通常都不是很好。这可能是由于一个简单的例子，即使不知道它甚至存在于极端情况下，例如不关心它。
|
||
|
||
在我作为用户的生活中，以及后来的开发人员，他从任何形式的内容中获得可访问性，我已经看到了该频谱的两端。如果您正在阅读本文，我猜您属于以下类别之一：
|
||
|
||
* 您是一名新手Web开发人员，希望了解有关可访问性的更多信息
|
||
* 你是一个经验丰富的网络开发人员，已经迷失了方向（稍后会详细介绍）
|
||
* 您认为工作中有法律义务，需要了解更多相关信息。
|
||
|
||
如果您不属于这些相当广泛的类别，请告诉我。我总是喜欢听那些读我写的东西的人。实现可访问性会影响整个团队，从设计者选择的颜色，撰稿人写的副本，以及开发人员。
|
||
|
||
## 那么，无论如何，什么是可访问性？
|
||
|
||
可访问性本身有时是一个误导性的术语，特别是如果英语是你的第二语言。它有时被称为包容性设计。
|
||
|
||
如果您的网站位于互联网上，任何拥有网络浏览器的人都可以访问该网站，从某种意义上说，每个人都可以通过网络浏览器访问该网站。
|
||
|
||
但是，您网站上的所有内容实际上是否可读，可用并且对每个人都可以理解？是否没有限制条件阻止某些人“访问”您所暴露的所有信息？
|
||
|
||
您可以问自己以下问题：
|
||
|
||
* 如果您添加仅包含在音频文件中的信息，聋人是否仍能获得该信息？
|
||
* 如果您用某种颜色表示您网站的重要部分，那么一个色盲的人会知道吗？
|
||
* 如果您在网站上添加传达重要信息的图像，盲人或低视力人士将如何了解这些信息？
|
||
* 如果你想用键盘或口棒浏览应用程序，它是否可行且可预测？
|
||
* 您的应用程序是否采用设备的方向，以及如果用户无法进行物理更改，该怎么办？
|
||
* 对于可能需要更多时间填写表单的人，您的申请是否有宽容的时间方面？
|
||
* 假设JavaScript没有及时加载，您的应用程序是否仍然有效（渐进增强）？
|
||
* 您甚至可以说，如果您的网站资源非常庞大，那么缓慢或有点连接的人是否能够阅读您的内容？
|
||
|
||
这是可访问性发挥作用的地方。可访问性基本上需要使您的内容友好，尽可能容易“访问”最大数量的人。这包括耳聋，低视力，失明，阅读障碍，静音，慢速连接，色盲，患有癫痫，精神疲劳，年龄，身体限制等的人。
|
||
|
||
## 为何实现可访问性？
|
||
|
||
您可能认为可访问性不适用于您或您的用户，那么为什么要实现它？盲人用照片编辑工具做什么？
|
||
|
||
事实是，你在某种程度上是正确的。如果您已经进行了细致的用户研究并排除了某些人访问您网站的机会，那么迎合这一群人的优先级就会降低很多。
|
||
|
||
但是，做这项研究是实际捍卫这种说法的关键。你知道有[盲人游戏玩家吗？](http://audiogames.net)甚至是[盲人摄影师？](http://peteeckert.com/) 。也许你知道[音乐家可以聋](http://mentalfloss.com/article/25750/roll-over-beethoven-6-modern-deaf-musicians)吗？
|
||
|
||
如果你这样做，对你有好处。如果没有，我想这更能激发我的观点。
|
||
|
||
当我们查看实际上迫使您使某些网站和网络应用程序可访问的立法时，图片变得更加复杂。一个主要的例子是基于美国的[部分508](http://jimthatcher.com/webcourse1.htm) 。目前，这部法律主要是指政府组织，公共部门网站等。但是，法律也在变化。
|
||
|
||
去年，航空公司网站被列入此列表，这意味着即使在欧洲，航空公司网站也开始争相使其内容可访问。不这样做可以让你的公司每天罚款几万美元，问题不是固定的。
|
||
|
||
世界各地的这项立法有所不同，有些比其他立法更严重，包罗万象。遗憾的是，不知道这个事实并没有使诉讼消失。
|
||
|
||
## 好的，所以可访问性是一个大问题。现在我们如何实现它？
|
||
|
||
遗憾的是，这个问题难以回答。哈利波特在顶部的引用是有原因的，而不是我是一个狂热的幻想读者。
|
||
|
||
如上所述，可访问性对于一大群不同的人来说非常重要，每个人都有自己的需求。让您的网站完全适合所有人，这是一项大型的，持续的任务。
|
||
|
||
为了给疯狂带来一些方法，组成了Web内容可访问性指南或[WCAG](https://www.wuhcag.com/web-content-accessibility-guidelines/) 。本文档包含许多可用于检查网站的标准。现在，我将介绍一些最重要的基础知识。可以这么说，我会指出你那些悬而未决的成果。在随后的文章中，我将讨论更多高级技术，如\[WAI-ARIA\]，这对于基于JavaScript的应用程序非常重要。
|
||
|
||
### 像当地人一样说话
|
||
|
||
HTML规范是描述如何使用该语言来构建网站的文档。辅助技术，如屏幕阅读器，语音识别程序等，都知道这个文件。然而，Web开发人员通常不会，或者至少不够，并认为这样的事情是可以的：
|
||
|
||
```html
|
||
|
||
<div class="awesome-button"></div>
|
||
|
||
<span><strong>Huge heading I will style with CSS later</strong></span>
|
||
|
||
<span class="clickable-with-JavaScript">English</span>
|
||
```
|
||
|
||
你猜怎么了？所有这三个要素都打破了WCAG的几个标准，因此根本无法访问。
|
||
|
||
第一个元素打破了所谓的“名称，角色，价值” - 标准，它指出网页上的所有元素都应该公开他们的名字，他们的角色（如按钮）及其价值（如编辑字段的内容）辅助技术。这个div实际上不提供三者中的任何一个，使其对屏幕阅读器不可见。
|
||
|
||
在使用CSS设置样式后，第二个元素看起来像一个标题，但在语义上是一个跨度。因此，辅助技术不会知道它的标题。屏幕阅读器会将其读作常规文本而不是标题。屏幕阅读器通常有一个热键可以快速跳转到最近的标题，此标题不会包含在该范围内。
|
||
|
||
例如，第三元素可以是用户可以单击以改变网站语言的元素。也许一个奇特的动画菜单会在点击时扩展。然而，这也是一个跨度，并没有暴露它的角色（链接或按钮），使得辅助技术认为这只是带有一些样式的英语这个词。
|
||
|
||
跨度和div是非元素。它们意味着包含其他元素，而不是元素本身。您可以通过两种方式解决这些问题：
|
||
|
||
* 您可以手动将ARIA属性添加到上面的元素。这是一个高级主题，超出了本文的范围。
|
||
* 或者，您可以这样做：
|
||
|
||
```html
|
||
|
||
<button>This is a button</button>
|
||
|
||
<h2>Here's a heading level two</h2>
|
||
|
||
<a href="JavascriptThing">English</a>
|
||
```
|
||
|
||
繁荣。突然之间，只需使用原生HTML，所有这些元素现在都可以完全访问。换句话说，就像使用HTML一样。
|
||
|
||
### 如果没有结构，基础就无法忍受
|
||
|
||
稍早一点，我触摸了屏幕阅读器的热键，从标题跳到标题。实际上有许多这样的热键可以快速跳到最近的表格，形式字段，链接等。确保这些标题实际上在逻辑位置是一个很好的做法，真的会降低你的辅助技术用户的压力水平，这是好的如果您希望访问者继续回到您的网站。
|
||
|
||
还记得标题是分层的。如果你使用h2，请确保跟随它的h3实际上与h2有关。对于最近的博客文章，请不要在h2下面输入h3作为联系方式。这里有一个很好的比喻是一本带章节的书，里面有小节。你不会在准备蔬菜章节的中间放一个关于烘烤饼干的部分......或者......你不会......对吗？
|
||
|
||
### 有什么选择？
|
||
|
||
网站上的图片很棒。他们为您的内容添加了一个新图层，可以真正让您的网站访问者体验更加身临其境的体验，并且通常只是在所有文本中看起来很好。一张图片可以说超过一千字，对吗？
|
||
|
||
当然。也就是说，如果你能看到它们。在HTML5规范中，img-attribute必须始终具有alt-attribute。如果无法看到该属性，则该属性用作图像的替代。这对于您网站的盲人访问者来说都是如此，但是当您的图像由于某种原因无法加载时也是如此。因此，不向img-attribute添加alt-tag不仅会破坏可访问性，还会违反HTML5规范。
|
||
|
||
我恳请任何抓住自己这样做的网络开发人员吃他们的程序员的帽子并在Windows 95上专门工作一周。时间结束后，写一篇关于你从这场考验中学到的东西的文章，这样我就可以在下午喝咖啡时大笑。
|
||
|
||
现在，有一点需要注意。根据HTML5规范，Alt属性是强制性的，但实际填写它们并不是必须的。 `<img src="awesome-image.jpg", alt="">`因此是合法的HTML5代码。
|
||
|
||
您是否应该为所有图像填写alt-tag？这取决于图像，真的。对于背景图像，答案通常是否定的，但无论如何都应该使用CSS。
|
||
|
||
对于完全没有信息的纯装饰图像，您基本上可以自由选择。要么输入有用的描述性内容，要么根本没有内容。
|
||
|
||
对于包含信息的图像，如小册子，地图，图表等，除非您提供文字替代方法，否则不添加替换文字会打破WCAG。这通常是alt属性，但也可以是图像正下方或旁边的文本块。
|
||
|
||
对于文本图像，文本可以包含在alt属性中，也可以以某种替代方式提供。问题是在同一页面上添加文本替代方案基本上会使能够看到图像的人显示相同的内容两次，这就是为什么alt-attribute在这种情况下更好。
|
||
|
||
文本应提供上下文和信息，这是查看图像的替代方法。写“热气球图像”根本不够 - 为什么那里有气球图片？如果图像是风格化的或传达了情感意义，那么这可以包括在内。
|
||
|
||
### 儿子，我看不懂你的潦草
|
||
|
||
即使是那些不戴眼镜也没有视力问题的人也会从易于阅读的字体和适当的对比中受益。如果你必须填写一个表格，在白色背景上放置浅黄色，无望的循环字母，我相信你会畏缩。例如，对于那些视力不如你奶奶的人来说，这变得无比糟糕。
|
||
|
||
WCAG具有较小和较大字母的对比度，并且有大量工具可用于检查对比度是否足够强。信息和工具在那里，去使用它。
|
||
|
||
开始检查颜色对比度的好地方是使用[WebAIM](https://webaim.org/resources/contrastchecker/)颜色对比度检查器。
|
||
|
||
### 这个按钮做什么用的？
|
||
|
||
当我们讨论表单的主题时，让我们快速浏览`input`标记。这个小家伙有点重要。
|
||
|
||
当您在网页上放置一些输入字段时，您可以使用标签......以及......标记它们。但是，将它们放在一起并不够。您需要的属性是for-attribute，它获取后续输入字段的ID。通过这种方式，辅助技术可以知道与哪个表单字段相关联的标签。
|
||
|
||
我想说明这个的最好方法是举一个例子：
|
||
|
||
```html
|
||
|
||
<label for='username'>
|
||
|
||
<input type='text' id='username'>
|
||
```
|
||
|
||
这将使例如屏幕阅读器说“用户名，文本编辑字段”，而不是仅报告“文本编辑字段”并要求用户去寻找标签。这也真正帮助了使用语音识别软件的人。
|
||
|
||
### 这是一个很高的要求
|
||
|
||
我们稍作休息吧。我希望你去看一个设计精良的网页。它可以是任何页面。继续，我会等
|
||
|
||
背部？太好了。现在，再次查看页面但禁用所有CSS。它看起来还不错吗？页面上的内容是否仍按逻辑顺序排列？如果是这样，很好。您找到了一个具有良好HTML结构的页面。 （轻松查看没有CSS的页面的一种方法是在WebAIM的[WAVE Web辅助功能评估工具中](http://wave.webaim.org)加载该站点。然后单击“无样式”选项卡以查看没有样式的页面。）
|
||
|
||
如果不是，那很好。现在，当我遇到一个结构糟糕的网站时，你会得到我每天必须处理的印象。
|
||
|
||
完全披露：当发生这种情况时，我倾向于诅咒。高声。充满活力。
|
||
|
||
为什么这么重要？我会解释一下。
|
||
|
||
_扰流警报！_对于那些到目前为止只涉及HTML / CSS课程的人，我们将稍微跳过一点。
|
||
|
||
屏幕阅读器和其他辅助技术基于您网站的DOM呈现网页的自上而下的表示。在此版本的网页中忽略所有位置CSS。
|
||
|
||
DOM代表文档对象模型，是网站HTML元素的树状结构。您的所有HTML元素都是基于您使用的HTML标记和JavaScript分层链接的节点。屏幕阅读器使用此DOM树来处理HTML代码。
|
||
|
||
如果将元素放在元素的顶部，它也会显示在DOM树的顶部。因此，屏幕阅读器也会将它放在顶部，即使您使用CSS将其移动到页面底部。
|
||
|
||
因此，我想给大家的最后一个提示是关注HTML的顺序，而不仅仅是添加了CSS的已完成的网站。没有CSS，它仍然有意义吗？大！
|
||
|
||
哦......不是吗？在那种情况下......你可能有一天会在寒冷的微风中听到一声低沉的诅咒。那很可能是我，访问你的网站。
|
||
|
||
在那种情况下，我真的只有两个字。当我写一些不好的代码时，我常常听到同样的两个字，而且我很高兴地告诉你：“去解决！”
|
||
|
||
### 颜色对比
|
||
|
||
对于普通文本，颜色对比度应至少为4.5：1，对于大文本，颜色对比度应至少为3：1。 “大文本”定义为至少18磅（24px）或14磅（18.66px）和粗体的文本。 [对比检查器](https://webaim.org/resources/contrastchecker/)
|
||
|
||
## 结论
|
||
|
||
我告诉过你关于可访问性，它是什么，它不是什么以及为什么它很重要。
|
||
|
||
我还为您提供了获得正确无障碍的基础知识和基础知识。然而，这些基础知识非常强大，在编写可访问性时可以使您的生活更轻松。
|
||
|
||
如果我们以FCC术语进行讨论，您应该在执行HTML / CSS课程以及JavaScript课程时牢记这些。
|
||
在随后的文章中，我将讨论一些更多的缺口主题。我将回答的一些问题是：
|
||
|
||
* 添加结构化标题听起来是个好主意，但它们不适合我的设计。我该怎么办？
|
||
* 有没有办法让我只写屏幕阅读器和其他辅助技术看到的内容？
|
||
* 如何使自定义JavaScript组件可访问？
|
||
* 除了包容性用户测试之外，还有哪些工具可用于为最大的用户群开发最强大和最易用的体验？ |