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

看板Web_Design作者 (kinjen)時間8年前 (2016/05/20 14:50), 8年前編輯推噓4(404)
留言8則, 5人參與, 最新討論串1/1
正在做一個政府案,要求要符合無障礙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

05/20 15:46, , 1F
選到選單2時按enter可以把它打開嗎??
05/20 15:46, 1F

05/20 15:48, , 2F
另外可以參考一些aria的例子 例如bootstrap是怎麼做的
05/20 15:48, 2F

05/20 15:58, , 3F
查到有人寫過這樣的解法:
05/20 15:58, 3F

05/20 15:58, , 4F

05/20 23:04, , 5F
這個例子中,用 tab focus 到的是 <a> 所以才沒有效果
05/20 23:04, 5F

05/21 07:12, , 6F
css 作不到就用 jQuery 啊 0.0
05/21 07:12, 6F

05/23 01:50, , 7F
用 .menu > a:focus + .sub 就可以了吧 XD
05/23 01:50, 7F

05/23 01:51, , 8F
啊寫錯,改成 a 了所以 .menu 後面不該是 > ... XD
05/23 01:51, 8F
※ 編輯: gili1103 (111.185.114.172), 05/23/2016 23:43:43
文章代碼(AID): #1NFhEn3n (Web_Design)