处理按钮组的语义方式答案

【问题标题】：Semantic way to handle a button group处理按钮组的语义方式
【发布时间】：2013-01-02 21:44:15
【问题描述】：

我有一个隐藏或显示的音频流列表，具体取决于用户是否单击类“btn-group”的 div 元素。我的标记类似于 twitter bootstrap 的按钮组，如下所示：

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Expand
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <!-- dropdown menu links -->
    </ul>
</div>

这很好，但不幸的是，这一重要功能隐藏在 div 元素中，而不是更有意义的东西。是否有一个 aria-role 有意义？有没有其他人会推荐的方法？

【问题讨论】：

用按钮代替锚点怎么样？有一个开始。您还可以在放弃 div 时将其全部嵌套在无序列表中

标签： html markup semantic-markup wai-aria

【解决方案1】：

一个不错的解决方案可能是将按钮的 aria 标志性角色赋予 btn-group div，如下所示：

<div class="btn-group" role="button">

这样，屏幕阅读器将了解该组的性质。

【讨论】：