Responsive landing page using Nx Monorepo

Community feedback

• 

  P

  Jairo Valderrama•420

  @jairovgPosted about 1 year ago

  Hi Carlos, congrats on your solution; it really pleases me to see implementations using what was discussed in our mentorship sessions; here are some comments that might help you to improve your solution:

  Accessibility and semantics

  • You may enhance the form experience adding some attributes to the input element like: aria-required so not just the form has a native validation status but any assistive technology to be able to correctly mention it; and aria-describedby so assistive technology would be able to give a better context on the input when the user has an error on it, and finally an aria-invalid="true" when it has an error state.
  • The span.warning-msg may have an aria-live="assertive" attribute so the assistive technologies may read out loud any error message.
  • Regarding your ul.logos-list element; it may be wrapped in a nav to enhance its semantics and also, each link should have a descriptive text, it's not enough with the alternative text in the images.
  • There is also an accessibility issue related to the same element, as the anchors do not have any other state but their default one. Any user who tries to navigate on the page using the keyboard may get lost once it sets the focus on any of these elements.

  Styles

  • You may want to remove the focus state in the input element and instead handle a focus-within in the form, in order to remove the odd rounded outline present in the input in tablets and desktop devices.
  • Your request access button misses its focusstate.

  I hope you find it useful. I'm happy to look at your solution if you make other changes.

  Marked as helpful

  0