# @accessible/tabbable 中文文档

规范地址：https://npmcn.com/package/%40accessible/tabbable/

版本：1\.1\.2
npm 元数据更新时间：2022-04-04T11:07:09.077Z
中文译文更新时间：2026-11-06T03:04:42.415Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40accessible/tabbable
原文对照：https://npmcn.com/package/%40accessible/tabbable/?lang=original
项目主页：https://github.com/accessible-ui/tabbable#readme
源码仓库：https://github.com/accessible-ui/tabbable

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：55.7 kB，25 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2019-12-16T01:40:33.357Z
- 最新版本发布：2020-07-07T15:02:04.856Z
- 近 30 天下载量：5946（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 0 个）

## 中文简介

一个函数返回包含节点内所有可制表 DOM 节点的数组.

## 安装

```sh
npm install @accessible/tabbable
```

也可以使用：`pnpm add @accessible/tabbable`、`yarn add @accessible/tabbable`、`bun add @accessible/tabbable`

## README

* * *

# 选项卡( )

 [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/@accessible/tabbable?style=for-the-badge&labelColor=24292e)](https://bundlephobia.com/result?p=@accessible/tabbable)[![Build status](https://img.shields.io/travis/accessible-ui/tabbable?style=for-the-badge&labelColor=24292e) ](https://travis-ci.org/accessible-ui/tabbable)[![NPM Version](https://img.shields.io/npm/v/@accessible/tabbable?style=for-the-badge&labelColor=24292e) ](https://www.npmjs.com/package/@accessible/tabbable)[![MIT License](https://img.shields.io/npm/l/@accessible/tabbable?style=for-the-badge&labelColor=24292e)](https://jaredlunde.mit-license.org/)

npm i @accessible/tabbable

* * *

返回包含节点内所有 \* 可制表的 DOM 节点的数组 。 (\*"通"有所必备之戒,从下所读取之

以下内容可选取:

-   `<button>`
-   `<input>`
-   `<select>`
-   `<textarea>`
-   `<a>` 与 `href` 或者说 `xlink:href` 属性
-   `<audio>` 财务报告和审定财务报表 `<videos>` 与 `controls` 属性
-   `[contenteditable]` 要素
-   任何非阴性的东西 `tabindex`

以上任何一项 _没有_ 但是,如果下列任何一种情况也属实,则视为可制表:

-   负数 `tabindex`
-   `disabled`
-   无论是节点本身 _或它的祖先_ 隐藏通过 `display: none` 或者说 `visibility: hidden`
-   这是一个 `<input type="radio">` 另一台电台是 `checked`

**如果您认为应该将节点包含在您的可制表符中 _不过不是_,你只需要添加 `tabindex="0"` 故意将它包含在内.** (或者,如果它是在你的阵列 但你不希望它,你可以添加 `tabindex="-1"` 故意将其排除在外。 ) 这也将导致更一致的交叉浏览器行为. 以了解您的特别节点为何可能 _没有_ 包含,参见 ["更多细节"](https://npmcn.com/package/%40accessible/tabbable/#readme-more-details)页:1.

## API 密码

### `tabbable(rootNode: HTMLElement, includeRootNode: boolean = false): HTMLElement[]`

在 `rootNode`。 。 。 .

订购原则摘要:

-   首先包括任何带正数的节点 `tabindex` 属性(1或更高),由升序命令 `tabindex` 和源头命令.
-   然后包括任何带零的节点 `tabindex` 和默认获得焦点(上列)且无正数的元素 `tabindex` 设置,按源顺序排列.

## 更多细节

-   **Tabbable试图识别在浏览器(而不是死)上可可靠地tabbable的元素.** 浏览器在行为上是愚蠢地不一致的,但是——尤其是对于边缘的元素,比如: `<object>` 财务报告和审定财务报表 `<iframe>` 所以这意味着 _有点_ 元素为您 _能够_ 选项卡到 _有点_ 浏览器将被排除在结果之外。 (为了更多地了解这种愚蠢的不一致现象,请见此) [令人惊叹的桌子](https://allyjs.io/data-tables/focusable.html)) (中文(简体) ). 使浏览器之间更加一致,并确保您的元素 _请求_ 在你的标签列表 显示在那里, **尝试添加 `tabindex="0"` 到可标签忽略的边框元素**。 。 。 .
-   (说明以上:) **表格的可选性 `<iframe>`, (中文(简体) ), `<embed>`, (中文(简体) ), `<object>`, (中文(简体) ), `<summary>`,以及 `<svg>` 实值 [浏览器之间不一致](https://allyjs.io/data-tables/focusable.html)**,所以如果你需要准确读取其中之一,你应该尝试给它一个 `tabindex`.(你还需要注意 `focusable` iE & Edge 中的 SVGs 属性。) 但你也会 _没有_ 能够得到准确的阅读——所以你应该避免依赖它.
-   **无线电组有一些边缘的病例, 你可以避免,总是有一个 `checked` 每组一个** (这也是你通常应该做的). 如果没有 `checked` 电台在广播组, _全部_ 将被认为是可制表的。 (有些浏览器这样做,否则就不行——没有一致性. )
-   虽然Tabbable试图处理正标签索引, **您不应该使用正标签索引**无障碍问题专家似乎对此有一致和明确的同意:依赖文件中要素的顺序.
-   Mac OS X 上的 Safari 不标签为 `<a>` 默认元素:要获得标准行为,必须更改设置。 Tabbable不知道你是否改变了这个设置,所以它包括 `<a>` 列表中的元素.

## 为什么是叉子?

创造者正在寻找一个新的维护者 `@accessibile` 软件包不需要一些功能 在原版中,这样我就可以用 TypeScript 类型制作一个较小的包,用叉:P

## 信贷

这间图书馆是从 [选项卡](https://github.com/davidtheclark/tabbable)

## 自由主义

麻省理工学院

## 常见问题

### @accessible/tabbable 是什么？

一个函数返回包含节点内所有可制表 DOM 节点的数组\.

### 如何安装 @accessible/tabbable？

在项目目录运行 npm install @accessible/tabbable，或使用 pnpm add / yarn add / bun add。

### @accessible/tabbable 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @accessible/tabbable 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @accessible/tabbable 可以商用吗？

@accessible/tabbable 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @accessible/tabbable 的下载量有多少？

根据 npm 官方下载统计，@accessible/tabbable 在 2026/10/05 – 2026/11/03 这 30 天内被下载 5,946 次，日均约 198 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @accessible/tabbable 还在维护吗？

最新版本 1\.1\.2 发布于 2020/07/07（6 年前）；至今共发布 8 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/12/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。