无障碍网页 101:为所有人设计
已发表: 2022-01-10网页设计是关于可访问性的。 大多数网页设计师的目标是为他们的观众中最多的人创造产品,将他们的设计像张开的网一样投射出来,为他们带来最大的用户涌入。
虽然该设计原则有逻辑,但它掩盖了一个更简单、更具包容性的原则:为所有人设计,而不是为大多数人设计。
优化内容,让每个可能的用户都能享受您的网站并与之互动,并访问可用的信息和数据。 参与这种做法将有助于开发更广阔的市场并使您的客户群多样化。 世界上 15% 的人口有一定程度的残疾。
这些人与其他所有人一样,经常使用互联网并严重依赖数字通信和工具。 优化您的网站以确保用户可以享受出色的体验可以扩展您的互动网络。 通过在您的设计中练习包容性,您将能够接触到数百万经常被忽视的人。
无障碍设计并不难。 它只需要简单并考虑到所有潜在用户。 以下是如何优化您的网站以获得最大的可访问性。
了解您的用户
了解您的受众在任何项目中都至关重要,因此这是最好的起点。 了解您的用户可以包括具有不同能力的个人。 您的一些用户可能有听力或视力障碍,其他用户可能患有癫痫症,其他用户可能仍有行动不便。

虽然您无法针对所有可能的场景进行设计,但如果您花时间尽可能多地思考,您将拓宽您的设计视野。 在您考虑了扩大的受众群体之后,请进行一些研究。 阅读案例研究,与有经验的朋友交谈,查阅无障碍指南。
也许尝试从教育领域学习,通用设计原则是一个很好的参考。
想想用户体验
既然您已经与未来的用户建立了理解,请将这种理解放入您的用户体验 (UX) 框架中。 此步骤将帮助您同情您的用户并考虑您以前可能没有想到的事情。 它还将为您指明各种辅助技术定义的方向。
正如设计师应该考虑每个主要浏览器中网站的行为一样,辅助技术应该是功能清单的一部分。 有时,即使是网页设计中最小的变化也可以为残疾用户打开新的大门。
一个简单的改变
例如,可能最容易实现的更改是如何使用强调标签。
在视觉上, <b>和<strong>之间没有区别, <i>看起来也与<em>没有任何不同。 但是对于残疾人来说,这些标签可以极大地改变他们的用户体验。
虽然它们呈现相同的、有效的粗体和斜体,但这些标签之间的区别在于它们的功能。 虽然更简单的粗体和斜体标签是表示性的(改变文本呈现方式),但强烈和强调表示辅助技术的不同语音模式。
但这并不像盲目地将所有<b>替换为<strong>那样简单。 例如,许多标题使用粗体文本进行对比,但对于残障用户来说,在这里体验<strong>标记可能不是最好的。 想一想,“用户是否需要以不同的方式说出这段文字才能体验其全部含义?” 如果没有,请考虑删除<strong>或<em> ,除非它们确实有必要。
像这样的细微变化和考虑可以为残疾用户带来很大的不同。 升级而不是降级 UX 很重要。
为视障人士设计
虽然上述建议已经使视障者受益,但并非每个有视力问题的人都会有相同的障碍程度或类型。 同样重要的是提供可以适应那些保留视力的人的选项。
考虑这些元素:
- 允许用户放大字体。 大多数浏览器都会在您同意或不同意的情况下执行此操作,但如果您为它准备了 CSS,它会看起来更好。
- 避免某些颜色组合,如红色和绿色或蓝色和黄色。 相反,为什么不使用颜色来增加转化率,同时增加可访问性呢?
- “替代文本”中的代码。 辅助技术可以阅读替代文本并解释页面上的任何图形。
- 在缩写中使用句点,即使是众所周知的。 屏幕阅读器处理信息的方式通常是语音:想象一下听到“Fibby”与 FBI
有关为视障用户整合元素的方法的更多信息,请查看美国盲人基金会。
为听障人士设计
尽管听力受损者需要较少的住宿,但最近在网站上使用视频的趋势增加了对智能设计选择的需求。 因此,如果您的网站包含任何听觉组件,请使用隐藏式字幕或手语翻译。
避免使用自动隐藏式字幕的诱惑 - 停下来查看使用自动转录处理的任何随机视频,以查看没有意义的单词翻译,并且可以产生效果。
对于特定的字幕指南,可以在此处找到全国聋人协会的建议。
光敏性癫痫的设计
围绕视频的普遍使用,特别是使用自动播放功能的视频的设计关注点之一,围绕着患有光敏性癫痫的用户。 这些用户可能会经历由频闪灯类型效果或移动图像触发的癫痫发作。 网页设计师可以使用光敏癫痫分析工具来检查其内容触发癫痫发作的可能性。
如果内容被确定为有风险但无法更改以降低风险,请始终警告潜在风险并且不要自动播放视频。 确保警告可见且靠近播放按钮。
为行动不便而设计
一些行动障碍的范围从精细运动控制的完全丧失到轻度震颤。 任一级别的损害都会在未考虑它们的网站上产生相同的用户体验:
- 用户必须付出更大的努力才能到达链接,并且可能很快就会感到疲倦。
- 用户无法浏览该网站,因为它不允许使用键盘。
- 必须滚动浏览长页面会导致疲劳,因为没有“返回顶部”或跳过选项可用。
针对触摸屏或精细鼠标输入进行了优化的站点可能会给行动不便的人带来更严重的后果,可能导致站点无法使用。
结合可以使用键盘操作的导航和可以将用户吸引到页面不同部分的频繁锚链接等设计元素可以大大帮助这些用户。
创建“基本”网站选项
你的设计完美无瑕、互动性强、引人注目,使用了公开市场上最新和最伟大的趋势——上述任何用户几乎都无法接触到。
如果这听起来像你的网页设计,一个更简单的替代方案是创建一个用户可以打开和关闭的“简单”布局。 这将吸引的不仅仅是残疾用户:例如,对于患有高对比度引发的偏头痛的用户,拥有一个易于访问的切换可能是成为客户或离开以应对三个小时的偏头痛的区别。
也不要止步于此。 为您的订阅列表应用相同的选项,允许用户在接收电子邮件营销之前轻松编辑他们的偏好。
继续了解您的不同用户。 继续想他们。 您对用户的理解和同情越多,用户体验设计就会变得越容易访问。 谁知道? 你甚至可以改变某人的世界。
