如何使用aria-colspan设置ARIA角色表的样式

Question

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

如果能帮助我让aria-colspan 4可视化地跨越4列以及定位在其中的角色单元格，我将不胜感激。

Codepen

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

解决这个问题的一种方法是将您的布局从grid更改为flex，但是如果您想在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表，并在每个表元素中添加ARIA标记。