最近,为我的不可知论图书馆构建强大的对话框(模态)组件,使我走上了一条迷人的道路。我最初的计划是创建一个完全独立的组件,利用新的组成部分<dialog></dialog>
可访问性收益的要素。但是,经过彻底的研究,我选择了Kitty Giraudel的A11y-Dialog库,为Vue 3,Svelte和Angular创建适配器(AEXT适配器已经存在)。这个决定源于对本地人的仔细考虑<dialog></dialog>
元素的局限性。
<dialog></dialog>
元素:批判性评估而本地人<dialog></dialog>
元素表现出希望并正在积极改善,当前的几个缺点影响了我的决定:
alertdialog
角色不兼容:至关重要的alertdialog
ARIA角色,对于需要用户互动的警报和防止背景/ESC关闭的警报至关重要,无法正常运行。::backdrop
伪元素限制:此样式元素仅在dialog.showModal()
以编程方式使用时可用。亚当·阿盖尔(Adam Argyle)与本地建筑有关的出色帖子<dialog></dialog>
提供有价值的解决方法,但是为了我的需求,复杂性超过了好处。
我的不可知论对话框组件需要满足这些关键可访问性标准:
alertdialog
角色支持:正确处理警报方案。<dialog></dialog>
陷阱:解决本地元素的局限性。prefers-reduced-motion
:允许自定义样式和尊重用户偏好。斯科特·奥哈拉(Scott O'Hara)和凯蒂(Kitty)的文章提供了更深层次的潜入对话创建的信息。这些要求清楚地强调了仅依靠本地的局限性<dialog></dialog>
元素。
在集成A11Y-Dialog之前,我进行了彻底的可访问性审核:
Deque Systems的研究表明,自动化工具仅捕获约57%的可访问性问题,这强调了手动测试和用户反馈的重要性。我使用一个简单的本地HTML页面进行了测试,以将组件与测试框架复杂性隔离开来。
审计证实了A11y-Dialog的稳健性和遵守我的可访问性要求。
许多框架提供自己的对话组件。虽然我没有亲自审核所有这些,但这里有一些资源和观察:
我的不可思议的库使用A11y-Dialog适配器来兼容。
为设计系统创建自定义对话框组件需要大量的努力,并仔细考虑可访问性的细微差别。虽然可行,但错误的风险很高,并且利用如A11y-Dialog这样的现有,经过良好测试的解决方案通常被证明更有效和可靠。斯科特·奥哈拉(Scott O'Hara)使用A11y-Dialog(以确保稳定的跨浏览器体验)的强大插件的建议是令人信服的。
我选择利用A11y-Dialog,再加上Vue 3,Svelte和Angular适配器的创建,优先考虑可访问性和效率。在构建自定义组件的同时,可能会出现错误的潜力和A11y-Dialog的现有质量,使其成为了优越的选择。这次旅程强调了彻底可访问性审核的重要性以及利用维护良好的图书馆的价值。 A11y-Dialog的适应性扩展了其功能以创建抽屉组件,进一步巩固了其在我的库中的价值。
以上是对话框组件:Go Gate HTML还是自己滚动?的详细内容。更多信息请关注PHP中文网其他相关文章!