I have created a JavaScript-free, HTML- and CSS-only drop-down menu using the checkbox hack. I am trying to avoid using JS as some users disable it. For touch-screens and mouse it works fine, but I am attempting to make it work so that anyone using keyboard navigation can use it.
It does work more or less:
The [Enter] key opens links and [spacebar] opens some (see further) sub-menus using checkboxes which are invisible to the naked eye by using the class opacity: 0;.
However, I have two contradictory problems with keyboard navigation:
-
The
<a>tags and pseudo::afterelements associated with some checkboxes focus visibly with a faint dotted highlight but do not open when the spacebar is pressed. -
When using a
<span>tag instead of an<a>tag, the menus open when the spacebar is pressed but they are not visibly 'focused' with the dotted outline.
Also, the 'invisible' checkbox is positioned behind the ::after pseudo element of '+' but, because it's invisible, there is no focus outline.
Here is my simplified code with examples of the different combinations I have tried:
ul.menubar { padding: 1rem 0 0 0.5rem; } [id^=chk] { opacity: 0; } [id^=chk]+ul { display: none; } [id^=chk]:checked+ul { display: block; } label.link::after, label span.separator::after, label a.separator::after { position: relative; content: "+"; right: -1.25rem; top: 0; } a { text-decoration: none; } li { line-height: 2.5rem; font-size: 1.25rem; list-style: none; } li a, li span, li label, li input, .inline { display: inline; position: relative; }<body> <nav> <ul class="menubar" role="menubar"> <li> <div class="inline"><a href="#" role="menuitem" tabindex="1">Item link plus dropdown using span. + works but no keyboard focus | </a> <label for="chk-101" class="link" title="Item 1 link" aria-label="Item 1 link"></label></div><input id="chk-101" type="checkbox" class="chkbox" tabindex="1" aria-checked="false"> <ul> <li><a href="#">Dropdown 1a</a></li> <li><a href="#">Dropdown 1b</a></li> </ul> </li> <li><a href="#" role="menuitem" tabindex="1">Item link plus dropdown using 'a' tag with href; + works but not keyboard focused | </a> <label class="link" for="chk-102"><a href="#" class="link" tabindex="-1" title="Item 2 link" aria-label="Item 2 link"></a></label><input id="chk-102" type="checkbox" class="chkbox" tabindex="1" aria-checked="false"> <ul> <li role="menuitem" tabindex="1"><a href="#">Dropdown 2a</a></li> <li role="menuitem" tabindex="1"><a href="#">Dropdown 2b</a></li> </ul> </li> <li> <label for="chk-103"><span class="separator">Separator with span - does not focus</span></label><input id="chk-103" type="checkbox" class="chkbox" tabindex="1" aria-checked="false"> <ul> <li role="menuitem" tabindex="1"><a href="#">Dropdown 3a</a></li> <li role="menuitem" tabindex="1"><a href="#">Dropdown 3b</a></li> </ul> </li> <li> <label for="chk-104"><a href="#" class="separator" tabindex="1">Separator with href - focus does not respond to spacebar</a></label><input id="chk-104" type="checkbox" class="chkbox" tabindex="-1" aria-checked="false"> <ul> <li role="menuitem" tabindex="1"><a href="#">Dropdown 3a</a></li> <li role="menuitem" tabindex="1"><a href="#">Dropdown 3b</a></li> </ul> </li> <li> <label for="chk-105"><span class="separator" role="checkbox" tabindex="1" aria-checked="false" aria-label="Separator 2">Separator with span role="checkbox"; focus but does not respond to spacebar</span></label> <input id="chk-105" type="checkbox" class="chkbox" tabindex="-1" aria-checked="false"> <ul> <li role="menuitem" tabindex="1"><a href="#">Dropdown 3a</a></li> <li role="menuitem" tabindex="1"><a href="#">Dropdown 3b</a></li> </ul> </li> </ul> </nav> </body>
没有评论:
发表评论