我有一个静态的网页与超文本标记语言，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也会出现在你的脑海中。