Responsive Ping Coming Soon Site (Vanilla Js + Vanilla CSS)

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Mohit Mummon! 👋

  I notice that your solution is tagged with #parcel and also there's a parcel as the devDependencies. Is this project using the Parcel package? I expect there's should be an optimized version of the site (minified CSS and JavaScript, etc).

  Some suggestions for improvements.

  • The alternative text for the logo should be the company name. So, the alternative should be "Ping". This way, the screen reader users will know the name of the site is "Ping".
  • The label should be used to label the input, not to describe the error message. The label of the input can be "Email".
  • For the error message, it can be a p element with aria-live attribute. After that, use aria-describedby to link the input with the p (by adding id to the p). Make sure the error message is injected through JavaScript (so the p is empty in the HTML).
  • For images that are used only as decorations (they do not give users any information and serve only an aesthetic purpose), the alt tag should still exist but should be left empty: alt="". This will tell the screen reader to simply skip over the image.
  • The social media icons should be wrapped by anchor tags. They are the social media links of the company.

  I hope this helps!

  Marked as helpful

  1

  ---

  

  Mohit Mummon•530

  @Mohit-k-MummonPosted about 2 years ago

  @vanzasetia Very helpful information. As for the parcel optimizations, I used netlify to deploy with the parcel build command. So the minified files will be visible in devtools under the sources tab. Thanks!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Mohit-k-Mummon You're welcome! 👍

  Yes, the minified assets are on the Sources tab.

  0