作者：桃花源主ITXB | 来源：互联网 | 2022-12-05 15:41
我正在读一点关于咏叹调的用法,并且遇到了这篇文章:ARIA使用的第四条规则.我不清楚的一个部分是:
"将aria-hidden应用于可见交互元素的父/祖先也将导致交互元素被隐藏,"
我尝试了以下片段,但仍然可以访问锚标记(即使我在其父级上放置了一个隐藏的咏叹调).我在这里错过了什么？
body, html {
background-color: #333;
height: 100%;
}
#main {
margin: 0 auto;
width: 80%;
background-color: #fff;
height: 100%;
padding: 50px;
}
.test {
border: 1px solid #555;
padding: 10px;
}
1> slugolicious..：
取决于链接仍然"可访问"的含义.添加aria-hidden="true"将阻止元素包含在辅助功能树中(类似于DOM),以便屏幕阅读器用户在遍历辅助功能树时将无法找到链接(通常使用向上/向下箭头键完成).
ARIA属性会影响屏幕阅读器访问元素的方式.它不提供任何行为.在您提供的"咏叹调使用规则"链接中,请进一步了解" 添加角色不起作用的内容 ".
因此,虽然加aria-hidden="true" 不避免的元件将被插入的辅助树,它并没有删除从普通键盘Tab键顺序的元素.您仍然可以选择链接并选择它.您必须添加tabindex="-1"到链接以防止标签.
我知道您的示例代码段仅用于测试目的,但希望您没有从屏幕阅读器用户隐藏交互式元素(如链接)的情况. aria-hidden应使用从屏幕阅读器隐藏非重要的东西(装饰事情),或者如果你是视觉上暂时隐瞒了什么,也想从屏幕阅读器隐藏的东西,例如,如果你有一个展开/折叠的事情,当元素为折叠后,您通过将内容移出屏幕(而不是使用display:none)来直观地隐藏内容,您也希望aria-hidden="true"设置内容.
京公网安备 11010802041100号