引導面板上的可訪問性

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