Assessment wanted for "Accessibility troubleshooting"

MDN Learn
#1

Hi :wave: Could you kindly check my work on Assessment: Accessibility troubleshooting? :blush:

I have some questions:

  1. 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).

  2. 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?

  3. 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.

  4. 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!

#2

Hi @Risa

Amazing work on this large exercise. :medal_sports:

Here are my comments:

  • 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”

See you,
Michael

1 Like
#3

Hi @mikoMK,

Thank you so much for your detailed feedback! :blush:
I feel like I pushed myself doing this exercise so I’m happy to hear some positive comments :slightly_smiling_face:

I see, I was so confused so thank you for clarifying!

I think I made the exact same mistake when I did the exercise of responsive image :sweat_smile: I’ll try not to forget next time!

Oh really, it’s interesting how things work differently on different environment :thinking:

Thank you! What a basic mistake to make at this stage… :sob: :joy:

I will try look for examples and hopefully solutions! When I do, I will come back here :slightly_smiling_face:

Thank you! :blush:
Risa

1 Like