分屏按钮应如何与屏幕阅读器一起使用？

Question

我的应用程序中有一个分割按钮构造，类似于以下jsbin。

http://jsbin.com/opAtiYEl/8

第一个按钮会执行默认操作，第二个按钮会给出一个包含更多相关操作的菜单（ul）。

当我进入第一个按钮时，它会显示“操作按钮”。没关系。但当我按下箭头按钮时，它会显示“按钮”。

使这项工作易于使用的正确方法是什么？我在想咏叹调-haspopup，但是没有在Voice Over上阅读。

理想情况下，对于VOice Over，NVDA和Jaws（最新减去2），这应该是正确的。我想在这里找到一个好基线或建议吗？

Answer 1

我的JAWS 15说“未标记3按钮”。你必须标记你的按钮。这里：

<button>Action</button>
<button class="arrow"></button>

请注意：第二个按钮在标签之间没有任何内容。如果在那里插入某些东西是不可能的（它会破坏你的设计），那么将你的箭头设为具有alt属性的普通图像是合适的。

Answer 2

你是aria-haspopup的正确轨道。 正如@MenelionElensú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>

使用“隐藏”类可视地隐藏文本。 （不要使用display：none） 当点击箭头时，将aria-expanded更改为true，并记住在隐藏下拉列表时将其切换回false。