Accessiblity on Bootstrap Panels
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.
to fix this i moved the toggle element to the containing 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.
So I came up with the idea of setting an unused id as target of 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.
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>
1 answers
solution1
0 ACCPTED 2015-01-29 10:06:33
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/ ). 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.