为什么开发人员不重视无障碍性？

你知道那个笑话，“两个前端开发人员走进酒吧，发现他们没有任何共同点”？它很有趣，但也很令人沮丧，因为它是真的。

本文将从三个不同的角度探讨网页设计和开发中的无障碍性。这三个角度可以帮助我们弥合用户和设计师/开发人员之间的巨大鸿沟。它可能有助于我们找到构建更美好网络和更美好未来的共同点。

第一幕

“我只是不明白开发人员为什么不考虑无障碍性。”

有人曾经对我说过这句话。让我们停下来思考一下。也许我们可以从不同的角度思考问题。

想想作为一名开发人员，你需要了解多少东西才能成功构建一个网站。在任何一天，在任何一个网页开发职位上，网页开发的其他细节都会出现。也就是说，它不仅仅是“仅仅”了解 HTML、CSS、ARIA 和 JavaScript。根据他们需要做的事情，开发人员在职业生涯中还会学习其他东西。

这可能是包管理、工作区、代码生成器、协作工具、资产加载、资产管理、CDN 优化、捆绑优化、单元测试、集成测试、视觉回归测试、浏览器集成测试、代码审查、代码风格检查、格式化、通过示例进行沟通、变更日志、文档、语义版本控制、安全性、应用程序部署、包发布、回滚、增量改进、增量测试、持续部署、合并管理、用户体验、用户交互设计、排版比例、响应式设计中的长宽比、数据管理，以及… 好吧，这个列表可以一直列下去，但你懂我的意思了。

作为一名开发人员，我认为自己非常聪明，因为我知道如何做这些事情中的大部分！停下来思考一下：如果你考虑世界上有多少人，并将它与世界上能构建网站的人数进行比较，它在比例上是一个非常小的比例。这有点…酷。甚至不可思议。除此之外，想想你上次发布代码的感受，那感觉有多好。“我搞清楚了一个很难的东西，并且让它运行了！啊！我感觉很棒！”

那种情绪上的高涨真是太棒了，不是吗？仅仅想到它就让我微笑。

现在，想象一下，一位无障碍性主题专家走过来，基本上告诉你，你不仅不特别聪明，而且你一直都在做错误的事情。

哎哟。突然间，你感觉不太好。错了？我？什么？你的肾上腺素甚至会飙升，你会开始感到防御。是时候为自己辩护了… 对吧？是时候据理力争了。

认知失调甚至会非常令人难以忍受。发现自己不仅不擅长自己认为自己擅长的事情，而且还一直都在说，“去你的，谁在乎你呢，”对一大群无法使用你帮助构建的网站的人，因为你（有意或无意地）忽略了他们的存在，忽略了需要比你多年来为所有人提供的巧妙之处更多的用户。哎哟。

考虑到所有因素，我认为开发人员想要捂住耳朵，假装这一切都没有发生，他们仍然非常聪明和棒极了，是可以理解的。唯一一个告诉你做错了的“专家”只是一个人的。一个人很容易忽略。

— 场景结束。

第二幕

“我觉得自己完全不重要。”

这是我经常从需要辅助技术来使用网站但经常发现网站不可用的人那里听到的一句常见的话。也许他们无法阅读文本，因为网站的设计忽略了颜色对比。也许存在嵌套的交互式元素，因此他们无法登录执行诸如支付水电费或自行购买必需品之类的操作。也许他们最喜欢的歌手终于开设了网上商店，但使用辅助技术的用户甚至无法浏览该网站，因为虽然它从有视力用户的角度来看可能看起来是交互式的，但所有按钮都是 div 并且无法使用键盘交互… 根本没有。

这种沮丧感可能会爆发并蔓延；这种沮丧感最主要的承受者往往是那些试图提供更具包容性的产品的人。结果是一个负面反馈循环；一些技术人员选择不听，因为“这很粗鲁”（完全忽略了这个说法的讽刺意味）。其他技术人员在无障碍性导向的设计和开发工作中经常遇到的情绪压力下苦苦挣扎。

事实是，这些用户被忽视了太久，以至于感觉他们在对一个空洞喊叫。难道没有人听吗？难道没有人关心吗？似乎只有要求法律赋予他们的待遇才能得到承认！即使那样，他们也经常感到被忽视和遗忘。诉讼是唯一的解决办法吗？

越来越多的迹象表明，大声疾呼和斗争是唯一被听到的方式，即使那样，可能也要很久才能发生任何改变。

— 场景结束。

第三幕

“我知道它不符合颜色对比度要求，但我觉得这对我的设计师创意太限制了。我根本不喜欢它看起来的样子。”

在我的职业生涯中，我经常听到这句话。对于有些人来说，包容性设计不是确保我们的网站可以被所有人使用所必需的护栏，而是他们创造力的抑制剂。

如果你是一位这样想的设计师，请考虑一下：你并不是为自己设计。这不像实体艺术；虽然你的视觉设计可以是艺术性的，但它仍然在网络上。它仍然为了网络。网页设计师面临着更大的挑战——他们的艺术愿景需要被所有人使用。挑战自己，将对话转移到不同的空间：你只是还没有找到合适的设计。认为设计要么美丽要么无障碍是一个错误的选择；不要陷入这个陷阱。

— 场景结束。

让我们重新构建对话

这些只是我们可以在数字无障碍性方面考虑的三个视角。

我们可以谈论那个“只想发布功能”并说“我们以后可以回到无障碍性”的项目经理。我们可以谈论那个开玩笑说“如果他们失明了，他们根本不会使用互联网”的开发人员，或者那个说他们只会在“浏览器强迫他们这样做”后才关注无障碍性的开发人员。

我们可以，但我们真的没有必要。我们知道这些对话将如何进行，因为我们中的许多人已经经历过这些经历。项目从未被改造过。公司只为开发产品支付一次费用，然后为无障碍性审核支付费用，然后在审核显示改造成本将高于构建新产品后，为重写支付费用。我们知道那个坚持认为只有当浏览器不允许时才应该被迫做某事的开发人员，并且他们不太可能相信他们代码的包容性架构不仅有益，而且是必要的。

那么我们应该谈论什么？

我们需要承认，设计师和开发人员需要在职业生涯中尽早学习无障碍性。我用这个类比来思考：想象一下你学会了一种外语，但你只学会了该语言的俚语。你的词汇在技术上是正确的，但有很多该语言的母语人士永远无法理解你。以 JavaScript 为首的网页开发人员从 JavaScript 的角度来看通常在技术上是正确的，但他们也经常创建最终会遗漏很多人的解决方案。

我们如何纠正这种情况？我将在这里坚定不移，正如我们所有人都必须坚定不移一样。我们需要确保我们制作的任何文档都包含可访问的代码示例。设计必须包含可访问的注释。我们的会议演讲必须包含无障碍性。我们用来使生活更轻松的酷炫玩具？它们必须是可访问的，并且不应有任何理由可以接受低于这个标准。这将成为我们与网络相关的一切的新的最小可行产品。

但已经存在的代码怎么办？已经写好的成千上万篇文章、已经发表的演讲、已经制作的库怎么办？我们如何克服这些？即使我为 CSS-Tricks 撰写这篇文章，我也在想我阅读过的所有文章以及当我意识到最终结果不可访问时我所感受到的失望。或者那些真正有趣但无法生成可访问代码的代码生成工具。或者那些流行的 CSS 框架，它们未能考虑选项卡顺序或颜色对比度。我想要所有那些人感到难过，或者受到某种惩罚吗？

不，甚至完全不。这种想法不会带来任何好处。好处来自我们已经知道的地方——同情和好奇心。

我们带着同情和好奇心来处理这个问题，因为这些是可持续的改进方式。如果我们沉溺于过去行为的愧疚中，自责或责怪其他人多年来忽视了对所有人的无障碍，我们永远不会进步。坦率地说，如果我们必须以某种方式为过去的无知行为付出代价，我们什么也做不了；因为是的，我们确实忽视了它。在很多方面，我们仍然在忽视它。

真实例子：Google 开发者培训教授了很多东西，但它除了无障碍的基本部分外，什么也没教。JavaScript 框架沉迷于 JavaScript 的巧妙和复杂性，以至于完全忘记了 HTML 已经存在。即使这样，无障碍仍然可以处于次要地位。Ember 存在了大约 8 年才添加了一个以无障碍为中心的社区小组（即使他们从那时起取得了很大进展）。React 必须创建一个完全不同的路由器解决方案。Vue 甚至还没有开始公开解决核心框架中的无障碍问题（尽管有一些社区努力）。无障碍工程师一直在恳求inert 在浏览器中原生实现，但它经常资金不足且优先级较低。

但我们是技术人员和艺术家，所以当我们阅读关于无障碍对象模型以及我们的代码如何被操作系统翻译并馈送到辅助技术的有趣文章时，我们的好奇心战胜了。这很酷。毕竟，编写机器代码以便它可以与另一台机器对话可能是我们想象中要做的，对吧？

关键是，我们只有在能够对自己有同情心时，才能开始对其他人有同情心。当然，我们犯了错误——但我们不必保持无知。想想你花了几个小时调试代码，结果发现只是一个错字或一个缺少的分号。你是否还在为这件事自责？不，你通过逻辑思维培养了同情心。想想开始感到沮丧的初级开发者，以及你是如何激励他们继续尝试，以及我们都有好日子和坏日子。这就是同情心。

最酷的部分是：我们不仅拥有这项技术，我们实际上就是可以修复它的人。我们可以站起来，明天努力做得更好。我们可以花些时间阅读关于无障碍的信息，并每天继续阅读，直到我们像了解其他事情一样了解它。一开始会很困难，就像我们第一次尝试...编写测试、编写 CSS、使用那个永远铭刻在我们记忆中的 API 一样。但随着重复和练习，我们变得更好了。它变得更容易了。

从逻辑上讲，我们知道我们可以学习难事；我们已经一次又一次地学习了难事。这是我们签署的生涯和工作。这就是让我们每天早上起床的原因。我们喜欢挑战，我们喜欢解决难题。我们完全支持这个。

我们能做些什么？以下是一些行动步骤。

也许我已经失去了一些读者。但是，如果你看到这里，也许你在问：“Melanie，你已经说服了我，但我现在能做什么？”我会给你两个清单，让你能够采取行动，给你一个开始的地方。

有同情心地提升自己

1. 开始关注一些有残疾的人，他们在社交媒体上分享他们的经历，目的是从他们的经历中学习。倾听他们想说的话。不要和他们争论。不要用语气来压制他们。倾听他们想要告诉你什么。也许它并不总是以你想要的方式出现，但无论如何都要倾听。
2. 改造你的知识。尝试从 HTML 开始编写下一个组件，然后用 JavaScript 添加功能。了解你从 HTML 和浏览器中免费获得的内容。参加一些针对工程师的无障碍课程。为了提升你的技能，投资于自己的提升。
3. 打开屏幕阅读器。了解它的工作原理。了解设置——如何打开纯文本版本？如何更改声音？如何让它停止说话或更快地说话？如何通过标题浏览？如何获取链接列表？键盘快捷键是什么？

额外挑战：尝试构建一些与无障碍相关的工具。查看A11y 自动化跟踪器，这是一个开源项目，旨在跟踪可能存在的自动化，但尚未创建。

逐步改进你的代码

有一些关键的障碍阻止人们使用你的网站。不要停下来为它们感到难过；推动自己采取行动，让你的代码比以前更好。

以下是其中一些最糟糕的：

1. 嵌套的交互元素。 比如在链接内部放置一个按钮。或者在另一个按钮内部放置一个按钮。
2. 输入字段上缺少标签（或非关联标签）
3. 键盘陷阱会阻止用户前进。了解它们是什么以及如何避免它们。
4. 你网站上的图片对用户来说重要吗？它们是否具有alt 属性，且包含有意义的值？
5. 你的网站上是否有空链接？你是否使用了链接，而应该使用按钮？

建议：阅读A11y 项目上的检查清单。它绝不是详尽无遗的，但它会让你开始。

你知道吗？一个好的开始正是你现在的位置。一个好的开始时间？今天。

---

特色标题照片来自Scott Rodgerson在Unsplash上的作品。