使用 css 位置绝对偏移量在菜单中隐藏子导航有什么缺点吗?
Are there any downsides to hiding sub navigation in a menu using css position absolute offset?
使用偏移技术隐藏嵌套导航菜单,即给出
position : absolute
left : -9999em
到子菜单,然后悬停,将其更改为 left:0;
代码 - https://codepen.io/yogesharora28/pen/WNNPQKV
使用这种方式会不会有什么潜在的问题?我注意到的一件事是,使用屏幕 readers 进行辅助功能,如果您在屏幕 reader 中使用快捷键,子菜单中的所有链接都将出现在其中,您将不得不浏览子菜单中的所有链接。
不确定,是否需要。
正如您所提到的,Tab 键可能会变得乏味……尤其是对于键盘用户来说,当子菜单很长时。作为替代方法,我建议您阅读 ARIA menubar
角色......它几乎可以满足您的需求,但采用标准化方式:
规格:https://www.w3.org/TR/wai-aria-1.1/#menubar
工作示例:https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
使用技术帮助的人并不总是完全失明。
想象一下,正在阅读屏幕上的一些文本,但无法同时查看它,也无法单击它。
屏幕阅读器从未隐藏它的事实也存在问题,使用屏幕阅读器的人将被迫阅读不同子菜单的每个元素,而这可能是不必要的。人们可能反对他们仍然可以使用一些快捷方式转到下一个元素,但并非所有屏幕阅读器用户都对快捷方式感到满意。
考虑到残疾人必须拥有与所有人相同的经历。如果您认为必须隐藏子菜单(以便于导航),那么您应该为每个人都这样做。
使用 display:none
是更好的选择。
使用偏移技术隐藏嵌套导航菜单,即给出
position : absolute
left : -9999em
到子菜单,然后悬停,将其更改为 left:0;
代码 - https://codepen.io/yogesharora28/pen/WNNPQKV
使用这种方式会不会有什么潜在的问题?我注意到的一件事是,使用屏幕 readers 进行辅助功能,如果您在屏幕 reader 中使用快捷键,子菜单中的所有链接都将出现在其中,您将不得不浏览子菜单中的所有链接。
不确定,是否需要。
正如您所提到的,Tab 键可能会变得乏味……尤其是对于键盘用户来说,当子菜单很长时。作为替代方法,我建议您阅读 ARIA menubar
角色......它几乎可以满足您的需求,但采用标准化方式:
规格:https://www.w3.org/TR/wai-aria-1.1/#menubar
工作示例:https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
使用技术帮助的人并不总是完全失明。
想象一下,正在阅读屏幕上的一些文本,但无法同时查看它,也无法单击它。
屏幕阅读器从未隐藏它的事实也存在问题,使用屏幕阅读器的人将被迫阅读不同子菜单的每个元素,而这可能是不必要的。人们可能反对他们仍然可以使用一些快捷方式转到下一个元素,但并非所有屏幕阅读器用户都对快捷方式感到满意。 考虑到残疾人必须拥有与所有人相同的经历。如果您认为必须隐藏子菜单(以便于导航),那么您应该为每个人都这样做。
使用 display:none
是更好的选择。