Skip to content
Submitted almost 2 years ago

Ping single column coming soon page (HTML + CSS + Vanilla Javascript)

Kévin Burle•370
@kevinburle
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,

Any best practices to display this kind of error on a form with Javascript ? What do you think about this simple solution?

thanks!

Community feedback

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

    Hi, Kévin!

    I recommend learning to create accessible form validation. Accessible form validation means that the error messages get pronounced by screen readers, each input has a label, and using the correct type of input. I wrote an article to help you understand to do all of that.

    How To Create Accessible Form with Boring Design?

    Some suggestions:

    • When I submitted an empty input, there is no need to change the placeholder value of the <input>.
    • Separate the function from addEventListener. This way, you can give a descriptive name for the function.
    • Add alternative text to the logo. Logo is an important content of the page. It is not decorative, and not the one with blank alternative text (alt=""). 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
    • Use aria-label to label each social media link. This way, screen readers know how to pronounce them to the users.
    • Don't change the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Let 1rem be whatever the user's browser's setting.
    • For the screen reader class, use the following styling. Learn more — Improved .sr-only
    .sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important; 
}

    I hope you find this useful.

    Marked as helpful
    1
    Kévin Burle•370
    @kevinburlePosted almost 2 years ago

    @vanzasetia thank you very much for your help!

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

    @kevinburle No problem!

    0

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