Ping Coming Soon Page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hello, Mert Evirgen! 👋

  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

  Any words that are related to "image" (for example, picture, photo, logo, icon, graphic, and avatar) should not be included in alternative text. The semantic meaning of the <img> element tells assistive technologies to pronounce it as an image.

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

  The "Notify Me" button should be a submit <button> not a link.

  Some suggestions on creating accessible form validation:

  • <input> must have an accessible name. In this case, you can use aria-label attribute.
  • The error message should be programmatically connected with the input. You can use aria-describebdy to connect the error message with the associated input.
  • Initially, the error message should be empty.
  • The error message also should be a live region. This way, screen readers will pronounce it as soon as the <p> element gets populated by text through JavaScript.
  • Learn more — How To Create Accessible Form with Simple Design? — Vanza Setia

  To change the SVG colors, you should use fill attribute (or fill property within CSS) instead of inline style attribute.

  I hope this helps. Happy coding! 😄

  Marked as helpful

  1

  ---

  

  Mert Evirgen•140

  @waldvoidPosted over 1 year ago

  @vanzasetia Hi Vanza, thanks for your feedback I applied your recommendations to project! Thanks for sharing your knowledge with me.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @waldvoid

  I took a look at the source code and I saw that you applied some of my recommendations. But, the live site is not updated. The input still does not have an aria-label.

  Also, I recommend taking a look at the MDN documentation to learn to use aria-describebdy.

  Marked as helpful

  1