In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.
🔥🔥🔥 Bar looks great! I did not see the issue that you are talking about though. I was using Mac with Chrome -- what are you using? Feel free to email me some screenshots if it helps.
Hey, just want to throw it out there that some accessibility experts won't necessarily like it that the tab order is not the same as the DOM order when you rearrange the placement of the nav items using flex order.
Hi Bruce -- thanks for the pointers! I am not an accessibility expert. Yes, it would be true that the tab order would be the DOM order, I think? The Flexbox "order" property rearranges how these elements appear on screen, but the HTML is untouched. At least that's my understanding... is that not true? When I tab through the links in the CodePen, it seems like they tab in the DOM order? I always welcome comments from accessibility experts, so please expand on what you're saying if we could improve accessibility?
(FYI: on Day 12, we'll take this same navbar and change its layout a few times for responsive design, including adding a hamburger button on day 13!)
Sorry, I don't think I explained myself clearly. Yes, definitely, the keyboard tab order still follows the DOM order (the first tabbed item in the nav list is the logo link because that is the first item in the list). What I meant to say is that the "visual" tab order won't be the same as the DOM order. So in this case, even though the logo link is the first item in the list, it is visually the third item and thus the visual tab order goes from the third item back to the first item.
To be honest, I'm not sure if having just this one link visually out of order would be enough to be considered a WCAG violation. But I would definitely recommend that a custom outline be added to the :focus property on these links so that it is clear which one is focused because the default outline indicator in my Firefox is pathetic and I have to look really hard in order to see which link is focused. With such a weak focus outline you can definitely see how mixing up the visual tab order can cause frustration for keyboard users.
https://codepen.io/romola/pen/yLXZeWm?editors=1100
I used some hover.css styles but didn't have a convenient way to link to the stylesheet, so just copied some code.
Yeah, it can be tricky linking to external resources in CodePen. Your bar looks great, and your links are quite bouncy! Nice job as always.🔥🔥🔥
https://codepen.io/miklaan/pen/ZEyVxOv
I've noticed one thing which I can't figure out.
If you inspect the logo you can see that <a> have some 3.5px more then img which is inside.
Also if I add background-color on .logo:hover, we can see that 3.5px has color, but cannot find why?
Can you suggest me how can I remove that mistake (probably) of mine?
🔥🔥🔥 Bar looks great! I did not see the issue that you are talking about though. I was using Mac with Chrome -- what are you using? Feel free to email me some screenshots if it helps.
https://codepen.io/kldickenson/pen/ExXGVor
🔥🔥🔥 Looks fantastic - great work!
https://codepen.io/w0whitaker/pen/GREYopG
🔥🔥🔥 Nicely done and super fun! Love the rotating logo. Code looks great - thanks for sharing!
Hey, just want to throw it out there that some accessibility experts won't necessarily like it that the tab order is not the same as the DOM order when you rearrange the placement of the nav items using flex order.
https://www.w3.org/WAI/WCAG21/Techniques/general/G59
https://www.w3.org/WAI/WCAG21/Techniques/css/C27
Hi Bruce -- thanks for the pointers! I am not an accessibility expert. Yes, it would be true that the tab order would be the DOM order, I think? The Flexbox "order" property rearranges how these elements appear on screen, but the HTML is untouched. At least that's my understanding... is that not true? When I tab through the links in the CodePen, it seems like they tab in the DOM order? I always welcome comments from accessibility experts, so please expand on what you're saying if we could improve accessibility?
(FYI: on Day 12, we'll take this same navbar and change its layout a few times for responsive design, including adding a hamburger button on day 13!)
Sorry, I don't think I explained myself clearly. Yes, definitely, the keyboard tab order still follows the DOM order (the first tabbed item in the nav list is the logo link because that is the first item in the list). What I meant to say is that the "visual" tab order won't be the same as the DOM order. So in this case, even though the logo link is the first item in the list, it is visually the third item and thus the visual tab order goes from the third item back to the first item.
To be honest, I'm not sure if having just this one link visually out of order would be enough to be considered a WCAG violation. But I would definitely recommend that a custom outline be added to the :focus property on these links so that it is clear which one is focused because the default outline indicator in my Firefox is pathetic and I have to look really hard in order to see which link is focused. With such a weak focus outline you can definitely see how mixing up the visual tab order can cause frustration for keyboard users.
Thanks, the :focus addition is an excellent point! I'll add it to the CodePen. I appreciate your feedback!