Skip to content
Submitted almost 2 years ago

Ping single column coming soon page

Dave Quah•660
@Milleus
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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! 🙇‍♂️🙏

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    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
    0
    Dave Quah•660
    @MilleusPosted almost 2 years ago

    @vanzasetia Thank you for your feedback! I will make the suggested changes.

    Just to clarify, do you mean removing novalidate as it is already set on the form which prevents native form validation?

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @Milleus

    You are welcome!

    I don't understand what you mean. But, by default, the novalidate attribute should not be in the HTML. It should be added through JavaScript.

    0
    Dave Quah•660
    @MilleusPosted almost 2 years ago

    @vanzasetia OHH, I get what you mean 😂

    I should be adding novalidate to the form via JavaScript instead of HTML so that in the event where JavaScript fails (which means novalidate wouldn't be added), the form would still have native form validation.

    Apologies, my brain sometimes 🤪🤪🤪 Thanks again!

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @Milleus

    Yes, that's exactly what I meant. 😉

    No worries at all! 👍

    0
  • Snehamoy Bag•600
    @snehamoybagPosted almost 2 years ago

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

    0
    Dave Quah•660
    @MilleusPosted almost 2 years ago

    @snehamoybag Thank you for your kind words, I'm glad that this was helpful 😊🙏🙇🙇🙇

    1

Please log in to post a comment

Log in with GitHub

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