Aria不良结果
我在我的网站的首页上有文件夹html
<header>
<div class="logo_container">
<a href="/">
<img src="xxx" alt="">
</a>
</div>
<nav class="">
<ul>
<li>
<a href="xxx" title="xxxx" >xxx</a>
</li>
<li>
<a href="xxxx" title="xxx" >xxx</a>
</li>
<li>
<a href="xxxx" title="xxxx">xxx</a>
</li>
<li>
</ul>
</nav>
<div class="toggle_menu" role="button" aria-label="open menu" tabindex="1"><em class="fa-solid fa-bars"></em>
</div>
</header>在这个标头处，导航器隐藏在移动设备上，当用户按下div.toggle_menu时显示。
IPhone14的VoiceOver屏幕阅读器读取的方式是“按钮，打开菜单，结束横幅”。
我想说的是“开放菜单”。因此，我删除了角色按钮，只留下了aria-标签=“打开菜单”。
现在它只写着“横幅的结尾”。Νο“打开菜单”或“按钮”。
我对咏叹调很陌生，我不知道该怎么做。任何帮助都是非常感谢的。
回答 1
Stack Overflow用户
发布于 2022-11-23 10:02:07
简短地说:你不应该那么做。有一个很好的理由，屏幕阅读器阅读他们的方式，你应该尊重这一点。它的用户依赖于这一点。
话虽如此，你能潜入ARIA并关心屏幕阅读器的体验真是太好了。
角色
对于屏幕阅读器用户来说，这个角色是非常重要的，让他们知道在交互和键盘控制方面应该期待什么。角色交流交互模式。
ARIA的全部目的是为否则毫无意义的元素添加意义，在这些元素中，您不能使用适当的HTML元素。
通过删除该角色，您将留下一个无意义的<div>，它可能具有可聚焦性，但通过屏幕显示读者用户了解如何与其交互的直观程度要低得多。辅助技术不知道它有什么好处，语音控制软件可能不会让你点击它。
aria-label提供的可访问名称不能用于任何元素。角色决定名称是否应该(或必须)使用。VoiceOver不会宣布像<div>这样没有意义的元素的名称。
Tabindex 1
通过添加tabindex="1"，您将按钮放在任何其他可调焦点的页面内容之前，这会扰乱预期的焦点顺序。
我想你是把它放在导航后的按钮上了。但是很大一部分屏幕阅读器用户是可见的，他们依靠屏幕阅读器公开的内容来匹配他们所能看到的内容。徽标出现在按钮前面，如果它没有先集中注意力的话，它会很让人恼火。
请参阅ARIA创作实践指南
当谈到切换按钮时，您应该实现ARIA模式，它不仅需要角色按钮，而且还需要aria-expanded来向辅助技术解释按钮打开和关闭某些东西以及它的状态。
按钮应该在展开内容之前。
<header>
<div class="logo_container">
<a href="/">
<img src="xxx" alt="Home, ACME">
</a>
</div>
<button class="toggle_menu" aria-label="open menu" aria-expanded="false"><em class="fa-solid fa-bars"></em></button>
<nav hidden>
<ul>
<li>
<a href="xxx " title="xxxx ">xxx</a>
</li>
<li>
<a href="xxxx " title="xxx ">xxx</a>
</li>
<li>
<a href="xxxx " title="xxxx ">xxx</a>
</li>
<li>
</ul>
</nav>
</header>
https://stackoverflow.com/questions/74503594
复制相似问题
腾讯云开发者
