Ping Coming Soon Page

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! 😄