Question

背景：我目前正在使用bootstrap建立一个网站。我发现的第一件事是，在bootstrap中，如果你完全点击链接，Panel（Accordion）只会切换。交换h4和标签之后，仍有一些地方我可以点击面板而不切换。

要解决此问题，我将切换元素移动到包含div。现在，点击标题面板的位置并不重要。它将被切换。

由于我希望Panel也能用于屏幕阅读器和键盘导航，我遇到了问题，即在我设置的星座中，链接在键盘使用时失去了焦点。当给href属性赋值＆＃39;＃＆＃39;时，页面会滚动到顶部，这不是我想要的。

所以我提出了将未使用的id设置为href目标的想法。这很安静，重点不再丢失。

但我不确定这是否会引起其他问题。任何人都可以告诉我如何才能更好地解决这个问题？（我尝试过Buttons，但是使用它们，role =＆＃34; tab＆＃34;是无效的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/）。如果没有，我的版本（请试试这个。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面板的可访问性

1 个答案: