鍵盤訪問下拉菜單 - HTML/CSS只

我有我通過鍵盤試圖訪問，但不能讓它顯示在一個HTML/CSS下拉菜單：重點鍵盤訪問下拉菜單 - HTML/CSS只

這裏的我的HTML。我已經添加了一個選項卡索引列表項目，以便它可以接收焦點通知<li tabindex="0" >

<div id="topnav"> 
<div class="page"> 
    <ul> 
     <li tabindex="0" ><a href="/">Example 1</a> 
      <ul class="dropdown"> 
       <li><a href="/">Example Page 1a</a></li> 
       <li><a href="/">Example Page 2a</a></li> 
       <li><a href="/">Example Page 3a</a></li> 
      </ul> 
     </li> 
     <li tabindex="0" ><a href="/">Example 2</a> 
      <ul class="dropdown"> 
       <li><a href="/">Example Page 1b</a></li> 
       <li><a href="/">Example Page 2b</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

可以在例如鏈接http://jsfiddle.net/2by45fyx/

基本上查看完整的CSS，該dropdown是hidden默認：

#topnav .dropdown { visibility: hidden; }

我可以告訴它確定當鼠標懸停：

#topnav li:hover .dropdown { visibility: visible; }

我曾嘗試加入以下時，父列表項接收焦點，並且下拉秀不顯示下拉但我不能標籤給它。

#topnav li:active .dropdown, #topnav li:focus .dropdown { visibility: visible; }

任何人都可以告訴我是否可以通過此鍵盤選項卡下拉？

來源

2015-12-03 Scott

可能是，但您可能需要交互才能處理錨標記而不是列表項。從邏輯上講，你無法真正關注列表項目，只能看到像錨點或輸入這樣的交互元素。 –

你的代碼在我的機器上正常工作。我點擊您的項目下，然後單擊選項卡和第一個下拉菜單出現 – Dumisani

嗨@Dumisani是的，它工作正常，如果你點擊 - 我需要它可以通過鍵盤使用標籤完全可訪問...沒有點擊！ – Scott

您可以使用accesskey屬性做到這一點：

在這裏看到：https://jsfiddle.net/70w6hru9/ 和使用根據您使用的瀏覽器下面提到的快捷方式。

每一個瀏覽器使用其自己的快捷

IE，Chrome瀏覽器，Safari，Opera或15+：[ALT] + ACCESSKEY
歌劇院前15版：[SHIFT] [ESC] + ACCESSKEY
Firefox：[ALT] [SHIFT] + accesskey

因此，您需要在您的網站上爲您的用戶提及這一點！

來源

2015-12-03 14:39:01 Franco

請不要這樣做。Accesskey有可訪問性問題 –

@Ryan我知道這一點，這就是爲什麼我提到，讓用戶知道如何根據他們正在使用的瀏覽器訪問元素 – Franco

嗨@Franco我已經嘗試訪問密鑰方法和所有它確實是關注父標籤，我仍然無法標籤到關注的標籤子選項，所以沒有前進 – Scott

鍵盤訪問下拉菜單 - HTML/CSS只

回答

相關問題