FullCalendar v6.1 在使用 SiteImprove 免费 chrome 扩展的 GridCalender 视图上存在“表标题单元格缺少标题角色”ADA 问题

Answer 1

您对日历生成的 HTML 有多少控制权？该代码中指定了太多咏叹调。其中很多都是多余的，有些甚至是完全错误的。我认为有几个问题导致 siteimprove 标记错误。

首先，如果您对表使用本机语义 HTML，则大多数

role

属性都是不必要的。例如，

<tr>

不需要

role="row"

，因为默认情况下会得到它。与

<th>

相同，如果您使用

role="columnheader"

，您将获得默认的

scope="col"

。删除这些角色。

其次，语义表元素具有内置角色，如上所述，因此您不应该使用

role="presentation"

覆盖这些角色。这会删除该元素的语义值。例如，您有

<tr role="presentation"

>、

<th role="presentation"

> 和

<thead role="presentation">

。删除所有

role="presentation"

。

主桌上还有

<table role="grid">

。如果您计划实现箭头键导航以在行和列之间移动（类似于在电子表格中导航），那么网格角色就可以。我尝试了一个简单的 FullCalendar 演示 ，但箭头键 无法 工作，所以

role="grid"

应该 not 被使用。日历中的日期是 tab 可聚焦的，这很好，但这只是一个常规表格，而不是网格。

由于生成的表代码存在很多问题，因此很难说是什么导致了 siteimprove 错误，但如果您可以控制的话，请先清理所有角色。如果您没有这种程度的控制权，我将不会使用该日历，因为它无法访问。