FullCalendar v6.1 使用 SiteImprove 浏览器扩展在 GridCalendar 视图上产生 50 个“ARIA 属性不受支持或禁止”错误

Question

错误

我正在开发一个法律要求保持一定水平可访问性的网站。我们使用 SiteImprove（免费的浏览器扩展）来检查问题。我在

GridCalendar

视图上收到 50 个错误。

ARIA 属性不受支持或禁止 - 在此类型的元素上指定了不支持或禁止的 ARIA 属性。

HTML

其中 49 个错误被报告为

aria-label on a

，它们看起来都与此类似...

<a aria-label="October 1, 2023" id="fc-dom-2" class="fc-daygrid-day-number">1</a>

其中 1 个错误被报告为

aria-labelledby on div

，html 看起来像这样......

<div aria-labelledby="fc-dom-1" class="fc-view-harness fc-view-harness-active" style="height: 687.407px;">
    <div class="fc-dayGridMonth-view fc-view fc-daygrid">
        <table role="grid" class="fc-scrollgrid  fc-scrollgrid-liquid">
            ...
        </table>
    </div>
</div>

描述

对于

aria-label on a

问题 - 我注意到

<a>

标签没有

href

属性，这并不是一个很好的做法。因此，当我手动添加它并指出一些内容时，错误就消失了。但是当我尝试将标签更改为

<span>

时，错误仍然存在。我检查了 FullCalendar GitHub 问题，并在https://github.com/fullcalendar/fullcalendar/pull/6266找到了可能与此相关的 Pull 请求。

对于

aria-labelledby on div

问题 - 坦白地说，我实际上也不知道该怎么做。我尝试删除

aria-labelledby

属性，当然错误消失了，但这可能不是正确的解决方案。我要为这个做什么？

总结

1. 简而言之，我不太确定如何解决这些 ADA 问题，因此我可以提出任何适当的建议，或者自己在本地修复它们。
2. 如果这些确实是错误，我会提交错误报告，但他们提到“需要减少测试用例”，提交似乎有点令人畏惧。

Answer 1

锚标签上的

aria-label

是完全有效的。但是，没有

href

的锚标记将无法通过键盘获得焦点。它被认为是“占位符链接”。我认为 siteimprove 可能会对它试图报告的错误感到困惑。占位符链接本身并不是错误，但它可能是一个错误，siteimprove 应该向您发出警告或“您应该检查此”消息。听起来您已经通过添加 href 证明了这一点，并且 siteimprove 消息消失了。

aria-labelledby

和

aria-label

在 if

上有效， 也有

role

。如果没有角色，ARIA 属性很可能会被忽略。请参阅“

2.10 实际支持：aria-label、aria-labelledby 和 aria-scribedby”的第三个last要点

不要在 span 或 div 上使用 aria-label 或 aria-labelledby，除非它被赋予了角色。

如果您在没有角色的

aria-labelledby

上使用

<div>

，这在技术上并不是错误，但标签很可能不会被读取。我认为 siteimprove 可能会试图警告您这一点。