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 added tabindex="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 specifies role="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?
Additional problem with screen readers: You can’t jump between headings because of the missing <h*> tags.
When using semantic HTML like <nav>s, the role="navigation" isn’t needed. When you see examples with both, I recommend reporting issues on GitHub.
No need for the second <source> in the two <picture>s. The browser will automatically use the fallback URL of <img>.
Nice solution with the “Show transcript” button.
The forms are fine.
Show/Hide comments button: Your JS is fine, but an easier solution is to just change <div> to <button> and you get keyboard accessibility for free.
The table is fine.
tabindex="0" on <ul>
Without the tabindex="0" the keyboard navigation works for me on FF and Chrome. You can also remove the roles. The screen readers know what’s up with the <ul> inside a <nav>.
Hamburger menu
I don’t have an answer from the top of my mind. Maybe look at the code of such an example and see how it’s done there?
If you find a solution, please post it here.
Glitch
You import “main.js”, but the file’s called “script.js”