欢迎！很高兴在我的 Vuejs 阿姆斯特丹会议 2022 总结系列的第五部分见到你，我在其中与你分享所有谈话的总结。 你可以在 阅读我的 JSWorld Conference 2022 总结系列（分为四个部分），我总结了第一天的所有演讲。您还可以在我的博客中找到 2022 年 Vue 阿姆斯特丹会议之前的演讲。 这里  （经常性）介绍 两年半之后，JSWorld 和 Vue 阿姆斯特丹会议于 6 月 1 日至 3 日再次在阿姆斯特丹剧院举行，这是我第一次有机会参加这个会议。我学到了很多东西，遇到了很多很棒的人，与优秀的开发人员交谈，度过了愉快的时光。第一天举行了 JSWorld 会议，第二天和第三天举行了 Vue Amsterdam。 会议充满了信息，有很多很棒的演讲者，他们每个人都教会了我一些有价值的东西。他们都想与其他开发人员分享他们的知识和信息。所以我想如果我能继续分享它并帮助其他人使用它会很棒。 起初，我尝试分享一些笔记或幻灯片，但我觉得还不够好，至少不如演讲者与我分享的那么好。所以我决定重新观看每一次演讲，深入了解他们，搜索，做笔记并将它们与他们的幻灯片甚至他们演讲中的确切单词结合起来，然后与你分享，这样我与你分享的内容至少是与我从他们那里学到的水平相同。 非常重要的一点 我只是试图学习它们，以便将它们变成这些文章。甚至 这意味着如果你学到了新东西，那是因为他们的努力。 （所以如果你看到一些错误信息责怪他们，而不是我，对吧？xD） 你在这几篇文章中读到的一切都是演讲者自己努力和时间的结果， 这些文章中写的许多句子正是他们所说的或他们在幻灯片中写的。 最后但并非最不重要的一点是，我可能不会在一些演讲中深入研究每一个技术细节或实时编码。但是如果您有兴趣并需要更多信息，请告诉我，我会尝试单独写一篇更详细的文章。另外，不要忘记查看他们的 Twitter/Linkedin。 您可以找到会议的程序。 在这里 工作的可重复使用的小部件！    - CVS Health 无障碍培训主管和无障碍工程高级经理 Maria Lamardo Vue.js 是一个了不起的框架，它可以让你快速构建可重用的组件。我们可以利用它在 ARIA（Accessible Rich Internet Application）的帮助下构建可访问的可重用小部件。使用 ARIA 角色和属性，我们可以通过提供额外的语义来提高某些元素的可访问性。在本次演讲中，我们将讨论如何遵循规范并构建适用于所有人的可访问和可重复使用的选项卡、手风琴、切换按钮和模式对话框！ 模态 您需要了解的关于 ARIA 的所有内容都在 中有详细记录，建议阅读，但这里是它的抽象版本。 W3C 模态设计注意事项 它必须有一个关闭对话框的按钮。 对话框之外的内容应该被视觉样式（如灰色背景）遮盖。 确保您阻止用户与对话框之外的内容进行交互。 模态打开焦点交互 当对话框打开时，焦点可以设置在第一个可聚焦元素上，也可以设置在对话框顶部的静态元素上，以使内容更易于阅读并确保所有内容都保持在视图中，或者是交互时最常用的元素仅限于提供信息或继续处理。 您不想将焦点集中在对用户具有破坏性的事情上，例如，假设您有一个交互，您打开一个模式来删除您的帐户。您不想将第一个焦点放在“是的，删除我的帐户”上。 模态关闭焦点交互 当对话框关闭时，焦点将设置在调用对话框的元素上，或者当它没有意义时，您可以将焦点设置在不同的元素上，例如在调用元素不再存在时提供逻辑工作流的元素，或者如果在对话任务完成后的工作流中有后续步骤，尤其是在不太可能立即重新打开对话的情况下，则在下一个元素上。 模态键盘交互 标签 将焦点移动到 modalLooping 中的下一个可选项卡元素到第一个元素 Shift + Tab 将焦点移动到 modalLooping 中的上一个可选项卡元素到最后一个元素 逃脱 关闭对话框 模态技术注意事项 对话框容器应该有： 的作用 对话 设置为真。 咏叹调模式   或 指的是对话框标题，这将帮助辅助技术弄清楚该元素的命名方式。 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 如果操作不可用，您可以将 设置为 true。 aria-disabled 切换按钮具有 状态。 aria-pressed   <button aria-pressed="false"> Mute </button> 这是一个很好的 ，您可以查看 是代码。 示例 这里 手风琴 是完整的文档。让我们来看看它的要点。 这 手风琴设计注意事项 一组垂直堆叠的交互式标题，每个标题都包含一个标题、内容片段或代表一段内容的缩略图 手风琴标题： 表示内容部分的标签或缩略图，也用作显示和在某些实现中隐藏内容部分的控件。 手风琴面板： 与手风琴标题关联的内容部分。 手风琴键盘交互 输入或空格 展开关联的折叠面板，可选择折叠其他打开的面板折叠关联的展开面板；如果实施允许。 标签 将焦点移动到下一个可聚焦元素 Shift + Tab 将焦点移动到上一个可聚焦元素 向下箭头（可选） 将焦点从手风琴标题移动到下一个手风琴标题 可以选择循环回到第一个手风琴标题。 向上箭头（可选） 将焦点从手风琴标题移动到前一个手风琴标题可选择循环回到最后一个手风琴标题 主页（可选） 将焦点从手风琴标题移动到第一个手风琴标题 结束（可选） 将焦点从手风琴标题移动到最后一个手风琴标题 手风琴技术注意事项 确保每个手风琴标题按钮具有： 包裹在标题中 设置为对应手风琴面板内容的ID aria-controls 如果相应的面板内容可见，则 设置为 true aria-expanded 如果不允许折叠手风琴，则 设置为 true aria-disabled 每个面板内容都有 和 到相应的标题按钮（可选） 角色区域 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> 这是一个很好的 和它的 。 例子 代码 标签 您可以在 上查看 Tabs 的完整文档。 W3C 选项卡设计注意事项 选项卡是一组分层的内容部分，称为选项卡面板，一次显示一个内容面板。   元素中包含的一组选项卡元素 选项卡列表： tablist 选项卡列表中的一个元素，用作其中一个选项卡面板的标签，并且可以被激活以显示该面板 选项卡： 包含与选项卡关联的内容的元素 选项卡面板： 建议选项卡在获得焦点时自动激活，只要它们关联的选项卡面板显示时没有明显的延迟。 选项卡键盘交互 标签 当用户移动到选项卡列表时，将焦点放在活动选项卡元素上 左箭头（水平选项卡） 向上箭头（垂直选项卡） 将焦点移至上一个选项卡；循环到最后一个选项卡可选地，激活新聚焦的选项卡 右箭头（水平选项卡） 向下箭头（垂直选项卡） 将焦点移至下一个选项卡；循环到第一个选项卡可选地，激活新聚焦的选项卡 空格或输入 如果未在焦点上自动激活选项卡，则激活该选项卡 Shift + F10 当焦点位于具有关联弹出菜单的选项卡上时，打开菜单 选项卡可选的键盘交互 家（可选） 将焦点移动到第一个选项卡可选地，激活新聚焦的选项卡 结束（可选） 将焦点移动到最后一个选项卡可选地，激活新聚焦的选项卡 删除（可选） 如果允许删除，则删除（关闭）当前选项卡元素及其关联的选项卡面板，将焦点设置在已关闭选项卡后面的选项卡上，并可选择激活新聚焦的选项卡 选项卡技术注意事项 包含一组选项卡的元素必须具有 或  。 Tablist 的作用： aria-labelledby aria-label 选项卡的 作为选项卡的元素必须有 与关联的选项卡面板配对，活动选项卡应将状态 aria-selected 设置为 true；所有其他选项卡都设置为 false。 作用： aria-controls 如果选项卡元素有弹出菜单，它应该将属性 aria-haspopup 设置为 menu 或 true。   包含选项卡内容面板的元素应将 aria-labelledby 与关联的选项卡配对，并将 aria-orientation 设置为垂直或水平（默认）。 Tabpanel 的作用： 选项卡代码示例 <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 讲结束 第五 我希望你喜欢这部分，它对你和对我一样有价值。 在接下来的几天里，我将与你分享剩下的谈话。敬请关注… 也在 发布。 这里

CodePen

CVS Health

Mozilla

Twitter

2022 - HackerNoon Contributor of the Year - Css

2022 - HackerNoon Contributor of the Year - Performance

2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Performance

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

該音頻是用故事的原始語言製作的！

太長; 讀書

Vue Amsterdam 2022：第五部分 - 可重复使用的小部件！

Vue Amsterdam 2022：第五部分 - 可重复使用的小部件！

About Author

註釋

標籤

这篇文章刊登在

Related Stories

扬帆起航：利用数据湖开发生产级 RAG 应用程序

Telegram：加密岛通往大陆的桥梁

Claude Sonnet 3.5 系统提示泄漏：法医分析

如何将您的工作流程提高 10 倍：17 个必备应用程序

扬帆起航：利用数据湖开发生产级 RAG 应用程序

Telegram：加密岛通往大陆的桥梁

Claude Sonnet 3.5 系统提示泄漏：法医分析

如何将您的工作流程提高 10 倍：17 个必备应用程序

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps