HTML, CSS, and JS, Mobile first solution

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  I should add that overall this looks really good and the html is well structured.

  Only 2 very minor suggestions

  • rather than alt text saying 'logo' I would say the name of the product. Logo alone is a description of what sighted users see
  • as you've got aria label on the input, you don't need a separate label element. * If that label element is what you want to contain error messages it should be in a p tag with an ID and an aria-live attribute set to "polite". Then you link the input to the error message container by placing an aria-describedby attribute with a value of that ID onto the input.

  I hope that makes sense and is helpful. Please upvote comments if it is ☺

  1

  ---

  

  Jane•1,040

  @janegcaPosted almost 4 years ago

  Thank you @grace-snow, your points were clear, I made the changes you suggested. Trying to read more about accessibility, hopefully will get it right in the future.

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi Jane, I've only looked on mobile and as I can't see the design so only reviewing from memory - please forgive if I've got things wrong here!

  From memory, I thought the background on mobile was meant to be a dark opaque background where you can see the image faintly behind. That's not what I'm seeing here which makes the text quite tricky to read. Maybe revisit that (or just correct me if my memory is wrong!) 😂

  1

  ---

  

  Jane•1,040

  @janegcaPosted almost 4 years ago

  Hi @grace-snow, no, lol, your memory is right. I actually thought there was no background image in the mobile design (I could not see it in the Figma file) but figured, since the image was available, I would include it. I did add an overlay to dull it to the point I could read the text ok but will pump up the opacity a bit more just to be safe.

  0