無障礙菜單 - 在我的網站的焦點

我的問題，當我焦點時，由標籤的菜單，菜單打開像我通過鼠標懸停菜單。但當我繼續子菜單元素與選項卡菜單關閉。

如何保持菜單打開，如果一些子元素的重點。

當然，我可以通過JavaScript來做到這一點，但我想知道如果我只能用CSS來做到這一點。

我這裏是（嘗試去與 '標籤' 鏈接）

li.main{ 
 
    
 
    float:left; 
 
    width:200px; 
 
} 
 
li .sub{ 
 
    display:none; 
 
    } 
 
li:hover .sub{ 
 
    display:block 
 
    } 
 

 
li.main:focus .sub{ 
 
    display:block 
 
    }

<ul> 
 
    <li class="main" tabindex="0"> 
 
    First menu 
 
    <div class='sub'> 
 
     <ul> 
 
     <li><a href="#">First Link</a> </li> 
 
     <li><a href="#">Second Link</a> </li> 
 
     </ul> 
 
     </div> 
 
    </li> <li class="main" tabindex="0"> 
 
    Second menu 
 
    <div class='sub'> 
 
     <ul> 
 
     <li><a href="#">Third Link</a> </li> 
 
     <li><a href="#">Forth Link</a> </li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul>

來源

2015-10-27 24sharon

你在找什麼有，不幸的是，不存在尚未所以，現在家長選擇，JavaScript是你需要走的路線。 – Shaggy

使用CSS的電流的可能性，你不能，因爲它是在一個討論很多問題之前（例如見accessible css dropdown menu）。

首先，您不能在這種方法中使用「display：none」，因爲無法使用下一個鏈接快捷方式（大多數瀏覽器實現中的tab鍵）訪問鏈接。

解決方案的工作將意味着像定位在屏幕外的解決方案。由於CSS中沒有parent（）選擇器，所以它會將屏幕上的視圖限制爲當前鏈接，或者您可以使用上述線程中的技巧（這可以在某些瀏覽器中使用，並限制下拉部分的寬度）。

但無論採用哪種解決方案，都不會解決主要問題：下拉菜單不是實現可訪問性的最佳途徑。

例如，使用眼動追蹤軟件的殘疾人永遠不會受益於下拉菜單。使用平板電腦的人也不會。

它總是很難用，很難理解：如果我點擊分類鏈接怎麼辦？它打開類別主頁面，還是打開子菜單？

如果你真的想要一個可訪問的菜單，不使用下拉菜單

來源

2015-11-01 11:19:11 Adam

無障礙菜單 - 在我的網站的焦點

回答

相關問題