responsive single page using flex and percentages

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, @Hyogan! 👋

  Remove role="main" from the <main> element. It is not needed because the <main> element has already an implicit ARIA role="main".

  The alternative text of the logo should not be empty. Logo is an important content of the page. Without that information, a screen reader user or a search engine will not know what the site/project is called.

  For images containing text, make sure the alternative text includes the image's text. In this case, the Ping logo should have an alt value of “Ping”. Reference: Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text

  "Subscribe and get notified" should be wrapped by a paragraph element instead of <h2>.

  The error message should be wrapped by <p> element instead of <h1 class="validation-or-not" id="validation-or-not">.

  Use <button> with type="submit" instead of <input type="button" value="Notify Me" id="validating-button">. It is a submit button not just a button.

  The error message should also be programmatically connected with the associated <input>. Then, it should be a live region by adding aria-live attribute. This way, the screen readers will read the message as soon as it gets populated with the text through JavaScript.

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

  <button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons

  Links must have accessible names. You can use aria-label to give each link an accessible name.

  Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.

  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.

  I recommend validating the user's input using regular expression. Using for loop and having another nested for loop is too complicated. Also, you should use const or let instead of var.

  I hope you find this useful. Happy coding! 😄

  Marked as helpful

  0

  ---

  

  nelson•160

  @HyoganPosted over 1 year ago

  @vanzasetia thank you soooooo much for your time ! i will try to make that in practice !

  0