我希望拥有的 Web 可访问性介绍

你好，过去的自己。我又从未来给你发信息了，那时天气终于变冷了，你鼓起勇气去做心理治疗，而地板底下那东西不知怎么地也逃走了。

最重要的是，你未来的工作职责将更加注重网站可访问性。这很好，因为对于前端工作来说，这应该是重中之重。如果用户无法正常使用网站，其他一切都无关紧要。缺点是，你本来就应该更重视可访问性。

这篇文章旨在告诉过去的你，关于无障碍的几个关键点。我无法涵盖所有​​内容，但我可以涵盖：

1. 为什么无障碍设施很重要
2. 使网站可访问
3. 测试可访问性

让我们开始吧！

关于可访问性的错误观念

首先，我必须纠正过去自己长期以来对无障碍设计的一个重大误解：无障碍设计影响所有用户，而不仅仅是那些典型的残障人士。接受这一点意味着要意识到无障碍设计是为了应对各种压力而设计的。

压力症是指任何影响任何人的医疗状况或环境状况，无论其处于人生的哪个阶段，或处于人生的哪个阶段。一些常见的压力症成因包括：

• 晚年
• 关节炎等慢性疾病
• 在户外，阳光刺眼
• 药物或睡眠不足导致的认知障碍
• 需要使用不同设备的网站
• 不稳定的 WiFi 影响资产加载
• 逃离从你的地板上逃脱的东西

以上以及许多其他情况都是压力案例，其中一些仅适用于特定残障人士。另一些适用于最终会影响每个人的疾病状况。有些情况虽然与具体情况有关，但仍然会影响每个人。

这很重要，因为它能将你对无障碍设施的认知从“这不重要，因为只有一部分人有某种残疾”转变为“我们需要覆盖所有用户，毕竟这种情况下存在压力”。这有助于其他人更好地理解无障碍设施的重要性。这也是为什么在与他人讨论无障碍设施时，最好称他们为“压力案例”。

更多可访问性论据

如果上述方法不适用于您或设计或管理方面的同事，那么从业务角度来看还有更多论据：

• 可访问性可以扩大您的应用的潜在受众，从而增加利润和吸引力。
• 可访问性减少了用于需要帮助的客户援助的资源，这些资源可以重新投资到其他地方。
• 无障碍设施可以保护您免于承担潜在的法律责任（至少在美国，这是《美国残疾人法案》的一部分）。只需看看美国盲人联合会诉塔吉特公司案，该案开创了广泛使用的网站需要依法提供无障碍设施的先例。

这些论点很适合用来说服那些你需要获得认可但又不是程序员的人。它们清晰地传达了这样一个信息：无障碍设计对公司有利，无论是赚钱还是省钱。

网页无障碍的四个关键

既然您已经了解了无障碍性的重要性，那么让我们来探讨一下如何实现。最广泛接受的无障碍性规则是《Web 内容与无障碍指南 2.0》（简称 WCAG 2.0）。它们是适用于任何技术界面的通用规则，这也是它们如此受欢迎的部分原因。它们对无障碍性的定义也非常详尽。

WCAG 2.0 的四大原则可以用缩写 POUR来概括：可感知 (Perceivable)、可操作 (Operable)、可理解 (Understandable) 和稳健 (Robust)。每个原则都有具体的细则，但我暂时先做一个大概的概述。建议您仔细阅读WCAG 2.0 清单，了解更多详情！

1.可感知

简而言之，可感知意味着不同的压力情况不会阻止用户阅读、观看或收听您的内容。

排版

可感知的内容必须易于阅读！提高字体可读性的简单方法是赋予文本和背景颜色足够的对比度，以便视力不佳或光线不足的人也能阅读。出于同样的原因，字体设计也应该倾向于更大的尺寸，并且易于调整大小。这甚至可能是因为多个用户试图同时阅读同一屏幕，无法靠得太近，需要更大的字体，以便所有人都能同时阅读。

图片

对于可感知的图片来说，最重要的是替代文本。即使是盲人，或者由于 Wi-Fi 信号不稳定而无法加载图片的人，仍然能够大致了解图片的内容。此外，切勿将重要的文字放在图片中。永远不要。

音频和视频

音频和视频内容都更容易让人感到压力。听力障碍人士、身处嘈杂或安静环境的人，或者只是喜欢阅读的人，无法或不愿倾听。视频文字记录是最简单的解决方案，但字幕也适用于视觉内容丰富的视频。

2.可操作性

接下来是可操作的，这意味着不同的压力情况不会阻止用户访问所有页面并填写表格。

界面和导航

这一点很明显——用户应该能够与他们需要的东西进行交互，例如：

• 链接到其他页面
• 需要填写的表格
• 点击按钮
• 在门口设置的陷阱
• 用于在站点内移动或发送/接收信息的其他任何内容。

这看起来显而易见，过去如此，但它也是网络最重要的部分，所以值得再三检查。你会惊讶地发现，这些漏洞竟然如此频繁地被漏掉。

键盘导航

就最后一点来说，再加点技巧：只用键盘操作。键盘导航会涉及很多压力因素——屏幕阅读器、不稳定的动作控制、与头晕和肌肉控制相关的医疗问题、不可靠的鼠标垫，或者仅仅是个人偏好。在文本编辑器中，你会依赖键盘快捷键来提高工作效率，这同样适用于网页浏览。

渐进增强

渐进式增强有助于应对压力情况，即使部分或全部样式失效，也应该保持可操作性。表单不应该在不支持新 CSS 特性的旧版浏览器上无法使用——它们可以看起来更简单或更粗糙，但仍然应该能够正常工作。渐进式增强的原理是，它从坚实可靠的可操作基础入手，并在可能的情况下添加可用的功能。你无法控制用户的浏览器，你只能为他们的选择做好准备。

3. 易于理解

可理解性比其他观点更容易理解：压力案例不会妨碍用户理解网站的预期含义。这有助于涵盖与用户如何解读网站信息相关的认知压力案例。

简单明确

正如乔治·卡林常说的那样，最好的语言是简单、诚实和直接的。充斥着公司术语的文字会让设计师印象深刻，却会让用户感到厌恶。直白的文字易于理解，有助于用户建立对你网站的信任。否则，他们不太可能关注或购买你销售的产品。

避免假设

你会遭到未来设计师的强烈反对。许多网站元素的设计都基于假设用户已经理解其含义。例如，假设“星号”图标会收藏某个项目。这对你来说显而易见，但你永远无法知道用户对此的理解程度。这或许并非源于认知压力、文化压力，或者仅仅是网络新手。切勿依赖隐含的象征意义。添加标题或副标题来确保用户理解，既快捷又简单，而且更容易理解。如果设计师感到尴尬，不要害怕坚持自己的立场。

4. 坚固

稳健性基本上意味着压力情况不会阻止用户从各种设备访问内容。

语义标记

语义标记是创建健壮且易于整体访问的内容的最佳方法。对于 Web 而言，这意味着：

• 语义 HTML 标签
• 正确使用aria标签
• 按逻辑顺序排列 DOM 元素
• 服务器端渲染以确保正确交付

这使得内容易于键盘导航、屏幕阅读器浏览，甚至在 CSS 加载失败时也能保持界面可用，甚至更多！语义化、可访问的标记能帮助您打造一个可访问的网站。

响应式设计

设备多样性更明显的例子是屏幕尺寸，例如：

• 智能手表（可能）
• 移动电话
• 平板电脑
• 大型外接显示器
• 投影仪屏幕
• 当你成名时的电影屏幕

屏幕尺寸对 Web 应用的影响可以说比其他类型的应用更大，尤其是在渐进式 Web 应用兴起的情况下。虽然没有哪个网站能够在如此多的尺寸下提供相同的体验，或者在像素级上保持一致，但它们仍然应该具备可用性和功能性。

测试可访问性

现在，过去的你，脑子里可能已经充满了这些要求。首先，记住，付出是值得的。其次，你会很高兴知道，你可以自动测试其中的许多要求！

自动化可访问性测试

可以使用一个或多个工具自动测试的一些内容包括：

• 颜色对比
• 语义HTML
• 不需要的 div 元素
• 翻译文本
• ARIA 和其他可访问性属性，例如标题

总而言之，我发现自动测试至少覆盖了 75% 的可访问性问题。但有一个条件：在项目中，必须尽早添加可访问性测试。越晚添加，就越容易被视为“以后再补上”。这很糟糕，因为有些花哨的设计在可访问性方面是无法挽回的，必须尽早修改。否则，可访问性测试在设置时就注定永远失败。

每个项目的具体工具变化都会有所不同，所以我就不在这里列举例子了。你可以自己研究一下，看看它们对 WCAG 2.0 指南的覆盖程度有多全面，这样就能学到更多。

无法自动化的事情

无障碍测试有助于衡量与压力案例相关的因素，但无法衡量实际的压力案例。有些测试可以模拟基本操作，例如点击元素，但这还不够。截至撰写本文时，最好的方法是自行重现压力案例。以下是一些入门建议：

• 使用键盘导航
• 使用键盘和屏幕阅读器导航
• 使用手机
• 在强烈的阳光下使用手机
• 降低你的网络连接速度
• 破坏部分或全部 CSS
• 让不太熟悉网站的人们浏览并执行基本任务
• 使用灰度滤色器（针对色盲）
• 只用一只手
• 握手时使用，模拟关节炎或肌肉疼痛
• 在疲劳（或醉酒）时使用或模拟认知障碍
• 在街上逃命时使用，被一只寻求复仇的释放怪物追赶

我的建议是列出各种压力情况的清单，并尽可能按重要性从高到低的顺序逐一涵盖。这样，即使无法全部重现，至少也能找到那些对用户影响最大的情况。

永远不要忘记无障碍

如果有什么需要记住的，那就是我在开头写的：可访问性关乎影响每个人的压力案例。这就是为什么它不仅仅是“锦上添花”。可访问性就像数据库管理、应用程序架构、数据安全或远程麻醉枪一样重要——没有它们，事情很快就会崩溃，甚至可能化为灰烬。

可惜的是，你早期的教育和稀缺的大学课程都没有对此给予足够的重视。所以，你需要持续不断地研究无障碍方法，为其辩护，尽早将其应用到应用中，进行测试，并与他人分享这些信息。这当然很难，但无论对你的公司还是对开放网络的福祉而言，这项投资都是值得的。

您认为无障碍功能还有哪些方面需要更多关注？请在评论区分享！