引导面板上的可访问性

Question

background: I'm currently setting up a website using bootstrap. 背景：我目前正在使用引导程序建立网站。 First thing I found is that in bootstrap the Panel (Accordion) does only toggle if you click exactly at the link. 我发现的第一件事是，在引导中，面板（手风琴）仅在您精确单击链接时才会切换。 after swaping the h4 and a tag there was still some places where i can click on the panel without toggling. 交换h4和标签后，仍然有一些地方可以在面板上单击而无需切换。

to fix this i moved the toggle element to the containing div. 为了解决这个问题，我将toggle元素移到了包含div的位置。 Now it doesn't matter where on the title Panel I click it will be toggled. 现在，无论我单击标题面板上的哪个位置都将被切换。

As I wanted the Panel also to be useable with Screenreaders and Keyboard Navigation i ran into the Problem that in the constellation i've set up, the link looses focus when using it by keyboard. 当我希望面板也可以与屏幕阅读器和键盘导航一起使用时，我遇到了一个问题，即在我设置的星座中，当通过键盘使用它时，链接失去了焦点。 when giving the href attribute the value '#', the page is scrolled to top, thats neither what i wanted. 当给href属性赋值'＃'时，页面滚动到顶部，这都不是我想要的。

So I came up with the idea of setting an unused id as target of href. 因此，我想到了将未使用的ID设置为href目标的想法。 This worked quiet well, the focus is not lost any more. 这项工作很好地进行，焦点不再丢失。

But I'm not sure if this might cause some other troubels. 但是我不确定这是否会引起其他麻烦。 Can anybody tell me how i can solve this Problem more properly? 有人可以告诉我如何更正确地解决这个问题吗？ (I tried Buttons, but by using them, role="tab" is invalid HTML (according to W3C Validator), so i didn't use them. （我尝试过Button，但是通过使用它们，role =“ tab”是无效的HTML（根据W3C验证程序），因此我没有使用它们。

Here's a mockup of my panel: 这是我的面板的模型：

<!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

My opinion is that your version is good. 我认为您的版本很好。 If you want to focus is not lost any more, then do as you have done( http://jsfiddle.net/DTcHh/3707/ ). 如果您不想再失去焦点，请照做（ http://jsfiddle.net/DTcHh/3707/ ）。 If not, my version(Try this, please. http://jsfiddle.net/DTcHh/3705/ ). 如果不是，请输入我的版本（请尝试。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>

引导面板上的可访问性

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-01-29 10:06:33

引导面板上的可访问性

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-01-29 10:06:33

解决方案1
0 已采纳 2015-01-29 10:06:33