跨越div和span——HTML5、css和WCAG
我有一个使用div和span的三列HTML课程演示。最后的目标是有一个符合WCAG的表，但我被CSS问题困住了 这是我的密码：跨越div和span——HTML5、css和WCAG,html,css,wcag,Html,Css,Wcag,我有一个使用div和span的三列HTML课程演示。最后的目标是有一个符合WCAG的表，但我被CSS问题困住了 这是我的密码： <div role="table" aria-label="TABLE-NAME" aria-describedby="TABLE-NAME_DESCRIPTION"><div id="TABLE-NAME_DESCRIPTION">WCAG HTML, hopefully</div> <div role="rowgroup"&
<div role="table" aria-label="TABLE-NAME" aria-describedby="TABLE-NAME_DESCRIPTION"><div id="TABLE-NAME_DESCRIPTION">WCAG HTML, hopefully</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader">Course Number</span><span role="columnheader">Description</span><span role="columnheader">Prerequisite</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span class="semester" role="cell">Fa1l, 1st Year</span>
</div></div>
<div role="rowgroup">
<div role="row">
<span role="cell">BUSI3333</span><span role="cell">Business 3333</span><span role="cell">Business 3332</span>
</div>
</div>
</div>
.annotate {
font-style: italic;
color: #366ed4;
}
.semester {
text-align: center;
font-weight: bold;
width: 100%;
}
[role="table"] {
display: table;
}
[role="table"] > div[id] {
display: table-caption;
font-style: italic;
}
[role="table"] [role="row"] {
display: table-row;
}
[role="table"] [role="cell"],
[role="table"] [role="columnheader"] {
display: table-cell;
padding: 0.125em 0.25em;
width: 8em;
}
[role="table"] [role="columnheader"] {
font-weight: bold;
border-bottom: thin solid #888;
}
[role="table"] [role="rowgroup"]:nth-child(odd) {
background-color: #ddd;
}
</style>
是的，我可以将学期放在中间，两边都是空的，但这似乎是错误的。在这种情况下，您应该删除围绕学期跨度的行，并删除role=cell声明。然后，它只是行组中的一个普通的旧跨距，您可以将display:inline块添加到CSS以使其居中。像这样： .注释{ 字体：斜体； 颜色：366ed4； } .学期{ 显示：内联块； 文本对齐：居中； 字体大小：粗体； 宽度：100%； } [角色=表格]{ 显示：表格； } [role=table]>div[id]{ 显示：表格标题； 字体：斜体； } [角色=表格][角色=行]{ 显示：表格行； } [角色=表格][角色=单元格]， [角色=表格][角色=列标题]{ 显示：表格单元格； 填充：0.125em 0.25em； 宽度：8em； } [角色=表格][角色=列标题]{ 字体大小：粗体； 边框底部：薄实线888； } [角色=表格][角色=行组]：第n个childodd{ 背景色：ddd； } 希望是WCAG HTML 课程编号说明先决条件 Fa1l，第一年 业务3333业务3333业务3332
在这种情况下，您应该删除学期跨度周围的行，并删除role=cell声明。然后，它只是行组中的一个普通的旧跨距，您可以将display:inline块添加到CSS以使其居中。像这样： .注释{ 字体：斜体； 颜色：366ed4； } .学期{ 显示：内联块； 文本对齐：居中； 字体大小：粗体； 宽度：100%； } [角色=表格]{ 显示：表格； } [role=table]>div[id]{ 显示：表格标题； 字体：斜体； } [角色=表格][角色=行]{ 显示：表格行； } [角色=表格][角色=单元格]， [角色=表格][角色=列标题]{ 显示：表格单元格； 填充：0.125em 0.25em； 宽度：8em； } [角色=表格][角色=列标题]{ 字体大小：粗体； 边框底部：薄实线888； } [角色=表格][角色=行组]：第n个childodd{ 背景色：ddd； } 希望是WCAG HTML 课程编号说明先决条件 Fa1l，第一年 业务3333业务3333业务3332
只需让你的古怪类显示：flex和justify content:center；将此代码替换为您的代码
[role="table"] [role="rowgroup"]:nth-child(odd) {
background-color: #ddd;
display: flex;
justify-content: center;
}
只需让你的古怪类显示：flex和justify content:center；将此代码替换为您的代码
[role="table"] [role="rowgroup"]:nth-child(odd) {
background-color: #ddd;
display: flex;
justify-content: center;
}
你为什么不使用实际的？老的建议是避免，因为原因。原因是人们使用的布局。如果您需要一个表，那么使用它在语义上是正确的。您知道不要将CSS放在HTML中，因为混合会引起关注。但是您将角色和样式化CSS问题混合在一起，结果很难保持更改角色暗示更改CSS和使用CSS暗示添加角色的重用。如果使用了，则不需要ARIA角色。使用类作为HTML、Javascript和CSS之间的接口是可以的。另外，对于布局，请使用flex。您肯定应该在class=sement单元格中使用aria colspan=3。为什么不使用实际的？旧的
我的建议是避免因为其他原因。原因是人们使用的布局。如果您需要一个表，那么使用它在语义上是正确的。您知道不要将CSS放在HTML中，因为混合会引起关注。但是您将角色和样式化CSS问题混合在一起，结果很难保持更改角色暗示更改CSS和使用CSS暗示添加角色的重用。如果使用了，则不需要ARIA角色。使用类作为HTML、Javascript和CSS之间的接口是可以的。另外，对于布局，请使用flex。你肯定应该在class=sement单元格中使用aria colspan=3。两个好答案：Claire和Irin都帮助了我。。。这是我正在使用的方法，但Irin的方法也很好。关于使用表的内联讨论：我做了。。。但我们的WCAG验证器真的不喜欢他们，我得到了我们的WCAG分数评分。。。所以我在一台电脑上工作，然后被另一台电脑评判。但在我看来，表格更容易，只是在这种情况下并不可取。如果以这种方式呈现表格数据，几乎肯定会误解WCAG指南，比如说，与其他具有本地宿主语言等效的WAI-ARIA角色一样，强烈鼓励作者尽可能使用本地HTML表格元素。。当您显示的是不重小部件的直截了当的数据时，指南非常明确地说您应该使用。@pbhj明白了。。。WCAG验证器首选此方法。。。作为一个HTML程序员，我更喜欢表格。哪个验证器？同样，绝对信任自动化测试[如果是一个]的方法，而不是将其作为指示性的方法，在我看来是一个糟糕的方法。我认为这一结果是一个假阳性的指示性结果，测试工具的一个缺陷——除非这是一个家庭作业练习，否则你应该相信指导原则，而不是一个用来测试事情是否符合指导原则的工具。两个好答案：Claire和Irin都帮助了我。。。这是我正在使用的方法，但Irin的方法也很好。关于使用表的内联讨论：我做了。。。但我们的WCAG验证器真的不喜欢他们，我得到了我们的WCAG分数评分。。。所以我在一台电脑上工作，然后被另一台电脑评判。但在我看来，表格更容易，只是在这种情况下并不可取。如果以这种方式呈现表格数据，几乎肯定会误解WCAG指南，比如说，与其他具有本地宿主语言等效的WAI-ARIA角色一样，强烈鼓励作者尽可能使用本地HTML表格元素。。当您显示的是不重小部件的直截了当的数据时，指南非常明确地说您应该使用。@pbhj明白了。。。WCAG验证器首选此方法。。。作为一个HTML程序员，我更喜欢表格。哪个验证器？同样，绝对信任自动化测试[如果是一个]的方法，而不是将其作为指示性的方法，在我看来是一个糟糕的方法。我认为这一结果是一个假阳性的指示性结果，测试工具的一个缺陷——除非这是一个家庭作业练习，否则你应该更信任指导原则，而不是一个旨在测试事情是否符合指导原则的工具。