TYPO3菜单无障碍

Question

我正在开发一个新的 TYPO3 网站，并尽量做到无障碍。 使用测试工具 (wave) 检查站点时，我被告知菜单项中有冗余文本。 它说：“标题属性文本与文本或替代文本相同”。 生成的代码 (boostrap_package) 如下所示： <a href="/fach" id="nav-item-18" class="nav-link dropdown-toggle" title="Fach" aria-haspopup="true" aria-expanded="false"><span class="nav-link-text">Fach</span></a>

我不知道如何改变这个。 有人能帮我吗？

Answer 1

WAVE 工具报告“错误”（带有白色 X 的红色方块， ) 和“警报”（带有白色感叹号的黄色三角形， ）， 除其他事项外。

应检查 WAVE 的所有结果的准确性，但一般来说，“错误”通常需要修复（大多数情况下它们是WCAG失败），但“警报”可能是“最佳实践”，不一定是 WCAG 失败。

在这种情况下，具有与title属性匹配的文本的链接很可能会导致屏幕阅读器读出该文本两次，因此它被标记为“警报”（ ). 两次听到文本并不好，但也不是失败。

<a href="#" title="foo">foo</a>

屏幕阅读器等辅助技术将宣布“可访问名称”和可选的“ 可访问描述”。 描述通常使用默认屏幕阅读器设置公布，但用户可以将其关闭。

“可访问名称”将来自链接内的文本，在我的示例中为“foo”，在您的示例中为“Fach”。 “可访问的描述”将来自title属性。

您可以在可访问名称和描述计算 1.1中看到用于计算可访问名称和描述的各种属性的列表。

在这种情况下，“可访问名称”来自步骤 2F，“名称来自内容”，“可访问描述”来自步骤 2I（眼睛），“工具提示属性”。

屏幕阅读器通常会宣布元素的“可访问名称”、元素的类型或角色，在本例中为“链接”，然后是“可访问描述”。 所以你会听到"foo, link, foo"或"Fach, link, Fach" 。

WAVE 只是让您知道，将文本听两次可能听起来有点冗长和多余。 您不必修复它，但值得考虑。 有视力的用户将看到链接的文本，如果他们将鼠标 hover 悬停在链接上，他们将在工具提示中看到相同的文本。 它并没有真正为用户提供比他们已经拥有的更多信息，因此工具提示有点无用。