Hi Could you kindly check my work on Assessment: Accessibility troubleshooting?
I have some questions:
-
When accessed by keyboard, the focus on each link in
<ul>
(both nav menu and “secondary”) looks weird (looks like it focuses on<li>
first and then<a>
) on Chrome. This doesn’t happen on Firefox. Why is this happening?
I’m guessing it’s because I addedtabindex="0"
to<li>
s, but if I didn’t add it at all or if I added it to<a>
instead of<li>
, none of the links were accessible on Firefox (while they were accessible on Chrome). -
I made a hamburger menu for narrow screen, but I couldn’t make the nav menu (
<ul>
) disappear when either the focus moves on to elsewhere or any of the link is clicked… How can I achieve that? -
Should I add
role
attribute even when I’m already using semantic HTML? I saw some examples that specifiesrole="navigation"
even though<nav>
tag is already being used so I’m a little confused. -
Sorry if this isn’t appropriate to ask here, but when I put my code on Glitch, my JavaScript didn’t work somehow. It’s working properly on Codepen (the code is exactly the same). Why is it not working on Glitch and how can I fix it?
My work
Test page
Thank you in advance!