我的应用程序中有一个拆分按钮结构，类似于以下 jsbin。
第一个按钮将执行默认操作，第二个按钮将提供一个包含更多相关操作的菜单 (ul)。
当我进入第一个按钮时，它会显示“操作按钮”。没关系。但是当我进入向下箭头按钮时，它显示为“按钮”。
使这项工作易于访问的正确方法是什么？我在想 aria-haspopup 但这并没有在 Voice Over 上读到。
理想情况下，这对于 VOice Over、NVDA 和 Jaws（最新减 2）应该是正确的。我想在这里找到一个好的基准或建议？
【问题讨论】：
标签： html accessibility
您在 aria-haspopup 中走上了正轨。 正如@Menelion Elensúle 所说，您的箭头按钮没有内容。
假设我们做了类似 iTunes 商店的操作，并且有 1 个指向某个类别的链接和一个用于子类别的下拉列表... 这是正确的标记
<a href="movies.html" clsas="acttion-button">Movies</a>
<button type="button" class="action-dropdown hide" aria-haspopup="true" aria-expanded="false" aria-controls="movies-menu">movies dropdown</button>
<ul id="movies-dropdown">
<li><a href="movies/adventure.html">Adventure</a></li>
...
</ul>
使用“hide”类在视觉上隐藏文本。 （不要使用显示：无） 当点击箭头时，将 aria-expanded 更改为 true，并记得在隐藏下拉菜单时将其切换回 false。
【讨论】：
我的 JAWS 15 显示“未标记 3 按钮”。你必须标记你的按钮。这里：
<button>Action</button>
<button class="arrow"></button>
请注意：第二个按钮在标签之间没有任何内容。如果无法在其中插入一些东西（这会破坏您的设计），那么将您的箭头制作为具有alt 属性的普通图像是合适的。
【讨论】：
text-indent: -1000px 添加到.arrow 类中。这样你就会有文字，但不可见。