无障碍：是什么、为什么以及如何

在过去的几个月里，可访问性对我来说变得越来越重要，我希望在阅读完本文（以及我的新 a11y 系列中即将发表的文章）后，可访问性也会成为您的一个重要主题。

大家好，我叫 Julia，是一名无障碍及前端开发者，目前正在备战IAAP 考试，争取成为一名认证无障碍专家。我希望推广无障碍优先的理念，并鼓励每一位用户体验设计师、前端开发者以及其他任何人，都以无障碍优先的理念进行开发。

如果我们都积极参与无障碍网站和应用程序的开发，并尽早着手，就能从一开始就将它们设计得易于访问。这将使企业更难因为“无障碍意味着丑陋的设计”或“成本高昂”等谬论和误解而回避无障碍。

这就是为什么我要开始一系列关于可访问性的文章，在“是什么、为什么和如何”的背景下向您介绍这个主题：什么是可访问性，为什么它很重要，以及我们如何实现可访问性设计。

目录

1. 什么是无障碍设施
2. 为什么这很重要
3. 如何开发无障碍方式

什么是可访问性

关于维基百科，

Web 无障碍是一种包容性实践，旨在确保肢体残障、情境障碍以及因社会经济原因而受限于带宽和网速的人士能够无障碍地与万维网上的网站互动或访问。当网站经过正确的设计、开发和编辑时，更多用户能够平等地访问信息和功能。

残疾种类繁多，有些是显而易见的，比如坐轮椅的人；有些则是隐藏的，比如聋哑人。还有一些与年龄相关的残疾，比如听力损失或视力低下；还有一些暂时性的残疾，比如手臂骨折，甚至抱婴儿。

你可能见过井号标签#a11y，它是单词 accessibility 的缩写。之所以这样缩写，是因为字母“a”和字母“y”之间有 11 个字符。在我看来，这是一种很酷的缩写方式，而且用作井号标签也更容易。

为什么这很重要

“网络的力量在于它的普遍性。无论是否残疾，每个人都可以访问网络，这是至关重要的一点。”——
蒂姆·伯纳斯-李，W3C 总监，万维网创始人

那么，我们为什么要让网站实现无障碍？首先，让每个人都能平等地获取信息，这本身就是正确的做法。此外，法律可能要求你提供无障碍网站。在奥地利，像大学这样的公共部门必须根据WCAG 2.1-AA（Web 内容无障碍指南）确保其网站 100% 无障碍。

大约10%到20%的人口患有某种残疾。并非所有残疾都会影响人们使用互联网的能力，例如腿部瘫痪的人。就网络无障碍而言，最重要的残疾是眼、耳、手和脑的残疾。

残障人士使用辅助技术与网络互动。为了确保每个人都能使用这些技术来使用网络，我们的工作是构建能够被这些设备正确识别的网站。例如，如果您的代码在编写时没有考虑到无障碍性，屏幕阅读器将无法正常工作。

互联网开辟了一个充满可能性的全新世界，尤其对残障人士，尤其是视力残障人士而言。如今，几乎所有可以想到的话题的信息都唾手可得。视障人士不再需要依赖他人获取所需信息，这意味着他们可以实现更高程度的独立生活，这在几年前还是不可想象的。

最后，当您的网站更方便残障人士使用时，它们也就更容易被所有人访问。这意味着，通过使用语义化的 HTML 标签、更优的设计（例如更高的色彩对比度）以及更方便残障人士访问，构建良好的网站结构（在我看来，这正是成为一名优秀前端开发人员的首要条件），将自动提升网站对所有人访问的便利性。
此外，搜索引擎优化 (SEO) 也会得到提升。

“我们需要让每件事物都对每一位残障人士都变得触手可及。”
——史蒂夫·旺德，2016 年格莱美颁奖典礼

如何开发无障碍方式

这里我想粗略地介绍一下如何让您的网站更易于访问。在接下来的几周里，我会撰写文章，详细介绍每个类别。

W3C是一个全球性的网络联盟，它维护着一个专门处理网站无障碍问题的工作组，并发布了相关的标准。这些标准被称为WCAG ，即 Web 内容无障碍指南。这是一个很棒的资源，可以帮助您了解更多关于如何在项目中处理无障碍问题的信息。

我们如何才能使网络或我们的网站更易于访问？

让我们来看看以下几点。即使遵循这些，你的网站也可能无法立即实现 100% 的可访问性，但这绝对是一个良好的开端。

尽可能使用语义 HTML
使用<header>、<main>，<footer>您已经为网站奠定了良好的基本结构，方便屏幕阅读器用户浏览网站。语义 HTML 标签列表
很长。请尽量添加尽可能多的标签，并且仅将 和 用作样式，因为它们不具有语义性。<div><span>

为了不破坏遗留代码，aria（无障碍富互联网应用程序）提供了一个不错的（临时）解决方案。这样，您就不必<div>用语义标签替换现有的内置标签，因为语义标签会破坏样式，从而增加额外的工作量。例如，Aria 角色只需承担语义标签的角色即可，如下例所示。

对于屏幕阅读器来说，“Hello world” 是一样的。"/>

链接和按钮等交互元素以及图像和视频等多媒体元素需要更详细的描述（例如使用替代文本），以便屏幕阅读器用户更好地理解。

切勿单独使用颜色来指示特定信息（例如图表上的结果），并使用足够的颜色对比度。视障人士可能难以辨别背景颜色和文本颜色之间的对比。

如何识别并修复 a11y 问题？
有一些自动化工具，例如axe，它已经能够发现大约 30% 的问题。您可以用来检查网站的最常用屏幕阅读器是NVDA，以及 macOS 上已安装的 Microsoft VoiceOver 屏幕阅读器。
其他值得一提的工具包括Wave、Taba11y和Color contrast Checker，我将在其他文章中更详细地介绍它们。

如果你让网页 100% 无障碍地供鼠标、键盘、屏幕阅读器和盲文用户使用，那么你就已经覆盖了大部分的无障碍功能。因此，这应该是我们所有人的目标。

感谢您的阅读和付出。我非常感激！