我試圖將鍵盤導航添加到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引導手風琴

我不能做到以下幾點：

回答

相關問題