如何使用 aria-colspan 为 ARIA Role Table 设置样式

Question

对于一个项目，我也在尝试创建一个包含 aria-colspan="4" 的 ARIA table。我正在使用 CSS 网格来布局 table，但无法确定当元素跨越多列时如何设置样式。

对于如何使 aria-colspan 4 在视觉上跨越 4 列以及要定位在其下方的角色单元格，我将不胜感激。

HTML

<div role="table">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">th 1</div>
      <div role="columnheader">th 2</div>
      <div role="columnheader">th 3</div>
      <div role="columnheader">th 4</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="cell">tb 1</div>
      <div role="cell">tb 2</div>
      <div role="cell">tb 3</div>
      <div role="cell">tb 4</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader" aria-colspan="4">Spans 4 columns</div>
    </div>
  </div>
    <div role="rowgroup">
    <div role="row">
      <div role="cell">tb 1a</div>
      <div role="cell">tb 2a</div>
      <div role="cell">tb 3a</div>
      <div role="cell">tb 4a</div>
    </div>
  </div>
  </div>

CSS

:root {
  --table-header: #9900ff;
  --table-row-even: #ccccff;
  --table-cell: #141414;
}

div[role="table"] {
  display: grid;
  border-collapse: collapse;
  border:1px solid red;
  min-width: 100%;
  grid-template-columns: 
    minmax(25%, 100%)
    minmax(25%, 100%)
    minmax(25%, 100%)
    minmax(25%, 100%);
}

div[role="rowgroup"],
div[role="row"]{
  display: contents;
}

div[role="columnheader"],
div[role="cell"]{
  padding: 0.25em 1em;
  white-space: nowrap;
}

div[role="columnheader"]{
  background: var(--table-header);
  color:#FFF;
}

div[role="columnheader"][aria-colspan="4"]{
  background: red;
}

div[role="columnheader"]:last-child {
  border: 0;
}

div[role="cell"]{
  padding-top: 1em;
  padding-bottom: 1em;
  color: var(--table-cell);
}

div[role="row"]:nth-child(even) div[role="cell"] {
  background: var(--table-row-even);
}

我又被卡住了！将成为我的墓志铭。

Answer 1

解决此问题的一种方法是将您的布局从网格更改为弹性，但如果您想在 aria-colspan 中使用不同的值，这将不起作用：

div[role="table"] {
  display: flex;
  flex-direction: column;
}

div[role="rowgroup"],div[role="row"] {
  display: flex;
}
div[role="row"]{
  flex: 1;
}

div[role="columnheader"],
div[role="cell"]{
  padding: 0.25em 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

另一种方法是实际构建一个 HTML table 并在每个 table 元素中添加 ARIA 标签。

如何使用 aria-colspan 为 ARIA Role Table 设置样式

How to style an ARIA Role Table with aria-colspan

css

grid

wai-aria