欢迎！很高兴在我的 Vuejs 阿姆斯特丹会议 2022 总结系列的第五部分见到你，我在其中与你分享所有谈话的总结。

你可以在这里阅读我的 JSWorld Conference 2022 总结系列（分为四个部分），我总结了第一天的所有演讲。您还可以在我的博客中找到 2022 年 Vue 阿姆斯特丹会议之前的演讲。

（经常性）介绍

两年半之后，JSWorld 和 Vue 阿姆斯特丹会议于 6 月 1 日至 3 日再次在阿姆斯特丹剧院举行，这是我第一次有机会参加这个会议。我学到了很多东西，遇到了很多很棒的人，与优秀的开发人员交谈，度过了愉快的时光。第一天举行了 JSWorld 会议，第二天和第三天举行了 Vue Amsterdam。

会议充满了信息，有很多很棒的演讲者，他们每个人都教会了我一些有价值的东西。他们都想与其他开发人员分享他们的知识和信息。所以我想如果我能继续分享它并帮助其他人使用它会很棒。

起初，我尝试分享一些笔记或幻灯片，但我觉得还不够好，至少不如演讲者与我分享的那么好。所以我决定重新观看每一次演讲，深入了解他们，搜索，做笔记并将它们与他们的幻灯片甚至他们演讲中的确切单词结合起来，然后与你分享，这样我与你分享的内容至少是与我从他们那里学到的水平相同。

非常重要的一点

你在这几篇文章中读到的一切都是演讲者自己努力和时间的结果，我只是试图学习它们，以便将它们变成这些文章。甚至这些文章中写的许多句子正是他们所说的或他们在幻灯片中写的。这意味着如果你学到了新东西，那是因为他们的努力。 （所以如果你看到一些错误信息责怪他们，而不是我，对吧？xD）

最后但并非最不重要的一点是，我可能不会在一些演讲中深入研究每一个技术细节或实时编码。但是如果您有兴趣并需要更多信息，请告诉我，我会尝试单独写一篇更详细的文章。另外，不要忘记查看他们的 Twitter/Linkedin。

在这里您可以找到会议的程序。

工作的可重复使用的小部件！

Maria Lamardo - CVS Health 无障碍培训主管和无障碍工程高级经理

Vue.js 是一个了不起的框架，它可以让你快速构建可重用的组件。我们可以利用它在 ARIA（Accessible Rich Internet Application）的帮助下构建可访问的可重用小部件。使用 ARIA 角色和属性，我们可以通过提供额外的语义来提高某些元素的可访问性。在本次演讲中，我们将讨论如何遵循规范并构建适用于所有人的可访问和可重复使用的选项卡、手风琴、切换按钮和模式对话框！

模态

您需要了解的关于 ARIA 的所有内容都在W3C中有详细记录，建议阅读，但这里是它的抽象版本。

模态设计注意事项

• 它必须有一个关闭对话框的按钮。
• 对话框之外的内容应该被视觉样式（如灰色背景）遮盖。
• 确保您阻止用户与对话框之外的内容进行交互。

模态打开焦点交互

当对话框打开时，焦点可以设置在第一个可聚焦元素上，也可以设置在对话框顶部的静态元素上，以使内容更易于阅读并确保所有内容都保持在视图中，或者是交互时最常用的元素仅限于提供信息或继续处理。

您不想将焦点集中在对用户具有破坏性的事情上，例如，假设您有一个交互，您打开一个模式来删除您的帐户。您不想将第一个焦点放在“是的，删除我的帐户”上。

模态关闭焦点交互

当对话框关闭时，焦点将设置在调用对话框的元素上，或者当它没有意义时，您可以将焦点设置在不同的元素上，例如在调用元素不再存在时提供逻辑工作流的元素，或者如果在对话任务完成后的工作流中有后续步骤，尤其是在不太可能立即重新打开对话的情况下，则在下一个元素上。

模态键盘交互

模态技术注意事项

对话框容器应该有：

• 对话的作用
• 咏叹调模式设置为真。
• aria-label或aria-labelledby指的是对话框标题，这将帮助辅助技术弄清楚该元素的命名方式。
• 或者，您可以将aria- describeby设置为任何描述。

操作对话框所需的所有元素都应该是具有对话框角色的元素的后代。

 <div role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description" > <h2 id="title">Title of the dialog</h2> <p id="description">Information provided by the dialog.</p> <button aria-label="close">×</button> </div>

在 Mac 上，您可以通过单击 Command + F5 来激活默认的 Mac 屏幕阅读器 Voice Over，然后您可以浏览您的页面并对其进行测试。

同样在 chrome Dev-Tools 中，有一个可访问性选项卡，其中包含一些很酷的可访问性信息。

有了它，您可以打开这个示例并查看它，这里是代码。

切换按钮

如果您想要完整的信息，您可以在W3C网站上找到。

纽扣

按钮是允许用户触发操作或事件的小部件，例如提交表单、打开对话框、取消操作或执行删除操作。

除了普通的按钮小部件，WAI-ARIA 还支持 2 种其他类型的按钮：

• 切换按钮
• 菜单按钮

切换按钮设计注意事项

可以关闭（未按下）或打开（按下）的两种状态按钮。

要告诉辅助技术一个按钮是一个切换按钮，请为属性aria-pressed指定一个值。

切换开关上的标签在其状态改变时不能改变；如果标签在设计中发生变化，则不需要 aria-pressed 属性。

切换按钮焦点处理

• 如果激活按钮不会关闭当前上下文，则激活后焦点仍保留在按钮上。
• 如果激活按钮打开或关闭对话框，则遵循对话框模式。
• 如果按钮操作指示上下文更改，您可以将焦点移动到该操作的起点
• 如果使用快捷键激活按钮，则焦点通常保留在激活快捷键的上下文中

切换按钮键盘交互

切换按钮技术注意事项

• Toggle 按钮必须具有button的角色。

• 确保按钮具有可访问的名称。

• 您可以将aria- describeby设置为任何描述。

• 如果操作不可用，您可以将aria-disabled设置为 true。

• 切换按钮具有aria-pressed状态。

  
  

 <button aria-pressed="false"> Mute </button>

这是一个很好的示例，您可以查看这里是代码。

手风琴

这是完整的文档。让我们来看看它的要点。

手风琴设计注意事项

一组垂直堆叠的交互式标题，每个标题都包含一个标题、内容片段或代表一段内容的缩略图

手风琴标题：

表示内容部分的标签或缩略图，也用作显示和在某些实现中隐藏内容部分的控件。

手风琴面板：

与手风琴标题关联的内容部分。

手风琴键盘交互

手风琴技术注意事项

确保每个手风琴标题按钮具有：

• 包裹在标题中
• aria-controls设置为对应手风琴面板内容的ID
• 如果相应的面板内容可见，则aria-expanded设置为 true
• 如果不允许折叠手风琴，则aria-disabled设置为 true
• 每个面板内容都有角色区域和aria-labelledby到相应的标题按钮（可选）
• 避免在创建过多地标区域的情况下使用区域角色

手风琴代码示例

<h3> <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id" > Accordion 1 </button> </h3>

 <div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel" > Content Placeholder </div>

这是一个很好的例子和它的代码。

标签

您可以在W3C上查看 Tabs 的完整文档。

选项卡设计注意事项

选项卡是一组分层的内容部分，称为选项卡面板，一次显示一个内容面板。

选项卡列表： tablist元素中包含的一组选项卡元素

选项卡：选项卡列表中的一个元素，用作其中一个选项卡面板的标签，并且可以被激活以显示该面板

选项卡面板：包含与选项卡关联的内容的元素

建议选项卡在获得焦点时自动激活，只要它们关联的选项卡面板显示时没有明显的延迟。

选项卡键盘交互

选项卡可选的键盘交互

选项卡技术注意事项

Tablist 的作用：包含一组选项卡的元素必须具有aria-labelledby或aria-label 。

选项卡的作用：作为选项卡的元素必须有aria-controls与关联的选项卡面板配对，活动选项卡应将状态 aria-selected 设置为 true；所有其他选项卡都设置为 false。

如果选项卡元素有弹出菜单，它应该将属性 aria-haspopup 设置为 menu 或 true。

Tabpanel 的作用：包含选项卡内容面板的元素应将 aria-labelledby 与关联的选项卡配对，并将 aria-orientation 设置为垂直或水平（默认）。

选项卡代码示例

<div role="tablist" aria-label="Tabs Example"> <button role="tab" aria-selected="true" aria-controls="tab1-content" id="tab1" >Tab 1 </button> <button role="tab" aria-selected="false" aria-controls="tab2-content" id="tab2" tabindex="-1" >Tab 2</button> </div>

 <div tabindex="0" role="tabpanel" aria-labelledby="tab1" id="tab1-content"> <p>Content 1</p> </div> <div tabindex="0" role="tabpanel" aria-labelledby="tab2" id="tab2-content"> <p>Content 2</p> </div>

这是一个很好的例子和它的代码。

资源

ARIA 创作实践指南

Web 内容可访问性指南 (WCAG) 2.1

您可以在此处找到包含不同组件的完整 Vue 代码示例：

https://github.com/mlama007/Widgets

第五讲结束

我希望你喜欢这部分，它对你和对我一样有价值。

在接下来的几天里，我将与你分享剩下的谈话。敬请关注…

也在这里发布。