[問題] 無障礙A+的tab鍵操控問題

[gili1103 (kinjen)]

正在做一個政府案,要求要符合無障礙A+規範

其中有個功能是, 按tab鍵能夠依序選到每個連結和按鈕

目前遇到個問題, 如果只是依序點, 使用tabindex的屬性去排就好

但有些選單的寫法是這樣

.sub{display:none;}
.menu > li:hover .sub{display:block;}

<ul class="menu">
   <li><a href="#">選單1</a></li>
   <li><a href="#">選單2</a>
      <ul class="sub">
         <li><a href="#">選單2-1</a></li>
         <li><a href="#">選單2-2</a></li>
      </ul>
   </li>
   <li><a href="#">選單3</a></li>
 </ul>

如果用tabindex去排的時候, 當tab選到選單2-1的時候, 他依舊是隱藏狀態

我應該怎麼寫這一塊, 讓選到"選單2"時, 子選單會顯示,

並且能夠選接著子選單的項目呢?

=========================

感謝大家的回覆~

使用了miau提供的範例寫法

http://jsfiddle.net/dvLden/Ltz7nmdb/1/

非常感謝~

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 218.164.5.46
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1463727025.A.0F1.html
推 yyc1217: 選到選單2時按enter可以把它打開嗎??
→ yyc1217: 另外可以參考一些aria的例子 例如bootstrap是怎麼做的
推 miau: 查到有人寫過這樣的解法：
→ miau: http://jsfiddle.net/dvLden/Ltz7nmdb/1/
推 lin009: 這個例子中，用 tab focus 到的是 <a> 所以才沒有效果
→ xdraculax: css 作不到就用 jQuery 啊 0.0
推 hit1205: 用 .menu > a:focus + .sub 就可以了吧 XD
→ hit1205: 啊寫錯，改成 a 了所以 .menu 後面不該是 > ... XD
※ 編輯: gili1103 (111.185.114.172), 05/23/2016 23:43:43