我有一个静态的网页与超文本标记语言,css和js。作为可访问性请求,我必须避免使用表格来读取关闭的切换菜单中的内容。此外,一旦它打开,我必须避免列表退出菜单列表,直到您选择一个,或当您退出菜单时使用退出或退出按钮。
事实上,我不知道该如何处理这件事。
tcbh2hod1#
你应该看看tabindex attribute.,每当你关闭汉堡包时,将其设置为-1,每当你打开它时,将其设置为0。我不确定具体细节,但稍微试一试就可以上路了。
fcy6dtqo2#
你不仅需要避免切换到折叠的内容,还需要避免它完全暴露在辅助技术之下。例如,屏幕阅读器用户也可以在不使用焦点的阅读或浏览模式中导航。焦点主要用于互动,而不是阅读。因此,他们仍然可以在关闭的菜单内阅读。
在优秀浏览器的开发人员工具中,您可以检查可访问性树或元素的可访问性属性。您需要确保折叠的元素甚至不在其中。
在视觉上隐藏元素的几个CSS属性也向辅助技术(AT)隐藏它们。例如display: none、visibility: hidden或height: 0。如果由于某种原因不能使用对AT隐藏元素的CSS,可以使用aria-hidden="true"。有时,这对于设置折叠过渡的动画是必要的。
display: none
visibility: hidden
height: 0
aria-hidden="true"
对AT隐藏元素的CSS属性通常也会对Tab键顺序隐藏该元素。例如,不能将焦点放在具有display: none的父级元素上。如果您应用不具有此效果的奇怪的CSS,则有几种可能性:
tabindex="-1"
inert
通过将inert或tabindex="-1"应用于陷印(菜单)之外的所有交互元素,可以以类似的方式建立焦点陷印。您可以搜索焦点陷阱来找到解决方案。
网络可访问性倡议(WAI)汇集了相当多的指南和一系列可访问的模式,提供了很好的例子。Disclosure Pattern适用于您的情况,一个汉堡图标。触发菜单的按钮需要具有角色button(如果它不是真正的按钮,则需要添加它),并使用aria-expanded="true|false"来指示菜单是否打开。因为你的菜单覆盖了整个屏幕,你应该实现一个焦点陷阱,the dialog pattern也会出现在你的脑海中。
button
aria-expanded="true|false"
2条答案
按热度按时间tcbh2hod1#
你应该看看tabindex attribute.,每当你关闭汉堡包时,将其设置为-1,每当你打开它时,将其设置为0。我不确定具体细节,但稍微试一试就可以上路了。
fcy6dtqo2#
你不仅需要避免切换到折叠的内容,还需要避免它完全暴露在辅助技术之下。
例如,屏幕阅读器用户也可以在不使用焦点的阅读或浏览模式中导航。焦点主要用于互动,而不是阅读。因此,他们仍然可以在关闭的菜单内阅读。
对辅助技术隐藏元素
在优秀浏览器的开发人员工具中,您可以检查可访问性树或元素的可访问性属性。您需要确保折叠的元素甚至不在其中。
在视觉上隐藏元素的几个CSS属性也向辅助技术(AT)隐藏它们。例如
display: none
、visibility: hidden
或height: 0
。如果由于某种原因不能使用对AT隐藏元素的CSS,可以使用
aria-hidden="true"
。有时,这对于设置折叠过渡的动画是必要的。避免元素内的焦点
对AT隐藏元素的CSS属性通常也会对Tab键顺序隐藏该元素。例如,不能将焦点放在具有
display: none
的父级元素上。如果您应用不具有此效果的奇怪的CSS,则有几种可能性:
tabindex="-1"
应用于隐藏父对象中的所有交互元素*(不是很好)。inert
属性避开元素外的焦点(焦点陷阱)
通过将
inert
或tabindex="-1"
应用于陷印(菜单)之外的所有交互元素,可以以类似的方式建立焦点陷印。您可以搜索焦点陷阱来找到解决方案。
查看ARIA创作实践指南(APG)
网络可访问性倡议(WAI)汇集了相当多的指南和一系列可访问的模式,提供了很好的例子。
Disclosure Pattern适用于您的情况,一个汉堡图标。
触发菜单的按钮需要具有角色
button
(如果它不是真正的按钮,则需要添加它),并使用aria-expanded="true|false"
来指示菜单是否打开。因为你的菜单覆盖了整个屏幕,你应该实现一个焦点陷阱,the dialog pattern也会出现在你的脑海中。