Ping coming soon page solution

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hello, Gabriela! 👋

  Add alternative text to the logo. Logo is an important content of the page. It is not decorative, not the one with blank alternative text (alt=""), and not the one with aria-hidden="true". Without that information, a screen reader user or a search engine will not know what the site/project is called.

  Wrap the email input and the submit button with the <form>.

  Wrap each social media icon with an anchor tag. It has interactivity and is a social media link.

  You should choose the approach of the way you write your CSS. If you choose the mobile-first approach then you only need to use the min-width media query to overwrite the mobile styling.

  /* Choose either one of the media query */
  
  @media only screen and (max-width: 864px)
  
  @media only screen and (min-width: 864px)
  

  Avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.

  For the error message, it should be a live region and exist on the HTML first. Then, it should be programmatically connected with the <input> using aria-describedby attribute. This way, screen readers can pronounce the error message as soon as it appears.

  I recommend removing the time limit. It is possible to happen that the users have not finished reading the message and then it disappears. This is not a good user experience.

  Learn more — How To Create Accessible Form with Boring Design? - CodeNewbie Community 🌱

  I hope this helps. Have fun coding! 😄

  Marked as helpful

  1

  ---

  

  Gabriela•180

  @PaulaR-05Posted over 1 year ago

  @vanzasetia thanks a lot for this fantastic class hahaha I'm glad you helped me, notes were taken :)

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @PaulaR-05

  No problem! 👍

  Marked as helpful

  1