文章通过避免这 8 个易于理解的设计错误将同情心转化为行动

无障碍设计尊重所有人的独特性，无论年龄和能力如何。 首先要认识到并非所有人都和你一样。

为了最好地服务于不同的用户，必须理解和同情各种各样的人。 遵循 WCAG 2.0 AA 指南使内容可供更广泛的残疾人使用，包括失明和视力受损、耳聋和听力损失、学习障碍、认知限制、运动受限、言语障碍或光敏性。 为确保您为访问您网站的每个用户提供服务，请避免这八个可访问的设计错误。

1. 键盘陷阱

一些使用辅助技术的人依赖于可见的屏幕操作。 因此，好的设计可以确保所有与导航相关的内容都是可见的。 确保对项目进行逻辑排序（从左上到右下），以帮助用户理解内容并就导航做出明智的选择。

提示：

• 主要内容：考虑为用户提供一种轻松跳过顶级导航以访问主要内容的方法。
• UI 模式：遵循常见模式的语义，例如 Toggle、Tabs、Tables、Modal Windows 和 ARIA 属性。
• 悬停用法：不要在悬停状态后隐藏文本或操作。 如果仅使用键盘的用户看不到内容/按钮存在，则他们无法浏览页面。

好的跳过链接示例#1

好的跳过链接示例#2

2.色彩对比度不足

色彩对比不足会影响人们视觉接收信息的能力。 确保文本与其背景之间有足够的对比度以确保文本可读。 文本与文本背景之间的对比度至少应为 4.5 比 1。但是，如果您的文本至少为 24 像素或 19 像素粗体，则最小值降至 3 比 1。

提示：

• 调色板：注意原色。 此外，在选择颜色时，请牢记颜色对比度要求。
• 不要只依赖颜色：使用形状、颜色和文字的组合（不仅仅是单独一种）来传达意义，并保持一致。 至少提供两个指标，让那些不能轻易区分颜色的人仍然可以理解你的内容。
• 例外情况：文字、文字图像、图片和徽标不需要理解内容的含义，或者是纯粹的“装饰”。

对比度不足的例子

3. 图像中的文字

避免使用旨在阅读的文本图像。 使用带有 CSS 样式的实际文本，而不是基于图像的文本呈现。 在必须使用文本图像的情况下，替代文本必须包含图像中显示的相同文本。

提示：

• 图表、图表、表格：在数据可视化中使用真实文本。 如果不可能有真实的文本，则图像所传达的基本信息的文本表示是必不可少的。 例如：详细描述或列表视图。
• 例外：具有良好描述性文本替代品的徽标、品牌元素和图形。

图像中的好文本示例

4.隐藏的焦点状态

焦点状态帮助用户导航和了解他们在哪里。 永远不要隐藏它们。 焦点状态对键盘用户很重要。 它可以帮助他们了解他们在页面上的位置。 要测试您的网站，请尝试浏览您的页面并找到您的焦点。

提示：

• 焦点状态：如果您删除默认的焦点状态，请确保将它们替换为比浏览器提供的更好的内容。
• 输入状态：考虑一下当您关注输入时标签会发生什么。
• 页面动作：明确定义动作的焦点副作用。

隐藏的焦点状态

良好的焦点状态

5. 混乱的层次结构

在可感知的内容和可以通过程序确定的内容之间建立清晰的关系。 设计在语义上有意义的页面，以便开发人员可以将其从设计转换为代码，并且屏幕阅读器可以确定正确的阅读顺序。

提示：

• 语义：在表单上包含必填字段和标签。 带有列标题的设计表。
• 逻辑分组：使用充足的空间或背景颜色对相关元素进行分组。 按顺序呈现信息，例如流程图或分步说明。
• 渐进式披露：直接操作的设计。 在正确的时间呈现正确的事情。 进行渐进式披露。
• 寻路：为导航创建一致的提示。 使用标题在页面内创建清晰的地标。
• 一致性：以相同的方式呈现相同的事物。
• 区分：区分不同的内容类型。

糟糕的层次结构

良好的层次结构

6. 过度的认知负荷

清楚地传达易于理解的信息。 设计信息的方式便于患有注意力缺陷多动障碍 (ADHD) 和自闭症或自闭症谱系障碍的人使用。

提示：

• 简洁：使用简短的句子和视觉提示来分隔信息。 例如：使用数字或项目符号列出组。
• 最小化认知负荷：创建一个叙述，在正确的时间在正确的位置呈现信息。 避免呈现密集的可分解信息段落。 避免长线措施。

7. 无差别的超链接

链接是网络上最常见的元素之一，通常对于浏览网站至关重要。 链接应该看起来像链接，其他任何东西都不应该。 如果用户尝试点击看起来像链接但不是的文本短语或图形，他们可能会感到沮丧。 链接应该脱离上下文有意义。

提示：

• 变得具体：对按钮使用描述性词语而不是模糊的术语，以便结果是可预测的。
• 非下划线链接：链接文本与周围非链接文本的对比度必须为 3:1。
• 不要只依赖颜色：链接必须在鼠标悬停和键盘焦点上都显示“非颜色指示符”。例如：阴影、缩放、过渡/变换、颜色变化或下划线。

错误的超链接

好的超链接

8. 难以辨认的排版

网站上的大多数信息都是通过文本传达的，因此类型应该清晰易读。 这有助于视力低下的人轻松辨认人物。 它可以减轻有学习障碍的人的阅读压力。 使用干净、简单的排版和良好的间距。 应用舒适的字距调整和前导以确保文本易于阅读。

提示

• 赋予用户控制权：不要阻止用户通过将正文大小更改为较小的字体大小来定制自己的阅读体验。 您可以通过将字体大小设置为 100% 来做到这一点，并使用相对大小来建立标题之间的层次结构。 文本在 200% 时仍应清晰可辨。
• 减少下划线、斜体和大写：这些字母更难识别和阅读。
• 将长格式文本向左对齐：使用线性路径制作一致的布局，以供眼睛跟随。

放大 100%

调整文本大小。 检查您的页面是否可供视障用户和弱视用户访问和使用。 调整文本大小并确保页面上的所有内容都能正常工作。 重复直到达到 200% 缩放。 看起来很简单？ 这是。

检查排版的步骤：

1. 打开浏览器并将文本大小调整为 200%。 单击查看，选择缩放，然后单击放大 (Ctrl/Cmd ++) 以放大文本大小。
2. 看看屏幕上的内容是如何响应的。 页面上的所有内容仍应可读，并且不应丢失任何功能。
3. 检查交互是否仍然有效、文本是否重叠、重要文本是否已被截断或文本是否已被截断。

放大 200%

提示：

1. 打开浏览器并将文本大小调整为 200%。 单击查看，选择缩放，然后单击放大 (Ctrl/Cmd ++) 以放大文本大小。
2. 看看屏幕上的内容是如何响应的。 页面上的所有内容仍应可读，并且不应丢失任何功能。
3. 检查交互是否仍然有效、文本是否重叠、重要文本是否已被截断或文本是否已被截断。

资源

在美国，大约八分之一的人患有残疾。 如果将定义扩大到包括那些中度受损的人，这个数字将跃升至近五分之一。

未能容纳如此庞大的受众会限制网站对您的业务产生的积极影响——更不用说您的品牌与人们产生共鸣和激发信念的能力了。 构建一个可在尽可能多的浏览器中使用且可供尽可能多的人使用的可访问网站可以帮助您的业务——但这也是正确的做法。 因此，我们汇总了有关该主题的其他一些资源。

• 了解为什么企业考虑 Web 可访问性（并避免公司诉讼）很重要。
• 收听关于 Web 可访问性重要性的解决 B° 播客。

颜色对比

• Web AIM 对比检查器
• 可着色对比度检查器

结构

• 标题地图 Chrome 扩展
• A11Y 项目模式库

学分

• A11Y项目
• w3.org-WCAG 2.0
• w3.org- 标准和概述
• 可用性.org
• IBM 的可访问性研究
• 匹兹堡卡内基博物馆Disney.com 良好的层次结构