Semantic HTML5 markup, CSS custom properties & Vanilla JavaScript

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi! 👋

  Congratulations on finishing this challenge! 👏

  I tried to submit a valid email ([email protected]) but it says it's not a valid email. So, I recommend fixing the Regular Expression.

  More suggestions from me.

  • I recommend adding max-width to the container elements. All the elements keep growing as the browser window grows. It start looking not good when the browser window is above 1440px. So, make sure the max-width is set with a fixed value (using either px or rem units).
  • Another way to make the form listens to the submit is to use addEventListener. I prefer using addEventListener because it allows me to create a separate function for the validation. It allows to name the function which makes it easier for other developers and for myself in the future to know what the function is doing (without reading the entire code).

  const validateUserInputs = (event) => {
   // some code...
  }
  
  form.addEventListener("submit", validateUserInputs)
  

  • All link elements require text content as a label. Without text content, the users of assistive technology would not know there are links. So, I recommend adding aria-label for each anchor tag. An example would be aria-label="Facebook" for the Facebook link.
  • Avoid using JavaScript to add styling (unless you've 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 intead.
  • The logo is an important image for the site. It is a piece of information that can be used by screenreader users to know what the site or the project is called.
  • To make the alert message gets pronounced by the screenreader, do the following.
    • Add aria-describedby to the input element
    • Add an id to the alert element
    • Add aria-live to the alert element
    • The value for the aria-describedby=<id> should point to the alert element.
    • Make sure the alert message is hidden by adding hidden attribute
    • After that on JavaScript, remove the hidden and add the alert message to the alert element

  That's it! Hope this helps.

  Marked as helpful

  0