ally.js 指南：快速搞定 Web 无障碍与焦点管理的 JavaScript 库

ally.js 指南快速搞定 Web 无障碍与焦点管理的 JavaScript 库【免费下载链接】ally.jsJavaScript library to help modern web applications with accessibility concerns项目地址: https://gitcode.com/gh_mirrors/al/ally.jsally.js 是一个开源的 JavaScript 无障碍a11y工具库把焦点检测、Tab 顺序计算、跨浏览器焦点修复这些平台本该提供却没提供的基础能力封装成了可以直接调用的函数。这篇文章写给刚开始接触 Web 无障碍的前端开发者以及需要维护弹窗、Tab 切换等交互组件的工程师。先说痛点焦点问题为什么难处理你在做弹窗时多半碰过这几件事element.focus()一调用页面跟着滚到奇怪的位置用户在弹窗里按Tab焦点却逃出了弹窗跳到了浏览器地址栏你想列出页面上所有键盘可聚焦的元素手动维护标签名单结果 iframe、SVG、area这些边角情况全漏了。这些问题每个浏览器行为还不完全一致自己写检测代码基本写不全。ally.js 是什么能做什么一句话定位它提供一组底层无障碍工具函数让你的应用可以稳定地找到焦点、判断焦点、控制焦点。核心能力查询ally.query.tabbable按 DOM 顺序返回所有键盘可聚焦元素ally.query.tabsequence按浏览器真实 Tab 顺序含正数tabindex排序返回列表ally.query.firstTabbable直接拿到第一个可聚焦元素判断ally.is.focusable、ally.is.tabbable、ally.is.visible等过滤器对单个元素返回布尔值可以直接放进.filter()用等待ally.when.focusable、ally.when.visibleArea在元素可聚焦且可见时才执行回调解决动画界面的焦点时序修正与维持ally.fix.*修补 IE、Safari、Firefox 各自的指针焦点 bugally.maintain.tabFocus把Tab焦点锁在指定范围内样式辅助ally.style.focusSource用html[focus-sourcepointer|key|script]区分焦点来源:focus不够用的场景靠它三分钟把 ally.js 接入项目它是 npm 包不需要构建步骤装完即可用npm install --save ally.js装好后在 Node 环境里require(ally.js)或直接用 UMD 包挂到window.ally上。库自带platform.js和CSS.escape两个依赖UMD 包里已经打好了不用额外处理。三个最常见的使用场景场景一弹窗打开后自动聚焦内部元素。手写方案的麻烦在于不知道哪个元素能聚焦还要等它真正渲染出来。ally.query.firstTabbable({ context: .dialog })会遍历弹窗内部按 Tab 顺序返回第一个可聚焦元素如果此时元素还在屏幕外做入场动画就换成ally.when.focusable它每帧检查一次等元素同时满足可聚焦 在视口内才触发回调再执行element.focus()就不会出现焦点先行、页面乱滚的情况。场景二让Tab在弹窗里循环。无障碍规范WAI-ARIA Authoring Practices要求模态弹窗内的焦点不能逃逸。ally.maintain.tabFocus({ context: .dialog })拦截Tab和ShiftTab按ally.query.tabsequence计算出的顺序在弹窗内部循环焦点关闭弹窗时调用返回的handle.disengage()即可解除。文档建议同时启用ally.maintain.disabled把弹窗外的交互元素一并禁用见 docs/api/README.md 的 Altering browser focus behavior 一节。场景三动画界面里消除焦点引发的滚动跳动。元素被移入视口时浏览器会强制把它滚进视野这和你的 CSS 动画打架表现为内容先被滚进来、又被动画推走。ally.element.focus(element, { undoScrolling: true })会先记录所有祖先的滚动位置聚焦后立刻还原相当于这次滚动没发生过。注意它要求元素能立即接收焦点纯 transition 淡入的内容要改用上面的when.focusable方案细节在 docs/tutorials/README.md 的 Managing focus in animated UI 里有完整推演。新手常问的几个问题静态站点需要 ally.js 吗基本不需要。如果页面没有 JS 交互组件它帮不上什么忙它主要服务单页应用和组件库。focusable 和 tabbable 到底差在哪focusable 指脚本能focus()到它的元素tabbable 指Tab能按到的元素。两套集合不重合比如tabindex-1的元素 focusable 但不 tabbable。库内用ally.is.focusable和ally.is.tabbable分别判断别混用。装了它页面就无障碍了吗不会。它只解决焦点这一层语义标记、ARIA 属性、屏幕阅读器兼容仍需你自己处理。官方 FAQ 里也明确说了这点。继续往下走源码按模块拆分每个函数一个文件直接看 src/ 目录比读 API 更快上手入门流程在 docs/getting-started.mdAPI 索引在 docs/api/README.md弹窗、SVG 焦点等实战教程在 docs/tutorials/README.md。【免费下载链接】ally.jsJavaScript library to help modern web applications with accessibility concerns项目地址: https://gitcode.com/gh_mirrors/al/ally.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考