Intro component with sign-up form with HTML, CSS, Flexbox, Grid, JS

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 2 years ago

  A few important html tips

  • you shouldn't have empty divs for any reason. If you need to put a background image on the whole page put it on the body
  • every input must have a label
  • the error icons are decorative so alt must be empty if placed in html. Or you could make them background images on invalid inputs if preferred
  • the error messages should be wrapped in an element that has an aria live attribute on it and a unique ID for each one
  • the inputs need aria describedby pointing to the id of its error container

  All of these things are important habits to get into as soon as possible so you write accessible forms.

  24

  Marked as helpful
• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 2 years ago

  Hi, Purbo! 👋

  I totally agree with @grace-snow regarding the form validation. By following Grace's suggestions, it will make the errors get announced to the screen reader users.

  I wrote an article about creating accessible form validation. It will tell you how to create it step-by-step to create accessible form validation by using aria-live and aria-describedby.

  About the input's label, it needs to have text content. Wrapping the input with label doesn't make the input has an accessible name. I recommend having a span with visually hidden styling or using aria-label on the input element instead.

  For your information, @ is an at sign. You may need to rename the variable on JavaScript.

  By default, the body element has 16px. I would think if the style-guide is telling that the body font size is 16px that means it follows the users' browser's default font size. So, there's no need to specify font-size: 16px.

  Also, code your font size in rem, not pixels. This means the text size will be responsive if people want to adjust the size.

  I hope this helps! Happy coding!

  12

  Marked as helpful