对话框组件：Go Gate HTML还是自己滚动？

最近，为我的不可知论图书馆构建强大的对话框（模态）组件，使我走上了一条迷人的道路。我最初的计划是创建一个完全独立的组件，利用新的组成部分<dialog></dialog>可访问性收益的要素。但是，经过彻底的研究，我选择了Kitty Giraudel的A11y-Dialog库，为Vue 3，Svelte和Angular创建适配器（AEXT适配器已经存在）。这个决定源于对本地人的仔细考虑<dialog></dialog>元素的局限性。

本地人<dialog></dialog>元素：批判性评估

而本地人<dialog></dialog>元素表现出希望并正在积极改善，当前的几个缺点影响了我的决定：

1. 背景点击处理：默认行为在单击外部时不会关闭对话框。
2. alertdialog角色不兼容：至关重要的alertdialog ARIA角色，对于需要用户互动的警报和防止背景/ESC关闭的警报至关重要，无法正常运行。
3. ::backdrop伪元素限制：此样式元素仅在dialog.showModal()以编程方式使用时可用。
4. 样式不一致之处：默认样式依赖浏览器，需要JavaScript干预，破坏了“纯HTML”优势。

亚当·阿盖尔（Adam Argyle）与本地建筑有关的出色帖子<dialog></dialog>提供有价值的解决方法，但是为了我的需求，复杂性超过了好处。

定义对话框组件的可访问性要求

我的不可知论对话框组件需要满足这些关键可访问性标准：

1. 背景/ESC闭合：通过单击背景或ESC键按下关闭。
2. 焦点陷阱：防止在组件之外进行选项卡。
3. 双向表：向前支撑（TAB）和向后（Shift Tab）Tabbing。
4. 焦点恢复：闭合时将重点返回到先前活跃的元素。
5. 正确的ARIA属性：正确应用ARIA属性和切换。
6. 门户（特定于框架）：在JavaScript Frameworks中对门户的支持。
7. alertdialog角色支持：正确处理警报方案。
8. 身体滚动预防：可选地防止潜在的身体滚动。
9. 避免本地<dialog></dialog>陷阱：解决本地元素的局限性。
10. 自定义样式和prefers-reduced-motion ：允许自定义样式和尊重用户偏好。

斯科特·奥哈拉（Scott O'Hara）和凯蒂（Kitty）的文章提供了更深层次的潜入对话创建的信息。这些要求清楚地强调了仅依靠本地的局限性<dialog></dialog>元素。

审核A11Y-DIALOG以供可访问性

在集成A11Y-Dialog之前，我进行了彻底的可访问性审核：

• 手动验证：跨浏览器的测试功能。
• 自动化工具：利用灯塔，IBM平等可访问性检查器，Deque的AX和Wave。
• 屏幕读取器测试：使用下巴，NVDA和配音。
• 用户测试：（理想情况下，与真实用户进行测试）。

Deque Systems的研究表明，自动化工具仅捕获约57％的可访问性问题，这强调了手动测试和用户反馈的重要性。我使用一个简单的本地HTML页面进行了测试，以将组件与测试框架复杂性隔离开来。

审计证实了A11y-Dialog的稳健性和遵守我的可访问性要求。

特定于框架的对话框组件注意事项

许多框架提供自己的对话组件。虽然我没有亲自审核所有这些，但这里有一些资源和观察：

• Angular： Deque的2020年审核突出显示了材料和NGX-Bootstrap作为强大的竞争者。
• 反应： Reakit，Chakra-UI，材料，覆盖范围/对话框和 @React-Aria/Dialog值得探索。
• VUE： Vuetensils，Vuetify和Primevue（带有著名的重点修复问题）是选项。
• Svelte： Svelte-Headlessui，Svelterial的材料端口和Svelte-A11y-Dialog（对于自定义组件创建特别有用）。
• Bootstrap：需要手动步骤以符合可访问性。

我的不可思议的库使用A11y-Dialog适配器来兼容。

建筑自定义设计系统：权衡努力

为设计系统创建自定义对话框组件需要大量的努力，并仔细考虑可访问性的细微差别。虽然可行，但错误的风险很高，并且利用如A11y-Dialog这样的现有，经过良好测试的解决方案通常被证明更有效和可靠。斯科特·奥哈拉（Scott O'Hara）使用A11y-Dialog（以确保稳定的跨浏览器体验）的强大插件的建议是令人信服的。

结论

我选择利用A11y-Dialog，再加上Vue 3，Svelte和Angular适配器的创建，优先考虑可访问性和效率。在构建自定义组件的同时，可能会出现错误的潜力和A11y-Dialog的现有质量，使其成为了优越的选择。这次旅程强调了彻底可访问性审核的重要性以及利用维护良好的图书馆的价值。 A11y-Dialog的适应性扩展了其功能以创建抽屉组件，进一步巩固了其在我的库中的价值。

以上是对话框组件：Go Gate HTML还是自己滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！