我试图将键盘导航添加到Twitter bootstrap手风琴以启用web可访问性，类似于http://hanshillen.github.io/jqtest/#goto_accordion。将twitter可访问性添加到twitter引导手风琴

我不能做到以下几点：

一旦重点是手风琴选项卡，我不能只是导航手风琴头。当我点击标签时，它会导航组中的所有内部链接，然后导航到下一个标题。
我不能使用上/下箭头键
最后手风琴标题标签后救援人员到场，集中手风琴外转移。

Link to page

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Getting Started</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

</head> 

<body> 
<div class="row-fluid" id="main"> 
<div class="container"> 
    <div class="row-fluid"> 
    <div class="gutter10"> 
     <div class="row-fluid"> 
     <div class="span3" id="sidebar"> 
      <div class="selections"> 
      <h4 class="graydrkbg">Hello</h4> 
      </div> 
     </div> 
     <!--sidebar--> 
     <div class="span9" id="rightpanel"> 
      <div class="gutter10"> 
       <div class="accordion" id="accordion2"> 
        <div class="accordion-group"> 
         <div class="accordion-heading"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
           Collapsible Group Item #1 
          </a> 
         </div> 
         <div id="collapseOne" class="accordion-body collapse in"> 
          <div class="accordion-inner"> 
           <p> 
            <a href="http://en.wikipedia.org/wiki/Dogs" class="">More information about Dogs on Wikipedia</a> 
           </p> 
          </div> 
         </div> 
        </div> 
        <div class="accordion-group"> 
         <div class="accordion-heading"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
           Collapsible Group Item #2 
          </a> 
         </div> 
         <div id="collapseTwo" class="accordion-body collapse"> 
          <div class="accordion-inner"> 
           <p>Anim pariatur cliche...</p> 
           <p> 
            <a href="http://en.wikipedia.org/wiki/Dogs" class="">More information about Dogs on Wikipedia</a> 
           </p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div><!--gutter10--> 
     </div><!--rightpanel--> 
     </div><!--row-fluid--> 
    </div><!--gutter10--> 
    <!--container--> 
</div><!--main--> 


<!--footer--> 
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="../js/bootstrap.js" type="text/javascript"></script> 
</body> 
</html>

来源

2013-05-07 dragonfly

添加您的代码或者无法提供帮助 – aaronman 2013-05-07 22:49:17

所以这是我要为缺乏一个更好的解决方案做：

要.collapse我会加display:none;这将隐藏它视力正常的用户，以及作为屏幕阅读器。然后到.in我将添加display:block;，这将使它再次可见。那么，它会在关闭时跳过标签顺序中的内容，并在打开时将其添加回来。

这样：

.collapse { 
     display:none; 
    } 

    .in{ 
     display:block; 
    }

我还没有屏幕阅读器进行过测试，但我认为它应该工作的向下箭头回读的文本。如果不是，我会更新。

来源

2013-07-17 20:48:20 innerurge1

将twitter可访问性添加到twitter引导手风琴

我不能做到以下几点：

回答

相关问题