作者gili1103 (kinjen)
看板Web_Design
标题[问题] 无障碍A+的tab键操控问题
时间Fri May 20 14:50:22 2016
正在做一个政府案,要求要符合无障碍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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1463727025.A.0F1.html
1F：推 yyc1217: 选到选单2时按enter可以把它打开吗?? 05/20 15:46
2F：→ yyc1217: 另外可以参考一些aria的例子 例如bootstrap是怎麽做的 05/20 15:48
3F：推 miau: 查到有人写过这样的解法： 05/20 15:58
5F：推 lin009: 这个例子中，用 tab focus 到的是 <a> 所以才没有效果 05/20 23:04
6F：→ xdraculax: css 作不到就用 jQuery 啊 0.0 05/21 07:12
7F：推 hit1205: 用 .menu > a:focus + .sub 就可以了吧 XD 05/23 01:50
8F：→ hit1205: 啊写错，改成 a 了所以 .menu 後面不该是 > ... XD 05/23 01:51
※ 编辑: gili1103 (111.185.114.172), 05/23/2016 23:43:43