html - 是什么导致此 Accordion 导航失去浏览器默认焦点？

Question

是什么导致 Accordion 导航失去浏览器默认焦点？

<div class="panel panel-default">
    <div class="panel-heading">
        <button aria-controls="collapseTwo" aria-selected="false" data-target="#collapseTwo" data-toggle="collapse">Display</button>
    </div>
    <div class="panel-collapse collapse" id="collapseTwo">
        <div class="panel-body">
            <ul>
                <li class="iso-btn" data-filter=".desktop">
                    <a href="#">Desktop</a>
                </li>
                <li class="iso-btn" data-filter=".mobile">
                    <a href="#">Mobile</a>
                </li>
            </ul>
        </div>
    </div>
</div>

在 Chrome 中，如果我在移除所有 CSS 的情况下切换按钮，焦点会清楚地显示在每个按钮上。我已经用我的 CSS 完成了消除过程，但我一定遗漏了一些东西 - 需要在选项卡时将默认浏览器焦点放在按钮上。

知道我做错了什么吗？ HTML结构？自举？ CSS？

https://jsfiddle.net/DTcHh/32544/

Answer 1

Accordion 按钮应该使用 aria-expanded 属性而不是 aria-selected ，如图所示。 aria-selected 的使用对按钮 Angular 色无效，如果不是可选列表的一部分，则 false 状态可能会使浏览器感到困惑。例如，跳转到单选控件通常会落在列表中的选定项上，而忽略未选定的项。

参见 ARIA discussion of the aria-selected state有关用户代理焦点和其他细节的讨论，以及 section on accordions in the ARIA Authoring Practices document .

请注意，您还应该在面板标题上使用适当的标题标签，以实现更易于访问的导航。