如何避免在关闭的toogle汉堡包菜单上出现表格?

jhkqcmku  于 2022-10-24  发布在  WordPress
关注(0)|答案(2)|浏览(170)

我有一个静态的网页与超文本标记语言,css和js。
作为可访问性请求,我必须避免使用表格来读取关闭的切换菜单中的内容。
此外,一旦它打开,我必须避免列表退出菜单列表,直到您选择一个,或当您退出菜单时使用退出或退出按钮。

事实上,我不知道该如何处理这件事。

tcbh2hod

tcbh2hod1#

你应该看看tabindex attribute.,每当你关闭汉堡包时,将其设置为-1,每当你打开它时,将其设置为0。我不确定具体细节,但稍微试一试就可以上路了。

fcy6dtqo

fcy6dtqo2#

你不仅需要避免切换到折叠的内容,还需要避免它完全暴露在辅助技术之下。
例如,屏幕阅读器用户也可以在不使用焦点的阅读或浏览模式中导航。焦点主要用于互动,而不是阅读。因此,他们仍然可以在关闭的菜单内阅读。

对辅助技术隐藏元素

在优秀浏览器的开发人员工具中,您可以检查可访问性树或元素的可访问性属性。您需要确保折叠的元素甚至不在其中。

在视觉上隐藏元素的几个CSS属性也向辅助技术(AT)隐藏它们。例如display: nonevisibility: hiddenheight: 0
如果由于某种原因不能使用对AT隐藏元素的CSS,可以使用aria-hidden="true"。有时,这对于设置折叠过渡的动画是必要的。

避免元素内的焦点

对AT隐藏元素的CSS属性通常也会对Tab键顺序隐藏该元素。例如,不能将焦点放在具有display: none的父级元素上。
如果您应用不具有此效果的奇怪的CSS,则有几种可能性:

  • tabindex="-1"应用于隐藏父对象中的所有交互元素*(不是很好)。
  • 在父级上使用相对较新的inert属性

避开元素外的焦点(焦点陷阱)

通过将inerttabindex="-1"应用于陷印(菜单)之外的所有交互元素,可以以类似的方式建立焦点陷印。
您可以搜索焦点陷阱来找到解决方案。

查看ARIA创作实践指南(APG)

网络可访问性倡议(WAI)汇集了相当多的指南和一系列可访问的模式,提供了很好的例子。
Disclosure Pattern适用于您的情况,一个汉堡图标。
触发菜单的按钮需要具有角色button(如果它不是真正的按钮,则需要添加它),并使用aria-expanded="true|false"来指示菜单是否打开。
因为你的菜单覆盖了整个屏幕,你应该实现一个焦点陷阱the dialog pattern也会出现在你的脑海中。

相关问题