Manage landing page solution

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted over 2 years ago

  Hey there, excellent work with this one! Design looks good and is responsive. Some suggestions:

  • There is a little gotcha about design. When the screen gets wider, around 1600px illustration-intro starts overflowing out of it's place and covers other elements. That's because it's width is relative to the parent. You can fix it by adding a max-width to the image. Also you can give max-width to container elements such as .header__container aswell. Because as wider it gets, content starts to stretch out.
  • When you use an <input> you should either use <label> or aria-label attribute. aria-describedby won't help in this case. An example usage would be:

  <button aria-describdyby="hidden-text">
    <p id="hidden-text">Text only shows when clicked the button</p>
  </button>
  

  • If there are several <nav> in the page you can use aria-label as: aria-label:"primary navigation" Also you shouldn't leave aria-label:"" empty like this because it won't provide any info about the element to assistive techs. In your case you can use like: <a href="#" aria-label="instagram">
  • I see you use aria-hidden:true on images for design purpose which is right. But empty alt might effect SEO results. You can use like alt:"close icon"

  Other than these semantic markup looks alright to me and solution is great in general. Happy coding :)

  Marked as helpful

  0
• 

  Joanna•370

  @JoannaLapaPosted over 2 years ago

  @ErayBarslan thank you for Your feedback! I think that I corrected all issues according to your comments.

  I think that the problem with my intro image was connected with the fix grid-templates-row value because I don't see this issue now on the 1600px width screen and more (in the meantime I deleted this property).

  Concerning aria-describedby on my input, I put this for my error message:

  <div> <input class="footer__input" type="email" name="email" id="email" aria-describedBy="message" aria-label="email" placeholder="Updates in your inbox…"> <p class="footer__input-msgtext " id="message"></p> </div> the message appears only when the user set an invalid email and is connected with ariadescribedby with same id ('message'), is that correct usage?

  Thanks a lot again for your feedback :) Happy coding! Joanna

  1

  ---

  

  Eray•1,410

  @ErayBarslanPosted over 2 years ago

  @JoannaLapa Yep all looks good. I didn't notice the <p> tag below and thought you tried to use aria-describedBy to label the input. That's alright to keep it in this case pardon me :)

  0

  

  Joanna•370

  @JoannaLapaPosted over 2 years ago

  @ErayBarslan no problem, thank you for your answer :). Accessibility is the issue that I try to get to know now more and I feel that there is still a lot to learn ;)

  0

  

  Eray•1,410

  @ErayBarslanPosted over 2 years ago

  @JoannaLapa Once upon a time when I was a noobie, I thought I knew all there is to html, until my first submission throwing me bunch of accessibility issues :)

  There are still cases I'm not sure of, needs me checking. But once we get the general idea of how screen readers works, there are lots of articles to help on details. And to my observation you're pretty close to the stage. So I'd say once you're comfortable with general approaches, don't try to consume all about accessibility. You can always keep learning project by project.

  One thing programming thought me is; it ain't possible to learn everything but when we get the idea of how things works, that's enough make things work as supposed to. If you wish to be careful on the subject, in addition to what's provided here I can suggest these two sites to check the performance of your sites: accessibility & everything:)

  Marked as helpful

  0

  

  Joanna•370

  @JoannaLapaPosted about 2 years ago

  @ErayBarslan thank you Eray :).

  0