关于前端:FEARIA审核设计系统的可访问性译

自 2012 年开始我的职业生涯以来，对于包容性设计的常识始终受到妨碍和教学空白的解放。我的抱负是帮忙设计师解除妨碍，开发人员和技术人员想要建设更好，更具包容性的体验。在这篇博客文章中，我心愿特地告知我的同行设计师无关出于可拜访性思考而须要进入的中央。

我将专一于我认为设计师能够做的最要害的可拜访性工作：创立具备固有的可拜访性合规性的设计零碎。特地是，咱们将专一于学习如何在现有设计零碎中查找可拜访性问题，并以使这些问题对咱们本人和咱们的团队可行的形式记录这些问题。

您能够在 YouTube 上播本文的视频版本！

设计零碎和辅助性能

设计零碎到底是什么？设计零碎是产品，站点或体验的繁多事实起源。这些包含设计 / 开发组织的独特指标和一组价值，以及品牌元素和组成部分。设计零碎将相干的实现元素组合在一起，定义它们的目标并说明它们的交付。

如果正确实现，则设计零碎应随组织倒退并扩大。这些零碎之所以重要，是因为它们使咱们可能进行大规模的工作，做某事而后将其利用到各处并建设更统一的品牌。然而最重​​要的是，设计零碎是必不可少的，因为它也能够帮忙咱们扩大可拜访性。

咱们在零碎中创立的每个原子，分子和有机体都会影响咱们向上扩大规模并满足残疾人需要的能力。我对原子，分子和有机体的提及间接援用了布拉德·弗罗斯特（Brad Frost）的“原子设计”（如果您对设计零碎的思考感兴趣，我建议您浏览）。

当“原子设计”于 2016 年公布时，它标记着数字化设计思维的一个重要转变。只管许多团队曾经开始应用模式库和框架，例如 Bootstrap，然而“原子设计”抵赖咱们都开始看到的货色：数字化设计须要更好的零碎。

四年后，当设计团队为设计零碎辩护时，依然会定期援用 Brad Frost 的书。咱们还能够应用这种办法来帮忙告知如何大规模设计可拜访性，以及如何审核咱们的零碎以确保可拜访性合规。在《原子设计》中，布拉德·弗罗斯特（Brad Frost）应用原子办法合成了设计零碎的规模。咱们的零碎实质上是互相重叠的，从元素（例如原子）开始，这些元素能够组合以创立分子，并且能够进一步组合以造成生物。

这些生物告知并创立模板，而后能够将其利用于咱们平台中的特定页面。在这个规模上，每个人和每个团队都有不同的了解或行话，然而这些准则的基本要素往往会在大多数数字设计零碎中始终如一地存在。

咱们不用具备强壮或“完满”的设计零碎即可应用此办法或审核可拜访性。无论咱们的团队是刚刚起步，曾经有记录良好的可用零碎，还是介于两者之间，都能够在咱们的设计零碎开发中的任何时候利用此博客文章中介绍的内容。

亚原子粒子

让咱们从合成原子设计的扩大规模开始。然而在探讨原子之前，让咱们先谈谈咱们的“亚原子粒子”，即形成咱们设计零碎的根底元素。

它们不是咱们的原子，但它们能够告知原子的产生。这些亚原子粒子往往是 品牌 色彩或字体之类的货色。只管仅这些元素仿佛对于咱们的零碎而言并不是最重要的，但它们会影响咱们创立的所有元素，从最小规模到残缺页面。

原子

Atoms 高深莫测地展现了咱们所有的 根本款式，这对于咱们在开发和保护设计零碎时一直回头是很有帮忙的参考。一些零碎比其余零碎具备更大的粒度，因而请留神，在这种状况下，“原子”之类的词有时在不同团队中可能具备不同的含意。

就咱们的目标而言，原子是诸如 表单标签，输出和按钮 之类的元素，以及其余在不进行起作用的状况下无奈合成的 元素。上面的示例是一个标签，一个下拉选择器和一个按钮，每个按钮都充当一个惟一的原子。然而，就像自然界中的原子一样，界面原子也不是在真空中存在，只有在利用中能力真正实现。

分子

在下一步进行原子级扩大时，咱们有了分子：分子是元素或原子的绝对简略的组，它们一起作为一个单元起作用。

例如，表单标签，下拉选择器和保留按钮当初能够是功能表单字段单元。当联合在一起时，这些形象原子忽然具备目标。在领有标签，下拉菜单和按钮之前，然而当初咱们能够通过组合这些元素

当初，抉择按钮原子会保留下拉输出，并且标签会批示这些输出的用处。后果是：一个简略，可移植，可重用的组件，能够将其搁置在须要下拉输出或保留表单的任何地位。

生物体

再次扩充规模：生物体是由分子和 / 或原子群甚至其余生物体组成的绝对简单的组成部分。这些生物造成界面的不同局部。

从分子积攒到更精密的有机体，为设计师和开发人员提供了根本的环境意识。有机体体现出较小，较简略的动作成分，并作为可重复使用的独特模式。

以下是咱们利用于特定环境的示例下拉 / 保留表单，在这种状况下，是送货信息表单。该生物还由其余原子和分子组成，具备更特定的目标。

模板和页面

解脱类比，咱们能够应用咱们的原子，分子和有机体来创立模板和页面。模板是页面级对象，可将组件搁置在布局中并说明内容构造下的设计。

如果咱们将页面的构造重用于许多不同的应用程序，则能够将该模板用于其余页面。模板显示所有必要的页面组件一起运行，从而为咱们绝对形象的分子和生物提供了上下文。

通过定义页面的模板，咱们能够创立一个阐明不同动静内容的零碎，同时为填充某些设计模式的内容类型提供所需的防护栏。

最初，页面是模板的特定实例，这些模板显示了具备理论代表性内容的体验的样子。除了向用户展现最终界面时，页面还是测试底层设计零碎元素有效性的要害。咱们能够看看在页面级将理论内容利用于设计零碎时，所有这些模式如何放弃。

在上面的示例中，咱们采纳了运送信息表格，并将其利用于网站或应用程序中的特定页面。

设计零碎遗记辅助性能时会产生什么？

因而，咱们曾经将原子带入一个分子中，将该分子与其余原子和分子捆绑在一起以创立有机体，而后将其利用于页面和 / 或模板。这些是使咱们的设计零碎在设计和开发中蓬勃发展的根本设计准则。规模正当的设计零碎能够使围绕用户需要的想法变得有限容易，并使咱们的工作流程更加高效。很简略，对不对？

然而，请稍等！

原子设计十分好，然而当咱们创立此示例界面时，咱们并未思考可拜访性。咱们只是在思考设计零碎。这样做可能会对整个零碎产生影响，所以让咱们退后一步来理解其中的一些影响。

在示例界面中，咱们创立了一个页面，其中蕴含但不限于以下问题：

• 应用无视觉标签的汉堡菜单，并且程序化标签四周不清晰。汉堡菜单无奈提供清晰的上下文，并且用户在不加上视觉和程序化标签的状况下就难以了解其目标。
• 表单字段都没有必填的批示符，因而用户不会晓得必填或可选的内容。
• 表单字段的边界对比度很差，这意味着用户可能很难晓得在哪里抉择表单字段来输出数据（以后对比度为 1.48：1）。
• 表单字段标签彼此相邻搁置。用户是否能够在不损失内容或性能的状况下在此界面上放大 200%？
• 没有提供输出阐明。如果输出与所需格局不匹配，用户是否晓得如何避免谬误产生？
• 保留按钮上的色彩对比度不够高。后果，用户可能难以浏览它（以后的对比度为 2.38：1）。
  

设计应思考可拜访性

可能会有比这更多的问题，然而咱们能够开始了解，只有多数事件会很快使无法访问的事物变得很快。如果咱们在不思考可拜访性的状况下应用原子，分子和生物，那么即便在咱们的整个教训中，咱们也会在整个页面中遇到波及可拜访性问题和问题的元素。审核整页可能会有些麻烦，尤其是当问题与组件的固有设计或组件的结构无关时。

为简化起见，让咱们回到最开始。在咱们制作有机体或分子之前，咱们曾经有了原子。咱们能够从一个原子（即咱们的按钮）开始查看此页面的可拜访性。咱们的示例按钮设计可能有一些毛病，然而为了简略起见，让咱们集中探讨它不合乎色彩对比度规范的状况。

这个谬误不仅与咱们的原子无关，而且与咱们的文字款式和色彩选项中的亚原子无关。在本文的后面，咱们探讨了这些根本元素以及它们如何影响这些设计。当初咱们能够看到应用这些根底来创立原子而无需思考可拜访性的结果。

咱们的按钮在其背景中应用了天蓝色，并在顶部应用了红色文本。咱们的文本为 14 像素，大写，半粗体。当咱们应用色调比照查看器测试此按钮时，咱们能够晓得此按钮不合乎色调比照要求。当对比度须要达到 4.51 以通过最低要求程度时，这种色彩 / 类型的组合的比例为 2.39：1。

此处显示的对比度查看器是 Figma 的 Stark 插件。
然而，正如我之前提到的，这种色彩组合不仅会影响此组件，还会影响更多。咱们晓得某个组件存在问题，并且咱们晓得它很可能会影响其他人，因为它的问题是基础性的。这是咱们的审核真正开始发挥作用的中央。

设计应思考可拜访性

诸如色彩比照示例之类的问题就是为什么设计须要思考可拜访性，尤其是在设计零碎中。在设计社区中存在一个误会，即可拜访性通常是开发人员的责任，然而当开发人员以设计为核心时，他们便无奈解决设计零碎问题。

实际上，去年的 Deque 案例钻研发现 67%的可拜访性问题都源于设计。

如上所示，如果不及早且常常解决，解决可拜访性问题可能会减少破费的工夫和金钱。因为设计零碎是咱们最无效地扩大的形式，因而在这些零碎中优先思考可拜访性能够节俭大量工夫和金钱。当在咱们的设计零碎中广泛应用时，修复诸如色彩比照之类的问题会导致咱们产品的全面可拜访性改良。

审核设计零碎

查看现有文件中的内容

在开发之前，最简略的工夫来查看咱们的设计是否合乎可拜访性。然而，咱们中的许多人都在设计零碎中应用实时组件，航行中组件，甚至是实时但未记录的组件的组合。设计零碎的可拜访性审核的开始步骤看起来像是规范组件审核。咱们要查看咱们的组件，这些组件被最踊跃地用于创立设计和记录现有内容。

咱们当初还不用开始思考可拜访性。相同，这里的目标是记录存在的内容并将具备类似目标的元素收集在一起。在使咱们的工作更易于拜访之前，咱们须要理解零碎当初的可拜访性以及须要走的间隔。咱们能够审核单个组件，相干组件或整个组件零碎。咱们甚至能够审核一个按钮，但依然能够取得可行的后果。这与咱们要如何解决它以及一段时间内领有的资源无关。

咱们可能会发现现有的设计组件包含原子，分子和生物。重要的是要捕捉所有这些，并留神它们的预期目标。咱们不用写残缺的文档或诸如此类的货色，只需做笔记即可。

捕捉所有实时组件

同样，咱们应该捕捉所有实时组件。咱们能够通过援用咱们的设计文件，开发库，实时教训或两者之间的任何内容来做到这一点，只有咱们捕捉存在的内容或打算制作的内容即可。咱们还应该包含诸如悬停或焦点之类的不同交互状态之类的货色。

为此，咱们能够通过屏幕快照捕捉每个模式库和实时组件，而后将其上载日期，工夫和地位的文件上传到清单文件中。而后，能够将捕捉的每个我的项目搁置在按目标命名的页面上。在记录以后存在的内容时，以这种形式捕捉组件十分有用，因为以后存在的内容很容易在实时产品中更改。这样能够确保咱们可能记住它们的存在工夫和地点。

请记住，捕捉这些组件的目标是首先审核零碎自身以及存在的内容。您的过程的这一部分仅仅是对于理解咱们的用户正在与之交互的内容，并确保咱们可能理解某个组件对系统整体造成的影响。

例如，咱们的按钮将对咱们的用户产生更大的影响，因为它们是咱们体验中应用的外围组件。如果其余组件与必要的交互（例如用户的登录能力）相干，则可能仍会产生重大影响。

穿插援用并开始绘制问题

在零碎审核的最初一部分，咱们要确保咱们捕捉的内容在咱们所有教训中都是统一的，并记录所有独立或独特的实例。咱们须要确保设计中的这些按钮与开发库中的按钮保持一致，并且还与理论应用的按钮保持一致。

在捕捉实况时，咱们能够与咱们的设计团队进行穿插援用，而后咱们能够开始看看存在哪些差距。当初您可能在想：“仅仅审核咱们的设计零碎不会对可拜访性有所帮忙！”然而请记住，可拜访性应该纳入咱们现有的设计零碎策略中。咱们须要对咱们的设计零碎进行审核和扩大，以使其可能扩大可拜访性。这些做法应齐头并进。

当初，咱们曾经审核了零碎，当初能够探讨须要查看哪些内容以确保可拜访性合规性以及如何进行。

将可拜访性纳入咱们的审计

设计中常见的可拜访性问题

咱们应该在设计方面审核什么？正如咱们之前提到的，可拜访性问题中有 67%是从设计开始的，所以它可能比咱们意识到的还多！Web 内容可拜访性指南中概述了许多我的项目，其中许多与设计一样波及设计。只管咱们后面的示例着重于数字设计中可拜访性的典型示例，但咱们须要牢记的不仅仅是色调比照。

设计中须要概述的其余一些规范可拜访性要求包含：

• 色彩应用
• 内容策略
• 题目构造
• 链接行为
• 悬停状态和焦点状态
• 表格（谬误，标签等）
• 布局（一致性，响应性）
• 媒体（字幕，代替文字等）
• 制表符程序和旁路块
• 定时
• 版式
• 和更多！

WCAG 的《疾速参考指南》是参考咱们须要思考的一个好中央，其中包含所有这些内容以及更多内容，以及满足这些准则的形式。在进行审核和通过审核运行组件时，此疾速参考也十分不便。

当咱们有一组按目标概述的组件时，咱们能够更轻松地浏览 UI 并理解其余可拜访性需求。当初，咱们能够依据原子，分子和有机体的款式和用处来钻研它们，这将帮忙咱们解决更多的外表问题。

除了色调比照，可拜访的设计还有更多内容。

您可能在想，WCAG 是否真的仅实用于色彩比照或 UI？然而，咱们设计零碎中的可拜访性审核不仅波及色调比照或 UI。审核咱们的设计零碎的可拜访性与 UX 以及 UI 一样重要。正如咱们所探讨的，可拜访性大部分位于零碎的其余局部，包含内容，层次结构，图像等等。只管 UI 可拜访性的确很重要，但设计人员偏向于认为咱们对可拜访性的责任次要集中在色彩和类型上，因为咱们没有意识到 UX 与可拜访性的紧密联系。

因而，让咱们一起回顾一下组件。

此示例警报设计为具备一组不同类型的音讯：信息，胜利，正告和谬误。咱们能够通过此警报考察几个用户体验我的项目。例如，咱们能够问问本人，这些图标是否应具备代替文字？假如这些图标以后没有代替文本，但咱们认为它们应该显示，因为咱们心愿该图标向可能看不到该图标的用户传播正告音。

因而，在可拜访性审核中，咱们能够留神到这些图标没有应用代替文本，并将其与 WCAG 1.1.1 非文本内容相关联。如果咱们在其余中央出于相似目标应用这些图标，则审计中的此正文将帮忙咱们将 UX 元素扩大到许多不同的实例。

或者，假如咱们的谬误警报在一个警报容器中显示了多个谬误。咱们将须要询问该警报是否标识了须要修复的谬误，谬误的地位以及如何修复它们。如果咱们的警报没有执行这些操作，则能够记录该问题并将其与 WCAG 3.3.1 谬误标识关联。

这些只是咱们作为设计师能够并且应该在思考现有组件并构建新组件时应该问本人的问题。如果咱们将这些组件放在一起，并提供它们的上下文参考，那么对于咱们来说，更容易了解潜在的可拜访性差距并将其增加到咱们的审核中。

在咱们学习如何记录审核之前，还有最初一件事：咱们的设计零碎审核应该同时审核设计和可拜访性代码。如果咱们的组件位于组件库中或处于运行状态，咱们也将要查看它们的代码。因为只管咱们能够解决设计中 67%的问题（如所有可拜访性），但咱们的工作不会在一个团队中开始或进行。

我晓得有些设计师可能会对审核代码的可拜访性问题有些畏惧，然而咱们不用是开发人员即可审核代码。要查看代码，咱们能够间接与开发人员单干，甚至能够应用使咱们可能在页面或特定组件上审核代码的工具通过。许多工具使咱们可能审核页面或特定组件上的代码。

我会呐喊 Chrome 开发者应用斧头 DevTools 插件，这是设计师在审核设计零碎时尝试的好抉择。当您抉择更多信息，与之相干的 WCAG 规范以及用户影响时，Axe DevTools 会告诉您问题出在哪里。应用此工具，咱们能够运行自动化测试和指导性手动测试，以彻底审查咱们的设计和代码。

应用 ax DevTools：

1. 在 Chrome 中，我将右键单击并抉择“查看”，而后抉择“ax DevTools”选项卡。
2. 对于组件审核，能够抉择“扫描我的页面的一部分”。而后，抉择页面中您要审核的局部，而后单击“扫描”。
3. 应用 突出显示 工具将重点放在您要关注的设计我的项目上
4. 保留 后果或 将问题 导出 为 CSV 或 JSON 文件
   

如何记录审核

到目前为止，我曾经探讨了什么是设计零碎以及在设计零碎可拜访性审核中要寻找什么，然而让咱们探讨如何记录审核。我晓得我曾经暗示过要在审计中增加一些内容，然而看起来如何？

包含背景详细信息

请参考此背景示例以及“辅助性能审核模板”中的其余详细信息。
任何辅助性能审核（无论是咱们的设计零碎，代码还是页面等）都要求您从构建背景开始。咱们应该提及谁在审核，咱们正在审核的摘要以及咱们心愿满足的可拜访性级别。咱们还心愿包含审查范畴，时间表和概述审查过程。

此背景至关重要，因为在实现审核后将始终援用咱们的审核，并且咱们须要确保正在审核的人都有进行审核的背景。如果咱们的评论较旧，则无论谁查看它，都可能晓得它不再具备相关性。包含这些详细信息将帮忙咱们和咱们的同行最大限度地利用审核。它还将为未来的审核创立杰出的比拟基准。

建设您的审核

既然咱们曾经探讨了审计自身，那么我将仅简要地介绍构建审计的过程。列出咱们捕捉的我的项目列表将有助于咱们理解存在的问题，严重性以及解决问题的办法。

如果咱们应用的是斧头 DevTools Pro，则能够导出后果并依据组织的须要对细节进行微调。默认状况下，Axe 总是蕴含大量详细信息，因而我发现能够轻松地依据我的受众和审核要求进行自定义。咱们还能够在遇到更多问题时或在何时 / 是否在设计工具而不是代码中进行审核时，将我的项目手动增加到咱们正在应用的 CSV 或 JSON 斧头文件中。

通常，我倡议至多包含：

• 我的项目 / 组件–与此问题相干的组件是什么？屏幕快照的链接在这里很有价值，因为它们能够帮忙某人了解咱们所指的内容。
• WCAG 指南– WCAG 中的哪些问题与此相关？应用 WCAG 的疾速参考指南链接到相干 WCAG 项能够对设置上下文有很大帮忙。
• 影响–这会对用户或企业产生多大影响？该我的项目多久应用一次（更多 = 产生更大影响）？此项用于必要的操作（例如登录）吗？AxenDevTools Pro 将举荐影响力，这对作为基准很有帮忙。
• 形容–详细描述发现的问题
• 倡议–阐明您的团队解决问题的形式。在许多状况下，能够通过多种形式解决问题。咱们能够形容可能的修复程序，以帮忙咱们的团队理解选项。

我激励您自定义办法，以找到最适宜您和您的团队的办法。最重要的是，您正在尝试以使问题可操作的形式记录问题，以便您的组织或团队能够采取相应的口头。

小组主题和常见我的项目

此外，在进行和记录审核时，我倡议将常常产生的我的项目分组在一起。再次，这涉及了咱们的原子尺度：如果在许多不同的我的项目上都产生了对比度问题，则能够将它们归为一组问题。分组和主题化，特地是对于您的设计零碎审核，十分重要，因为这意味着您将产生更大的影响，而不用在许多不同的中央进行大量的微调。设计零碎的弱小性能在于，只需付出一点点致力，一项更改便会产生可观的影响。

留神用意与利用

要记住的另一件重要事件：您可能会发现，当您独自审核设计零碎时，并没有捕捉到须要使所有内容都更易于拜访的所有内容。这是因为设计人员偏向于在简单的零碎中工作，而设计零碎都与用意无关。因而，在某些状况下，您在审核和修复中捕捉的内容可能不适宜您的设计零碎的应用程序。

您的原子可能很棒并且易于拜访，然而您的有机体须要更多的关注，因为它们在特定状况下更加独特。兴许因为您最终应用的正本之类的货色而无法访问您的设计零碎组件的实现。

这就是我经验原子量表的起因之一：帮忙咱们理解用意和利用之间的区别。从设计零碎开始将走得很远，然而因为应用程序不同，不肯定要修复实时站点上的所有内容。

您应该如何解决审核？

一旦实现审核，下一步该怎么做？首先，您须要应用创立的电子表格中的发现后果来受权您的团队。拿到蕴含数百个我的项目的电子表格有助于解决问题，然而如果您只给利益相关者一个电子表格并说“你去了！”，那将是令人生畏的。

相同，这是您应该执行的审核工作，以使其更有用：

• 概述影响区域并确定要害，重大，中等，较小和最佳实际的项目数。
• 确定要害主题，即整个零碎中最常见的我的项目。
• 创立一个影响框架，以确定哪些问题影响最大，工作量最低。
• 以一种可消化的踊跃形式与您的团队和组织共享后果。
• 与利益相关者一起确定改良的优先级。

使您的审核工作为听众

可拜访性审核自身最重要的事件是使其可操作并与团队共享后果，使他们易于学习和采取行动。

上面是一个针对客户的审计共享示例，其中我概述了最常见的问题，主题和影响较大的我的项目。完结审核后，咱们须要确保以高水平介绍已发现的所有内容。也就是说，咱们须要概述确定和确定主题最要害的局部，并共享一个影响框架，以帮忙确定哪些问题能够最快地失去解决并产生最大的影响。

将这些内容与咱们的残缺审核一起，意味着咱们能够以一种易于消化的形式共享后果，并与利益相关者一起对改良进行优先级排序，同时还领有针对每个问题采取行动的详细信息。

不适宜残疾人士的设计

最初，请记住，可拜访性只是设计的一种模式，须要探讨和测试所有设计的形式。区别在于可拜访性是确保残疾人的需要可拜访咱们的设计。

无障碍设计的最重要方面之一是与残疾人并肩而不是为残疾人设计。WCAG 由残疾人编写，并由残疾人编写，因而非常适合在审核中应用。但这就是所有吗？不，像所有设计一样，可拜访性要求咱们与人们交谈并理解他们的独特状况，尤其是在应用咱们的网站和产品时。

审核不能代替残疾用户进行测试和设计。只管我不会在这篇博客文章中（兴许是另一篇文章）倡议一种完满的包容性钻研策略，但我还是想指出这一点，因为我不心愿任何人认为审核是对于可拜访设计的所有。这是一个要害组成部分，但咱们须要一直听到并尊重用户的需要和残疾人。我激励您从审计中取得见解，找到办法询问用户的想法，与他们一起测试您的想法，并特地留神边缘化的用户。

概括

无论您对可拜访性有多称心，开始审核设计零碎的可拜访性都是一项艰巨的工作。然而，我想激励您放弃好奇心。许多设计师都没有承受无关可拜访性的培训，而这是在教育机构而非您身上进行的。您对学习感兴趣的事实是十分重要的一步。

如果您不相熟审核设计或代码的可拜访性，请尝试应用 DevTools Pro 斧头，关上 WCAG 的疾速参考，而后轻易记录发现的内容。问本人问题。向您的团队发问。只是捉弄这些工具，略过这些准则，而好奇会带您走远。诚实说，我的无障碍常识很多都来自于这些实际。

开始审核的工具：

1. 斧头 DevTools Pro
2. WCAG 的疾速参考
3. 观看如何应用我给的 axe-con 演示文稿进行审核
4. 原子设计，布拉德·弗罗斯特（Brad Frost）
5. A11y Project 的辅助性能清单

原文

https://www.deque.com/blog/au…