Responsive using BEM

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. I rarely see this challenge so I am on luck to seeing this one. Layout in desktop is good as well as for the mobile state. In terms of responsiveness, it is fine as well.

  Some suggestions would be:

  • The a tag that wraps the header logo should have an aria-label like aria-label="homepage". This way, a screen reader user would know where this link would navigate them hence it will bring them to the "homepage" of your website.
  • The img as well on the header should have the alt be like alt="creative". The logo itself have the text "creative" and it would be great to have the alt to be that as well. Also when adding alt text to an image, do not add the word "logo, picture, icon, graphic" anything else that relates to "image" word. Assistive tech will handle those for you.
  • alt text for the hero section image could be better and not just "background". If you think an image adds a content, make bit more descriptive alt text.
  • alt text for other section images as well could be better and descriptive.
  • The slider arrow toggler should have used a button element and not just img. Using img on this one is not really accessible and keyboard or screen reader users won't be able to toggle it. button would be good along with it's aria-label like "change slider". Since the slider doesn't really contains any text that can be read, there is no need for it to be focused on this, I say this if you were to have those focused on javascript like .focus().
  • On mobile layout, the hamburger menu should have used a button element with aria-expanded attribute and img. Also, since you are adding like a no-scroll, it would be good to trap the focus to the dropdown only along with the hamburger toggler.

  But still, you did a good job on this one. Really liked this one.

  Marked as helpful

  0
• 

  ZaraAg•145

  @zaraag92Posted over 3 years ago

  Raymart Pamplona thanks so much for your feedback. I really do appreciate it and will pay more attention on screen readers and make changes on my project. Thanks again and have a good day !!!!

  1