Huddle landing page with a single introductory section

Community feedback

• 

  Josh Javier•930

  @joshjavier

  Posted about 2 years ago

  Hello NixyMc! 👋

  Good job on your solution. Your markup is organized and easy to read from a developer's POV. I see you used BEM for classes and CSS custom properties, which definitely helps with code maintainability. 💯

  In terms of keyboard accessibility, I think the social links at the footer can be improved. I'm able to see the correct active state when I hover over the icons, but not when I press the Tab key to cycle through them. This is because you added the hover animation to the icon inside the link, which is not an interactive element. When using the Tab key, the <a> element is being focused, but not the icon inside of it. You can fix this by adding the .social__link selector to your hover styles.

  For example (a bit wordy, but it works):

  .social__link:hover .social__link__icon,
  .social__link:hover .social__link__icon::after,
  .social__link:focus-visible .social__link__icon,
  .social__link:focus-visible .social__link__icon::after {
  color: var(--icon-hov);
  border-color: var(--icon-hov);
  }
  

  Even better, I recommend checking Sara Soueidan's article on Accessible Icon Buttons for a better implementation you can apply to your projects.

  Hope it helps, happy coding!

  11

  Marked as helpful