--- 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
Huge heading I will style with CSS later English ``` 你猜怎么了?所有这三个要素都打破了WCAG的几个标准,因此根本无法访问。 第一个元素打破了所谓的“名称,角色,价值” - 标准,它指出网页上的所有元素都应该公开他们的名字,他们的角色(如按钮)及其价值(如编辑字段的内容)辅助技术。这个div实际上不提供三者中的任何一个,使其对屏幕阅读器不可见。 在使用CSS设置样式后,第二个元素看起来像一个标题,但在语义上是一个跨度。因此,辅助技术不会知道它的标题。屏幕阅读器会将其读作常规文本而不是标题。屏幕阅读器通常有一个热键可以快速跳转到最近的标题,此标题不会包含在该范围内。 例如,第三元素可以是用户可以单击以改变网站语言的元素。也许一个奇特的动画菜单会在点击时扩展。然而,这也是一个跨度,并没有暴露它的角色(链接或按钮),使得辅助技术认为这只是带有一些样式的英语这个词。 跨度和div是非元素。它们意味着包含其他元素,而不是元素本身。您可以通过两种方式解决这些问题: * 您可以手动将ARIA属性添加到上面的元素。这是一个高级主题,超出了本文的范围。 * 或者,您可以这样做: ```html