Skip to content
Submitted over 2 years ago

Ping single column coming soon page

cube-css, accessibility
P
Dave Quah•650
@Milleus
A solution to the Ping single column coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello everyone 👋,

Here's my solution for Ping single column coming soon page.

I've learnt that to make error messages accessible, we can use the Aria Live Regions. We can set aria-live="polite" so that screen readers will inform of the error when the user is idle, and aria-live="assertive" for more time-sensitive and critical notifications.

I'd appreciate it if you can provide feedback on my solution. Thanks and happy coding! 🙇‍♂️🙏

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Dave Quah! 👋

    It is correct to use aria-live attribute and you need to add aria-describedby attribute to the <input> element to programmatically connect the error message with the <input>.

    I recommend adding novalidate attribute to the <form> element through JavaScript. This way, if the JavaScript fails to load, the users still have the native form validation.

    The alternative text of the logo should be "Ping" instead of "company logo". Remember, for images containing text, make sure the alternative text includes the image's text.

    I notice that the website uses Google Analytics. Be aware that it is illegal in some countries.

    Learn more — Is Google Analytics illegal? Austrian, French, Italian and Danish DPAs say so

    I hope you find this useful. Happy coding! 😄

    Marked as helpful
  • Snehamoy Bag•600
    @snehamoybag

    You're an inspiration.. always learn something useful from you

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord