如何使用ariacolspan设置ARIA角色表的样式

Question

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

我很感激帮助如何使咏叹调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

解决此问题的一种方法是将布局从网格更改为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标记。