鍵盤訪問下拉懸停菜單

所以我使用pytheas主題爲一個網站，它需要是完全可訪問的。除了使用鍵盤瀏覽下拉菜單項目，或者特別是tab鍵之外，我已完成所有其他要求。它貫穿菜單的所有標題，但不會進入dropdown元素。鍵盤訪問下拉懸停菜單

我在考慮鏈接每個菜單標題以打開一個下拉菜單instead of a new page，但我該怎麼做？目前我甚至可以看到下拉元素的唯一方法是當我的鼠標移動到

時

有沒有辦法做到這一點？還是有更簡單的方法讓菜單可以訪問？

2014-03-05 user3219859

此菜單現在可以通過鍵盤訪問。此鏈接對做訪問（需要JS），並適用於屏幕閱讀器的菜單鍵盤好消息是解釋ARIA屬性 - http://simplyaccessible.com/examples/css-menu/option-6/

.nav-menu > li > a:focus, 
.nav-menu > .current-menu-item > a:focus, 
.navigation .current-menu-parent > a:focus, 
.navigation .current-menu-parent > a:focus, 
.nav-menu > .current-menu-item > a:focus, 
.nav-menu ul a:focus { 
    background: none repeat scroll 0 0 #F15A23; 
    color: #FFFFFF; 
    text-decoration: none; 
} 

.nav-menu li:focus ul, 
ul.show-menu { 
    margin: 0; 
    opacity: 1; 
    visibility: visible; 
}

看到它落實在WP菜單這裏：使用TAB鍵和箭頭（用於例如向下箭頭去功能2級）

http://fiddle.jshell.net/L9y5U/9/
http://fiddle.jshell.net/L9y5U/9/show/

來源

2014-03-05 19:02:29 JohanVdR

嗚！這看起來很棒！感謝您的幫助。剩下的唯一問題是，當我在標題菜單選項卡上打開並且下拉菜單打開後，按下向下箭頭時，它不會選中任何下拉菜單項，我只能看到它們，但仍然無法導航 – user3219859

你鏈接，有沒有辦法看看它的代碼？或者我必須從檢查元素獲取所有的CSS文件？ – user3219859

它全部在jsfiddle中 - CSS是你在外部資源中的例子，CSS中的額外的CSS小提琴和JS是JS面板。您可以使用上下箭頭和上下箭頭或選項卡使用的下拉菜單項導航到下拉菜單。您也可以使用左右箭頭進行導航。要啓動頁面，請按Enter鍵。 – JohanVdR

鍵盤訪問下拉懸停菜單

回答

相關問題