Question

导致此手风琴导航失去浏览器默认焦点的原因是什么？

<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

如图所示，手风琴按钮应使用aria-expanded属性而不是aria-selected。使用aria-selected对按钮角色无效，如果不是可选列表的一部分，则错误状态可能会使浏览器混淆。例如，对单选控件的选项卡通常会落在列表中的选定项目上，并忽略未选择的项目。

有关用户代理焦点和其他详细信息的讨论，请参阅ARIA discussion of the aria-selected state，还有section on accordions in the ARIA Authoring Practices document。

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

导致此手风琴导航失去浏览器默认焦点的原因是什么？

1 个答案: