From ebc21bf19910e08a3c3765645742c809ffea64ee Mon Sep 17 00:00:00 2001 From: Tianyi Tao <146603607+tianyeeT@users.noreply.github.com> Date: Wed, 29 May 2024 00:04:56 +0800 Subject: [PATCH 1/2] [zh-cn]: create the translation of `aria-colcount` --- .../aria/attributes/aria-colcount/index.md | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md new file mode 100644 index 00000000000000..13432e49cd6e37 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md @@ -0,0 +1,89 @@ +--- +title: aria-colcount +slug: Web/Accessibility/ARIA/Attributes/aria-colcount +l10n: + sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc +--- + +{{AccessibilitySidebar}} + +`aria-colcount` 属性定义了在 [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role)、[`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role) 或 [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role) 中的列总数，当所有列都不在 [DOM](/zh-CN/docs/Glossary/DOM) 中时。 + +## 描述 + +一些表格非常庞大，不可能向用户展示所有列。或者，虽然可能，但是拥有如此宽的表格将会给用户带来糟糕的用户体验。使用 `aria-colcount` 属性让辅助技术知道如果所有列都存在的话，表格会有多少列。该值是一个整数，表示组成完整表格的列数。如果你不知道表格将具有的总列数，但知道它们不会全部存在于 DOM 中，则使用值 -1，因此 `aria-colcount="-1"`。该值告诉用户代理，当前存在于 DOM 中的列数可能不是表格中的实际列数。 + +如果表格中的所有列都存在于 DOM 中，则不需要 `aria-colcount` 属性，因为浏览器会自动计算列的总数。但是，如果在给定时刻只有一部分列存在于 DOM 中，那么这个属性就很有用并且是必需的。 + +当使用 `aria-colcount` 时，如果你知道列的数量，请确保还使用 [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 为每列标记，或者如果列是连续的，即它们是原始顺序中没有中断的一组列，则为每行标记。 + +以下示例显示了一个网格，具有 6 列，其中列 1、2、5 和 6 显示给用户。将表格本身设置为 `aria-colcount="6"`，表示组成表格的列的总数。由于列不是连续的，因此每个[单元格](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role) - 在本例中为 [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) 和 [`gridcell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/gridcell_role) 元素 - 都设置了 `aria-colindex` 属性。 + +```html +
+
+
+
名字
+
姓氏
+
城市
+
邮编
+
+
+
+
+
Debra
+
Burks
+
纽约
+
14127
+
+
+ … +
+``` + +ARIA 使用的第一条规则是：“如果你可以使用具有你所需语义和行为的本地功能，而不是重新用一个元素并**添加**一个 ARIA 角色、状态或属性来使其无障碍，那么请这样做。”如果我们使用具有语义化的 HTML 元素，如 {{HTMLElement('table')}} 、{{HTMLElement('th')}} 、{{HTMLElement('td')}} 等，那么 `aria-colcount` 属性仍然是必需的，但标记不会那么冗长。当使用语义化的表头元素且并非所有列都在 DOM 中时，仍然需要使用 `aria-colcount`，但只需要在每列的列头 {{HTMLElement('th')}} 中定义一次 `aria-colindex` 属性。 + +```html + + + + + + + + + + + + + + + + + … + +
名字姓氏城市邮编
DebraBurks纽约14127
+``` + +## 值 + +- `` + - : 完整表格中的列数 + +## 关联角色 + +适用于以下角色： + +- [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role) + 继承到以下角色： + +- [`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role) +- [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role) + +## 规范 + +{{Specifications}} + +## 参见 + +- [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) From 45503ec1e391a2b01a61b50ab241fc2676e3688f Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 21 Jun 2024 09:31:24 +0800 Subject: [PATCH 2/2] Apply suggestions from code review --- .../accessibility/aria/attributes/aria-colcount/index.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md index 13432e49cd6e37..138e04405931b3 100644 --- a/files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md +++ b/files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md @@ -7,7 +7,7 @@ l10n: {{AccessibilitySidebar}} -`aria-colcount` 属性定义了在 [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role)、[`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role) 或 [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role) 中的列总数，当所有列都不在 [DOM](/zh-CN/docs/Glossary/DOM) 中时。 +`aria-colcount` 属性定义了当所有列都不在 [DOM](/zh-CN/docs/Glossary/DOM) 中时，在 [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role)、[`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role) 或 [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role) 中的列总数。 ## 描述 @@ -17,7 +17,7 @@ l10n: 当使用 `aria-colcount` 时，如果你知道列的数量，请确保还使用 [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 为每列标记，或者如果列是连续的，即它们是原始顺序中没有中断的一组列，则为每行标记。 -以下示例显示了一个网格，具有 6 列，其中列 1、2、5 和 6 显示给用户。将表格本身设置为 `aria-colcount="6"`，表示组成表格的列的总数。由于列不是连续的，因此每个[单元格](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role) - 在本例中为 [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) 和 [`gridcell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/gridcell_role) 元素 - 都设置了 `aria-colindex` 属性。 +以下示例显示了一个网格，具有 6 列，其中列 1、2、5 和 6 显示给用户。将表格本身设置为 `aria-colcount="6"`，表示组成表格的列的总数。由于列不是连续的，因此在本例中每个[单元格](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role)的 [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) 和 [`gridcell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/gridcell_role) 元素都设置了 `aria-colindex` 属性。 ```html
@@ -33,7 +33,7 @@ l10n:
Debra
Burks
-
纽约
+
New York
14127
@@ -75,7 +75,8 @@ ARIA 使用的第一条规则是：“如果你可以使用具有你所需语义 适用于以下角色： - [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role) - 继承到以下角色： + +继承到以下角色： - [`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role) - [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role)