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

FullCalendar v6.1 has `Table header cell is missing a header role` ADA issue on GridCalender view using SiteImprove free chrome extension

提问人:god_is_love 提问时间:10/2/2023 最后编辑:god_is_love 更新时间:10/2/2023 访问量:37

问:

问题

我不确定该怎么做才能解决日历页面问题。标签似乎有问题,如下图所示。Table header cell is missing a header role<th role="presentation>

enter image description here

我试过什么

到目前为止,我已经尝试添加 、、 以及,但这些似乎都没有使该错误消失。这是向 FullCalendar 报告的错误吗?任何想法,如果我需要将其报告为错误,我还应该做些什么来修复它?scope="col"scope="row"role="columnheader"role="rowheader"

FullCalendar 可访问性 wai-aria fullcalendar-6

评论

0赞 ADyson 10/3/2023
如果您认为 fullcalendar 存在问题,请报告 - 请参阅 fullcalendar.io/reporting-bugs

答:

1赞 slugolicious 10/2/2023 #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"

你也有在主桌上。如果您计划实现箭头键导航以在行和列之间移动(类似于在电子表格中导航的方式),则可以使用网格角色。我尝试了一个简单的 FullCalendar 演示,但箭头键不起作用,因此不应使用。日历中的日期是可聚焦的,这很好,但这只是一个普通的表格,而不是网格。<table role="grid">role="grid"tab

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