Bootstrap 个面板上的辅助功能

Question

背景：我目前正在使用 bootstrap 建立网站。我发现的第一件事是，在 bootstrap 中，面板（手风琴）只有在您准确单击 link 时才会切换。交换 h4 和标签后，仍有一些地方我可以在不切换的情况下点击面板。

为了解决这个问题，我将切换元素移到了包含 div 的位置。现在无论我在标题面板上的哪个位置点击它都会被切换。

因为我希望面板也可以与屏幕阅读器和键盘导航一起使用，我运行进入我设置的星座中的问题，link 在使用它时会失去焦点键盘。当给 href 属性值 '#' 时，页面滚动到顶部，这不是我想要的。

所以我想到了将未使用的 id 设置为 href 的目标的想法。这很好用，焦点不再丢失。

但我不确定这是否会引起其他麻烦。谁能告诉我如何更正确地解决这个问题？（我试过按钮，但是通过使用它们，role="tab" 是无效的 HTML（根据 W3C Validator），所以我没有使用它们。

这是我的面板的模型：

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>My Mockup</title>

    <!-- meta --> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- css -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
</head>

<body>

    <div id="my_container">

        <div class="panel panel-default">
            <div role="tab" class="panel-heading toggle collapsed accordion_toggle" id="heading" data-toggle="collapse" data-target="#my_body" aria-expanded="false" aria-controls="my_body">
                 <h4 class="panel-title">
                    <a href="#my_body">
                        This Link reffers to the Panel Body (as in Bootstrap) to open it
                    </a>
                </h4>
            </div>
            <div id="my_body" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading">
                <div class="panel-body">
                    Here goes the content
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div role="tab" class="panel-heading toggle collapsed accordion_toggle" id="heading2" data-toggle="collapse" data-target="#my_body2" aria-expanded="false" aria-controls="my_body2">
                 <h4 class="panel-title">
                    <a href="#my_notthere">
                        This link refers to an not existing element and opens the Panel
                    </a>
                </h4>
            </div>
            <div id="my_body2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                <div class="panel-body">
                    The reason for this is that the focus of the element is not removed
                </div>
            </div>
        </div>

    </div>

    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>

Answer 1

我觉得你的版本不错。如果你想重心不再迷失，就照你做的去做(http://jsfiddle.net/DTcHh/3707/). If not, my version(Try this, please. http://jsfiddle.net/DTcHh/3705/).

<div id="my_container">

   ...

    <div class="panel panel-default">
        <div role="tab" class="panel-heading toggle collapsed accordion_toggle" id="heading2" data-toggle="collapse" data-target="#my_body2" aria-expanded="false" aria-controls="my_body2">
             <h4 class="panel-title">
                <a href="#my_body2">
                    This link refers to an not existing element and opens the Panel
                </a>
            </h4>
        </div>
        <div id="my_body2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
            <div class="panel-body">
                The reason for this is that the focus of the element is not removed
            </div>
        </div>
    </div>

</div>

Bootstrap 个面板上的辅助功能

Accessiblity on Bootstrap Panels

html

accessibility

twitter-bootstrap