引导面板上的可访问性

Question

背景：我目前正在使用引导程序建立网站。 我发现的第一件事是，在引导中，面板（手风琴）仅在您精确单击链接时才会切换。 交换h4和标签后，仍然有一些地方可以在面板上单击而无需切换。

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

当我希望面板也可以与屏幕阅读器和键盘导航一起使用时，我遇到了一个问题，即在我设置的星座中，当通过键盘使用它时，链接失去了焦点。 当给href属性赋值'＃'时，页面滚动到顶部，这都不是我想要的。

因此，我想到了将未使用的ID设置为href目标的想法。 这项工作很好地进行，焦点不再丢失。

但是我不确定这是否会引起其他麻烦。 有人可以告诉我如何更正确地解决这个问题吗？ （我尝试过Button，但是通过使用它们，role =“ tab”是无效的HTML（根据W3C验证程序），因此我没有使用它们。

这是我的面板的模型：

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

引导面板上的可访问性

问题描述

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