Pod request access landing page HTML, CSS Flexbox, JavaScript

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted about 3 years ago

  I recommend looking at your html again

  • instead of multiple img elements why not use img srcset or even the picture element (slightly less performant)
  • the logo is the most important content on this whole page yet you’ve left it inaccessible to search engines and assistive tech. Alt is important.
  • there’s no label on the input
  • the error message is not linked to the input. It should be linked with aria-describedby
  • the error message is missing an aria-live attribute that would make it announce to screenreaders etc
  • all content needs to be in landmarks. I’d expect a header, main and footer on this
  • those logos are important content. I would proceed with some sr-only paragraph/heading and have alt descriptions on all of those

  Good luck

  1

  ---

  

  T

  Grace•31,230

  @grace-snowPosted about 3 years ago

  I’m not seeing a styled message on mobile btw, just the standard html one. Not sure if that’s intentional

  0
• 

  Carl Jones•200

  @jones9411Posted about 3 years ago

  Hi, it appears that when you load into the page that the error message is already there, you should add the eventlistener to the on-click of request access button. This way it's only when the form button is clicked will the error show itself. e.g button is clicked => check if there is a valid email => if not show error message => if there is show pop up message. This is the work flow I will implement for this challeng. Hope this helps

  1