键盘可访问性的 UX 改进

我们如何在不影响任何其他用户的体验的情况下为仅使用键盘的用户和辅助技术用户提供可访问的用户体验？ 我们恳请 Deque Systems 的首席 UX 设计师 Aaron Pearlman 分享一些实用的工具和技术，以确保我们都为我们的用户提供包容和可访问的体验。

作为我们 Smashing Membership 的一部分，我们每周都会举办一系列现场网络研讨会 Smashing TV。 不虚张声势——只是实用的、可操作的网络研讨会，由业内备受尊敬的从业者主持，并提供现场问答。 事实上，Smashing 的电视节目表看起来已经很密集了，而且它对 Smashing 会员以及录音都是免费的——显然。

我们希望您能像我们一样享受这次网络研讨会！

Aaron Pearlman：你应该能看到我的屏幕。 好的，现在，让我……好了，很好。 嗯，大家好。 就像我说的，我是 Deque 的首席用户体验设计师 Aaron Pearlman。 而且我认为——呃，让我动一下——Zoom 往往会妨碍一些 UI，所以如果我看起来我在疯狂地移动并且鼠标希望它没有出现，我深表歉意。 因此，今天我们将讨论可以为仅键盘和辅助技术用户进行的优化类型。 正如我刚才提到的，这些类型的优化，这些类型的东西不会阻止其他人使用你的……它们也不会被其他人使用。 它们只是倾向于对主要使用仅具有键盘用户辅助技术的系统的用户更有利。

Aaron Pearlman：对于那些不熟悉这意味着什么的人来说，什么是纯键盘用户辅助技术——纯键盘用户是指通常只使用您的键盘来遍历系统的人。 所以他们会经常使用 tab 和 Shift tab 以及箭头键来遍历你的系统，所以专注对他们来说非常重要。 您可能会发现这个人可能有运动技能问题，也可能有视力缺陷，仅使用键盘的用户，然后辅助技术用户也使用键盘来遍历您的系统，他们也可能使用其他辅助技术，例如屏幕VoiceOver 或盲文阅读器之类的仪表。

Aaron Pearlman：所以，这就是我们所关注的——我们的这种性质的用户，因为很大一部分残疾人倾向于落入这个阵营。 这并不意味着所有人。 当然，两者之间有无数不同的残疾和等级，但为此，这就是我们今天要关注的内容。

Aaron Pearlman：所以，对我们将要介绍的内容进行一些概述：我们将讨论一些设计过程，其中可能会做一些我们可能会做的一些练习类型的事情在我们转到跳过链接之前，可能会进入，也可能不会。 然后跳过链接将成为我们将要介绍的功能之一，优化您的模式的方法，以及如何处理焦点。 所以，这些将是我们将要介绍的三大类，然后我们将有时间提问。

Aaron Pearlman：首先，我认为我们可以做一些 UX 设计过程概述。 我参加过不同的研讨会和工作，我发现有无数不同的人来自许多不同的学科，并不是每个人都是用户体验设计师，所以他们可能并不熟悉许多 UX 设计师所采用的过程。 因此，为此，我想我们只是简单地回顾一下，我们不会在上面花费大量时间，但我发现它值得简单回顾一下。 也因为它也将与可访问性设计联系在一起。 所以，大多数用户体验设计倾向于经历一个叫做发现的过程，它并不总是被称为发现，有时它被称为快速构思，快速迭代。 很多人给它起不同的名字，但关键是它是设计过程的一部分，其中发生了很多制造。

Aaron Pearlman：很多时候我们也会收集不同的想法和需求，这是一个进行大量研究并将其与您的组织目标综合起来并使用所有这些信息进行过滤的时候，而从中得出的结果通常是使我们能够构建我们将要制作的系统或我们正在制作的功能的工件。 这些往往是——它们并不总是——但它们往往是原型之类的东西，有时你也会看到从中产生的心智模型。 但是，某种保真度的原型反映了您的目标用户将如何实现他们的目标。 TLDR 是重复设计，我们与用户一起测试，然后再重复，与用户一起测试，再重复，与用户一起测试，最后，它最终将被构建。

Aaron Pearlman：您认为这很重要，对可访问性的考虑是我们希望在整个设计过程中考虑和实现可访问性。 不同程度的保真度可能值得考虑，考虑不同类型的事情，这真的取决于。 不会涉及太多，但总的来说，我们希望结合这些启发式和方法，随着设计师随着时间的推移增加我们的可访问性能力，就像我们提高成为优秀的能力一样随着时间的推移，用户体验设计师。 一开始并没有期望你会去阅读 WCAG 2.1，然后你会阅读 ARIA 规范，然后你会完成并且不会再犯任何错误，或者，在您的设计和无障碍设计方面，您不会错过任何东西。 无论如何，这不一定是合理的。

Aaron Pearlman：只要知道你会随着时间的推移而学习。 当然，我在可访问性以及我所做的所有事情上仍然存在错误，而这一切都是为了变得更好。 所以，[听不清] 因为我一直在设计可访问性。 因此，尽管它与我们今天将要进行的工作相关，但其中的一个小插件称为 Trane。 这是我们在 Deque 完全可访问的模式库，我们用它来构建我们自己的产品。 它是一个 HTML、CSS 和 JavaScript 前端框架，它与 Bootstrap 非常相似，如果你曾经使用过类似的东西的话。 我们还有一个反应库，它也是姊妹库。 我们的团队在反应中发展。 但是，我们今天将在这里查看一些内容作为示例。 但这是开源的，它是可用的，在本套牌的末尾会有一个链接，我将提供给每个人。

Aaron Pearlman：您可以免费使用并继续获取分支，并随心所欲地使用它或为它做出贡献，我们也希望看到对它的贡献。 所以只是一个小插头，但我们会在经历时提到它。 因此，我们首先要看的是跳过链接。 对于那些可能不熟悉什么是跳过链接的人来说，跳过链接是一些小链接，它们往往会作为 Web 应用程序或网站中的第一个制表位出现。 他们允许您做的是允许您绕过网站的某些部分。 你为什么想这么做？

Aaron Pearlman：嗯，如果你有一个菜单非常丰富的网站，那可能是一个很大的广告牌菜单，或者只是有很多东西，如果你是一个纯键盘或辅助技术用户，当你得到那个网站和您的 VoiceOver 开始读取它，甚至没有，甚至，也许您是一个有视力的用户，您只使用您的键盘，您将不得不在所有这些不同的项目中循环切换以开始无论您在那里进行的活动是什么，您想要开始的内容或工作区。 因此，跳过链接允许您做的是绕过通常，通常是导航以进入该应用程序的工作区。

Aaron Pearlman：有时可能有多个链接，通常只能看到一个，但我们有一些示例。 我将向您展示一个示例，说明您也可以使用多个跳过链接。 所以我想我们可以看看几个不同类型的跳过链接或几个不同类型的跳过链接，然后我们会看看另一个没有跳过链接的页面，也许会谈谈在哪里可能在那里有用。 我们要看的第一个，希望你能看到我的屏幕。 我们要查看的第一个是我们在 deque.com 上使用的跳过链接，它是什么，我称之为置换元素，因为它置换了页面。 所以当我进入这里时，我可以看到跳过链接在那里，它会告诉我跳到内容。

Aaron Pearlman：当我选择它时，它会将我发送到下面的内容，我称之为置换，因为它实际上插入并隐藏了自己，并将自己插入其中并置换了它。 这是我们选择用于内容的跳过链接，但它非常常见。 您会看到它自己插入到网站或 Web 应用程序的顶部。 下一个我们要看的是一个站点，我相信你们中的许多人已经使用或经常使用它。 这是亚马逊，我们将看看他们的跳过链接。 当我在那里点击时，如果你看那里的左上角，你会看到它被覆盖了，这是一种覆盖样式，这是非常非常常见的，它会覆盖内容，所以它通常会跳过任何内容在它后面向您展示跳转到那里的主要内容。

Aaron Pearlman：置换与覆盖之间的利弊可以忽略不计。 如果您发现您的内容是您永远不想混淆的东西，那么您可能想要插入一些东西并使用它，置换一个，反之亦然，没关系，这也很好。 如果您正在设计从右到左阅读的内容，例如阿拉伯语内容，您可以将跳过链接放在右上角，这可能值得。 这真的归结为什么是合适的。 但最终，这种自由裁量权将取决于他们团队中的设计师。 因此，这是两个跳过链接的示例，它们是单个跳过链接，我想我会向您展示一个在跳过链接中有多个选项的地方。

Aaron Pearlman：我要举出那个例子，这是来自我们的模式库。 现在对于这个特定的示例，我实际上不会设计具有多个跳过链接的东西，因为它并不真正值得这样做，但我们只是为了演示它而这样做。 因此，我将在左上角添加标签，我们使用一个覆盖显示两个跳过链接。 这些是这里里面的制表位，所以如果我再次点击制表符，我们将进入下一个制表符，如果我离开，它就会消失。 如果我再次点击，它会离开并进入顶部的标题。 我要将标签向后移动，向后移动标签，以便我们可以看到我们可以进出这里。

Aaron Pearlman：然后我将继续进入其中一个，以便您可以看到它。 当我选择它时，此时会发生什么，它会将我发送到工作区，它实际上聚焦于该工作区。 对于很多 Web 应用程序，您会看到它们实际上并没有显示焦点本身，我们想在我们的应用程序中表明，这不是元素的焦点，可以这么说，但它可以采取重点。 然后从这里开始，我们将集中注意力，然后我们可以转到里面的不同项目，它们是那里所有元素的焦点，[听不清 00:12:28] 元素。 因此，这些是您可以跳过链接的几种不同方式的示例。

Aaron Pearlman：就像我说的，模式库里面有一个例子，欢迎你使用它，我们也有它的一个版本，我相信这里有错误。 我们也有一个跳过链接示例，您也可以使用它。 所以我们在这里有几个不同的例子。 但这些是您可以使用跳过链接的常见方式的示例。 因此，它们主要有益于仅在使用系统技术时才使用键盘遍历系统的个人。

Aaron Pearlman：但有时，在其他情况下，跳过链接可能是有益的。 我已经看到它可能是有益的。 你可以想象一个例子，你网站的大工作区可能是一堆搜索结果，它会做一个懒惰的分数，你会滚动到底部，然后它会加载更多结果，然后滚动到底部，它将加载更多结果，您滚动到底部，它将加载更多结果。

Aaron Pearlman：嗯，你是如何到达页脚的？ 实际上我以前也遇到过这个问题，我去搜索引擎，但我从来没有找到页脚。 更好的是跳过链接，它实际上让我跳到页脚，因为我在页脚中寻找信息。 所以有一些方法可以跳过链接对此有益。 这不是解决该问题的唯一方法。 当然，您也可以使用硬键或快捷菜单。 有许多不同的技术可以实现这些目标，但跳过链接往往非常擅长 [听不清 00:14:13]。 设计跳过链接时要记住的一些事情是，通常它将成为您网站 Web 应用程序上的第一个制表位。

Aaron Pearlman：这通常是找到它的地方，所以如果我在尖叫或只使用键盘用户，我可以立即找到它。 这是我进入后可以做的第一件事。因此，如果它是我经常使用的网络应用程序，我可以直接做我想做的事情。 它还应该在信息中的位置（基本上在 AI 中）直观地描绘出来，因此您也可以放置跳过链接和应用程序的其他部分，就像我可以在这里放一个一样，如果我愿意的话，找一个很长的滚动堆栈站点，我想这样做，并且我想在某些内容中包含一个跳过链接。 我相当确定您可以锚定到类似的不同事物中，但它应该在应用程序内部直观地表示它应该在的位置。

Aaron Pearlman：总的来说，这非常罕见。 大多数跳过链接始终位于第一个制表位。 一般来说，不要那样做。 我认为你在技术上可以，但我会说不要。 最后一点是它是一个交互式元素，它是过去的颜色对比，所以请确保它确实如此，如果你决定使用图像或其中的东西，我会，但如果你这样做了，它需要有正确的可访问名称以及它。 一般来说，大多数人使用文本和链接，所以它会被标记为链接。 只需确保它通过颜色对比，以便它 [听不清 00:16:07]。 很好。 这就是我们对跳过链接的全部内容。

Aaron Pearlman：这是一种相当简洁但非常常见的模式，随处可见，而且您可以公平地添加它，添加到您的 Web 应用程序中相当简单，但对于使用键盘或系统技术。 所以让我继续并关闭它，让我们继续进行模态优化。 选择这样做是因为模态在大多数网络应用程序中非常、非常、非常、非常普遍，并且它们出现在许多不同的论坛中，模态的塑造和创建方式有很多不同的方式。

Aaron Pearlman：但是我看到的一些常见的事情出现在我们可以纠正的更多事情中，直到我们可以做一些优化以使其成为仅键盘和辅助技术用户的更好体验。 总的来说，我认为您的模态要好得多。 我想我会很快在这里展示的一件事是，Modal 需要做的一件重要的事情是它需要能够将焦点困在其中。 我想展示一个例子……它就在这里。 顺便说一句，我喜欢运球，所以这不是对他们的挖苦。 这可能只是这里的一个小疏忽。 我一直把它们当作一个令人愉快的网站，上面有很多很棒的东西。

Aaron Pearlman：所以，如果我要登录，哎呀，对不起，请登录。 这是一个模态，有时会发生一些事情。 如果你仔细注意到，我正在点击标签，标签，标签，标签，标签。 正如您在屏幕后面看到的那样，有点难以看到。 你可以看到焦点并没有完全被困在模态中，这有时会发生。 因此，如果我是使用辅助技术或仅使用键盘的用户，我将很难回到这一点。

Aaron Pearlman：这是非常、非常、非常、非常普遍的事情，当你在 Modal 中插入不同的有趣的东西时，它肯定会发生。 所以我们想要确定的事情，以及我提出这个问题的原因，实际上非常非常重要的原因是当一个模态被唤起时，它需要向唤起它的个人宣布自己，知道什么他们基本上只是打开了，但他们实际上打开了正确的东西。

Aaron Pearlman：因此，它可以宣布自己的方式是，模态的主体需要被聚焦，或者模态的标题可能被聚焦，这样我们就可以告诉正在唤起模态的个人，它正在发生的事情。 因此，如果他们有声音，例如，他们正在使用 VoiceOver，它会告诉他们他们在看什么。 所以我想我会举几个例子来说明身体可以聚焦的方式，然后是模型如何聚焦标题的例子，然后我们可以用它做什么。

Aaron Pearlman：我将在这里非常快速地打开这个。 很好。 所以他们为此提供的模式，我认为这是一个服装网站。 发生的事情是它专注于身体，我可以通过以下方式最好地展示这一点……我将很快打开 VoiceOver。 我要把它拉起来。

旁白： Chrome 上的旁白。] Bonobos，[听不清 00:20:10]-

Aaron Pearlman：而你将听不到——

旁白：谷歌浏览器，[email protected]

Aaron Pearlman：但你会看到的。

VoiceOver：关闭卡片，你的卡片是空的，组有键盘焦点。 您当前在开卡组中，关闭卡组，您的卡组为空组。 您当前在 Web 内容内的组中，VoiceOver 已关闭。

Aaron Pearlman：所以当我集中注意力时，它读出了你卡上发生的所有事情都关闭了，你的卡是空的，因为当时集中了购买。 这是完全有效的。 这是聚焦模态的一种非常有效的方式。 这根本不是问题。 然后从那里您可以循环浏览其中的所有内容。 当模态被唤起时，另一种常见的方法是关注标题。

Aaron Pearlman：这就是我们在用于我们的应用程序的模式中所做的就是关注标题。 所以我要唤起模态，正如你在这里看到的，焦点就在这里，它说的是带形式的模态，焦点就在标题上。 实际上，我们并没有将其表示为索引，而是以编程方式关注它。 我们以编程方式关注的原因是，当我在此处循环切换时，它现在转到关闭按钮，也在标题中，然后到第一个交互元素，即字段到下一个字段，到下一个字段，到下一个字段，再次点击保存，再次点击取消。

Aaron Pearlman：从这里开始，当我点击制表符时，如果该标题是制表位，它会去那里，但我们选择不这样做。 相反，我们走到了结尾，我们这样做的原因是，如果有人在使用 Voice Over，因为你可能已经看到了一些正在写的内容，并且同时进入了我的耳朵，这实际上有点分心，因为它说得很快，有点喋喋不休。 因此，我们想要为这里的体验做出的优化之一就是让它少一点喋喋不休。 所以，是的，我们宣布了它，当他们第一次到达那里时，我们以编程方式将模态与表单聚焦在一起，这样他们就知道他们所唤起的模态实际上就是他们目前关注的。

Aaron Pearlman：但我们不需要一次又一次地宣布它，如果他们要循环通过这种模式循环通过这种转变。 因此，对于您引用的大多数仅使用鼠标的用户来说，这是一个小的优化可能完全不可见。 但是那个小的优化，你可以想象，如果我经常使用模态来填写表格，并且我是一个使用仅键盘或辅助技术的用户，那么优化会随着时间的推移而增加。 因此，我们可以做的微小的用户体验事情，可以对我们可以在设计中投入的整体关怀产生重大影响，因此它们是我们可以提供的最常见的体验。

Aaron Pearlman：说到处理焦点，我们要讨论的最后一个是焦点处理本身。 我们看到了一个例子，如果在某些类型的处理中失去焦点会发生什么？ 但是，您处理注意力的方式不仅可以成为一个重大问题，还可以显着改变个人的体验。 关于处理焦点的真正规则，尤其是我们现在要研究的两个实例，即在您的工作空间或您正在工作的任何东西中删除和添加元素是......它绝对可以改变某人的方式与之交互。 因此，我们希望它遵循您对仅鼠标用户或有视力的用户（我应该说是仅鼠标用户）的预期体验。

Aaron Pearlman：在这种情况下，我们将看……因为在这里我们将看……好吧，让我把它拖过来。 坚持一秒钟。 我将不得不暂时把它带出这里。 我们去吧。 所以你不应该看到我设计的模态的例子，它实际上是一个模态，我们有两种它的图像，只有一个只是显示折叠下方的内容，而不是真正制作一个，真的错了，或者我只是把它分开，这样你就可以看到折叠下面的内容。 在右侧，如果你看，有一个垃圾桶图标，目前正在集中注意力。 所以当我们点击那个垃圾桶图标时，假设没有对话说，“你确定要删除它吗？”

Aaron Pearlman：让我们假设情况并非如此。 那么真正的问题是，那里的焦点会发生什么？ 因为当那个垃圾桶图标被点击或被选中时，它会删除这里的指令，它也会删除自己。 那么焦点在哪里呢？ 所以我们作为设计师，我们想要选择焦点在哪里，否则浏览器会选择焦点，如果你在 web 应用程序内部创建一个 web 应用程序，我们不希望浏览器选择焦点，因为它倾向于向身体扔东西。 因此，在这种情况下，我们真正想要聚焦的地方是我们希望聚焦到下一个可聚焦元素，不一定是……我称之为类似的东西，它将聚焦下一个垃圾桶，垃圾桶用于相反，我们将指令集中在自身上。

Aaron Pearlman：我们想要这样做的原因是，你可以想象如果有人不小心敲击了，只用他们的键盘敲回车，然后他们再次敲击回车。 它只会删除两组指令而不是一组指令。 我们希望，我们通过让这些东西在物理上相距很远来防止只有鼠标的用户出现这种情况。 但我们也希望能够防止这种情况发生，因为焦点是他们用来遍历它的东西。 所以我想我会展示另一个例子，说明当我们在此处删除整个部分的最后一项时我们会做什么。

Aaron Pearlman：现在我们有了烹饪指导，指导一的最后指导，重点在哪里？ 现在对于这个特定的，它将与前一个一样，实际上它将进入下一个焦点但又被填充，这是成分之一，原因与我们不想抛出的相同再次将其放入垃圾桶，因为如果有人再次点击选择或再次点击返回，我们将......他们会不小心删除两件他们无意中不想删除的东西。

Aaron Pearlman：出于同样的原因，我们不一定要将它扔到这里的这些链接之一，因为我们会遇到相反的问题，他们也会意外添加东西。 而且我们不一定希望它进入身体，因为我们进入身体，你的旁白用户，你的助理技术用户，只是会再次开始谈论模态，而不是让你继续互动和做你打算做的事。

Aaron Pearlman：最后，我在这里举的最后一个例子是，在这种情况下，当我们要删除最后一项时，我们该怎么做，在这里的模态中，什么都没有了。 我会把它寄到哪里？ 这绝对取决于设计师的自由裁量权。 不，如果您选择将它发送到衣服上或发送到焦点（可能是取消），它不会无法访问。 它不一定使它无法访问，只是这样，它真的归结为您期望的吗？ 你想传达什么信息？ 您想向该用户传达什么叙述以及我们选择将其发送到何处，因为我们选择将其发送回标题以让用户知道他们仍在模态中，他们仍然在那里，我们还没有t 对他们关闭它，例如那里。

Aaron Pearlman：所以这实际上是一个程序化的转变，因为就像我说的，这不是糟糕的声音。 它不像那样可怕的可聚焦元素。 因此，我们以编程方式将重点转移到这个特定示例中。 因此，这些是一些很好的例子，说明当您删除项目时可能需要关注焦点。 所以我认为你可以......我会展示一个你在添加项目时所做的例子。 所以我在这里有一个快速保持焦点的例子。

Aaron Pearlman：就在这里，我们要添加另一个……你可以只关注这里，添加另一种成分，然后在这种情况下转移到实际成分，你添加的字段有两个原因，一个，因为假设是通过添加我们想要与之交互的下一个字段，如果我是仅鼠标用户，这将是预期的行为，我可能会添加它，以便我可以真正开始在其中输入文本。

Aaron Pearlman：再说一次，我们不一定要继续关注另一种成分，因为如果他们再次返回，我们不想添加两种成分而不是一种。 它应该是前面例子的相反问题。 最后一个，我想展示的最后一个例子，因为我认为它可能值得展示......实际上我有那个例子，我可能会稍微提一下。 但是我可以很恰当地描述它，如果你有当你唤起模态时你会做什么？ 例如，您保存了一些东西，模式消失了，现在焦点在哪里以及我们倾向于做什么，但经验法则是您希望将其发送回任何元素 [听不清 00:31:03]得到。

Aaron Pearlman：因此，如果您想象如果您有一个小编辑铅笔并选择它，打开模态框，填写该模态框，点击保存，您希望将焦点发送回那个交互元素，这往往是……或者我们这样做。 在某些情况下，您可能希望将其发送到其他地方。 如果它是一个巫师，然后它去了其他地方，再次由设计师决定，你试图告诉我们去哪里的叙述。 但是对于像我刚才描述的那个……例子，这是很常见的。 你唤起一个模态，或者你用它做一些事情，结果它被解雇了，上下文不一定会改变。

Aaron Pearlman：而且你不想将焦点送回原来的位置。 这样做的原因是，仅使用键盘或辅助技术的用户可以回到他们所在的位置。 因为记住他们在那个空间里，而且那个空间对于他们如何穿越有点线性，特别是当你使用城镇来穿越一切的时候。 所以，我认为我们大约有 40 分钟，对于我所拥有的所有示例和内容，我们几乎是时间。 所以我将把它传回给斯科特。

斯科特：谢谢亚伦。 那太棒了，我们确实有很多来自与会者的问题，还有一些来自个人的问题，他们今天因为旅行而无法参加。 因此，经常参加我们网络研讨会的 Poan 问道：“当您删除项目时，我们不应该确认该操作并将焦点移到那里，然后转移到下一个元素吗？”

Aaron Pearlman：当移除一个项目时，你是否应该有一个……你是指像祝酒一样的通知，还是你是说你是否应该有一个实时区域让你知道正在发生的事情？ 如果您将焦点转移到删除一个项目，例如我刚刚在该特定实例中展示的那个删除的调用，应该足以让他们知道他们实际上已删除。

Aaron Pearlman：它应该消失了。 此外，如果他们正在使用 Voice Over，它也会接收到它。 如果您正在与某物交互并且它正在其他地方进行更改，例如，就像您做了某事然后它在某处更改了一些指标，您可能会想要使用一个有礼貌地做某事的活动区域让他们知道那已经发生了。 这有点超出了你具体工作的范围。 我希望这能回答你的问题。 它可能会潜入一些更具技术性的东西。 如果我们要深入研究技术实现方面的内容，我可能需要对其中的一些内容进行更多跟进。

斯科特：完美。

Aaron Pearlman：我的开发人员，所以他们不会引导你到达，但总的来说情况往往如此。 我展示的例子应该足够了。 如果你想要它，因为它是一个删除，你可以有一个临时部分，你抛出一个警报并说，“你确定要他删除这个吗？” 在哪种情况下，您只是进一步加强了正在发生的事情。

斯科特：太好了。 所以，是的，试着让问题集中在用户体验上。 那么从用户体验的角度来看，您将如何管理通知消息的焦点？

Aaron Pearlman：关注通知？ 如果你想看，我可以给你看一个。

斯科特：当然。

Aaron Pearlman：我们可以随机取回，因为我们碰巧有 toasts，也就是通知。 所以我要在这里打开祝酒词。 所以这实际上是现在的重点。 这个祝酒词被唤起，它现在正在被关注，你实际上可以，正如你所看到的，你可以在此处进入该子句。 所以，这取决于。 So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. 跳到主要内容。

Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.

Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. 它是完全免费的。 It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. 这太酷了。

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.

Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. 那是一个。 In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.

Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? 有价值吗？ Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

Aaron Pearlman：所以我们要做的一件事是我对我的设计进行大量注释。 从某些事物的大小到应有的外观和感觉的十六进制代码或 RGBA 值。 但是，您也可以添加一些可访问性注释。

Aaron Pearlman：然后只是进行交流，在构建过程中查看构建，确保您是否制作了任何自定义焦点，这些自定义焦点看起来很棒，检查颜色对比度，确保它通过，字体你有一些选择，当它们的重量更高并且它们更大时，它们会变得更大。 它们的颜色对比度不一定是 4.5。 它实际上可能会低一点，但你只想关注这些事情。 就像你也会关注体验一样。 你会想要关注那些你在设计中留心和注释的东西。

斯科特：所以我们还有几分钟的时间。 所以我再问一个问题。 有些人认为可访问性会扼杀整个设计过程的创造力。 你遇到过这样的事吗？ 你认为创意如何融入无障碍设计？

亚伦·珀尔曼：当然。 这是我对必须进行无障碍设计的最初反应之一，基本上有人给我戴上手铐，然后说，“你必须能够在一个小得多的盒子里工作。” 确实，无障碍设计意味着可能会面临更多挑战，因为您必须遵守更多规则。 但最后，我发现体验最终变得更好，但我没有……一旦我删除了那个误称并开始做越来越多的 WCAG 2.0 AA 可访问的设计，我注意到我几乎可以做任何事情我想做的事。

Aaron Pearlman：我有时只需要以与以前略有不同的方式表达或解决问题。 我想很多人在考虑无障碍设计时……我会给你一个非常具体的例子。 当他们考虑设计可访问性时，他们会想，“哦，好吧，例如，我不能做所有这些花哨的可视化。 我将无法做所有这些事情，因为它们将无法访问，因为如果一个人看不到它们，我将无法做到这一点。”

Aaron Pearlman：我正在设计一个基本的可视化，只是一种折线图，在它们下面，有一个折线图，在 x 轴上我认为是时间，在 y 轴上是使用情况或类似的东西那。 有一个漂亮的小渐变从它上面下来，在它后面有一些光线来描绘月份和时间。 当我与我的一位主题专家谈论使其易于访问时，结果证明我确信他会说，“不。” 但他说，实际上我只需要做一些事情来使这个非常漂亮的图表易于访问。 第一，顶部的那条线需要通过颜色对比，因为这实际上是在传达随时间变化的趋势信息。

Aaron Pearlman：它下面的渐变的东西只是装饰，只要它不干扰颜色对比和 y 和 x 轴线的传递并且最终没问题。 它后面的那些线没问题，但我最终在底部添加了刻度线以表明这一点。 然后当我悬停并集中注意力时，因为有时你可以悬停在它上面，它会在折线图的一部分上添加一个点，只要确保点本身会传递颜色。 对比。 我做了那种甜甜圈的事情，你把一个白点和另一个点放在一起，或者我应该说它的外面也有一个大笔划。

Aaron Pearlman：然后我在其中添加了一点处理，将那些淡化的线条带回前方。 而且这一切都通过了颜色对比，结果很好。 通过了非常漂亮的可视化。 现在授予，我没有进入所有可访问的名称内容并且能够做到这一点。 许多图书馆都在上面。 撇开这些不谈，至少我们称之为对比，因为我认为很多设计师都在苦苦挣扎。 你能行的。

Aaron Pearlman：这只是要真正注意这些类型的事情，获得​​更多的例子，尝试和尝试不同的事情，让其他人可以向你提出这些想法，然后来回反复检查，真的去做。 我不认为它真的会抑制任何东西。 它只是让你必须更清楚地思考你将如何做到这一点，并确保你通过镜头看到一个人如果视力低下，或者如果他们不能做到这一点。如果您正在构建媒体应用程序，则根本看不到或听不到。

斯科特：还有一个问题，但我认为我们应该谈到它。 您在流程的哪个阶段开始考虑可访问性？ 我将假设整个过程。

Aaron Pearlman：是的，它贯穿于整个过程。 我会多一点，而不是……我知道我说的是谁，这听起来有点轻率。 因此，在您进行低保真原型设计之类的事情的早期，您将考虑诸如一些标签顺序之类的事情。 你可能会考虑标题和结构之类的事情。 这些是您考虑的可访问性类型。 稍后，随着保真度的提高，您将更多地考虑诸如您选择的颜色和托盘，可能是可访问的名称，可能值得考虑的任何内容的替代文本，您可能正在考虑，例如，如果您正在做任何自定义焦点，那可能就是您要开始考虑的地方。

Aaron Pearlman：这并不意味着当你做低保真度时你不能考虑它只是意味着一般来说，当我经历我的过程时，这些事情往往属于这些类别。 你一直在考虑可访问性，但你并不总是考虑它的所有内容，因为你在低保真度的东西中，你在构思，你只是在考虑想法，你只是通过想法工作，让那些有创意的东西通过，当你变得更加适应可访问性时，它就会从本质上进入，并且会有更少的有意识的东西。

斯科特：是的。 很公平。 好吧，在这点上，我们已经没时间了，亚伦。 非常感谢您抽出宝贵时间，并且——

Aaron Pearlman：那太好了。 我度过了一段美好的时光。

斯科特：我想你会参加接下来的几次 Smashing 会议。

Aaron Pearlman：我会在纽约的那个。 我会在纽约的那个。

斯科特：好的。 你们在那里开研讨会吗？

Aaron Pearlman：是的，我们是。

斯科特：好的。 惊人的。 好吧，再次感谢您抽出宝贵的时间，让我们看看仍在观看的成员，下周我们将举办两场网络研讨会。 第一个是数字人的力量，与 Kristina Podnar 合作。 然后我们在与 Andrew Clarke 的系列中排名第三，Inspired Designs Decisions，排名第三的灵感来自 Ernest Journal。 非常感谢大家今天的出席。 同样，一旦我们完成编辑，该录音将在派遣会员面板中提供，我们希望下周与大家见面。 所以再次感谢艾琳。

这是一个包装！

我们衷心感谢 Smashing 会员的持续和善意支持——我们迫不及待地想在未来举办更多网络研讨会。

我们非常高兴地欢迎 Aaron 参加我们即将举行的纽约 SmashingConf（10 月 15 日至 16 日）——我们也很高兴在那里见到你！

如果您觉得这一系列采访有用，请告诉我们，您希望我们采访谁，或者您希望我们涵盖哪些主题，我们会尽快处理。