Pod Request Access (Tailwind CSS)

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, @filecc! 👋

  Does this project use the Font Awesome library?

  Use <button> with type="submit" instead of <input type="submit">. Submit input is a legacy element.

  "Upload your audio to Pod with a single click..." should not be a <h2>. It should be a paragraph element. Why did you think it is a sub-title?

  Having <h2 class="hidden">Section title</h2> is not useful since the .hidden styling is set to display: none. It removes the element both visually and from accessibility tree.

  Full accessibility tree in Chrome DevTools

  Also, "Section title" is not providing information about what will be the content of the content.

  If you want you can have a visually hidden heading. It is only visually hidden but still accessible with assistive technologies such as screen reader.

  See visually hidden styling — How-to: Hide content - The A11Y Project

  Then, the text content might be telling that the product is used by the following companies. But, you don't need to add visually hidden heading. It is not a must.

  For the form validation, you need to programmatically connect the error message with the associated input element. Also, make it as a live region to make screen readers announce the message as soon as it gets populated with the message.

  Learn more — A Guide To Accessible Form Validation

  I hope this helps. Have fun coding! 😄

  Marked as helpful

  1

  ---

  

  filecc•470

  @fileccPosted over 1 year ago

  @vanzasetia Hi and thanks you so much.

  I addressed the iusses you present me.

  • I changed the <input> tag in a buttonone;
  • I changed the <h2> with a <p> tag;
  • I remove the <h2>Section Title</h2> that was here just for the HTML Validator, so I removed the section too.

  Thanks for all the amazing advices and for the useful resources!

  😀😀

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @filecc

  Great! 👏

  0