Base-apparel-coming-soon-page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hello, @leorichy99!

  Here are some suggestions for improvements.

  • Alternative text for the logo should not be "logo". It should be the company name, "Base Apparel".
  • The alternative text of the logo can be used as information for a screen reader user or a search engine to know what the site/project is called.
  • Remove all the <br> elements inside <h1> . Screen readers may announce them as "break" which creates unnecessary noises. Instead, wrap the text content with <span> and make it a block element (display: block).
  • Wrap the <input> and the submit button with <form>.
  • Remove <a> inside the submit button. It is invalid HTML to have <a> as the child element of <button>.
  • The alternative text of the ./images/icon-arrow.svg should be the accessible name or text content of the submit button. Currently, screen readers are pronouncing it as something like "arrow, button" which does not give useful information. For example, the alternative text can be "Join waiting list". So, screen readers will pronounce it as "Join waiting list, button".
  • Learn more — What is an accessible name? - TPGi
  • <input> must have an accessible name or label. You can use aria-label to label the <input>.
  • Make the error icon as the background image of the <input> instead.

  I recommend learning to create accessible form validation. Accessible form validation means that the error messages get pronounced by screen readers, each input has a label, and using the correct type of input. I wrote an article to help you understand to do all of that.

  How To Create Accessible Form with Boring Design?

  I hope this helps. Have fun programming!

  Marked as helpful

  1

  ---

  

  adr99•410

  @leorichy99Posted almost 2 years ago

  @vanzasetia This is really helpful, will come back with a new solution with your review in effect. Thanks 😍

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @leorichy99 No problem! I am glad I could help. 😄

  0

  

  adr99•410

  @leorichy99Posted almost 2 years ago

  @vanzasetia I have edited my solution with your suggestions in effect

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @leorichy99

  The label of the <input> should not contain the word "input". Screen readers will pronounce it as input. So, aria-label="Email" is good enough.

  Use <button> with type="submit" for the submit button. Didn't I say to remove the <a> from the submit button?

  0