Skip to content
Submitted over 1 year ago

Ping coming soon page with grid

luking•230
@alululululuer
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

It's really took me some time to deal with the input state. I knew some new pseudo-class that I never heard before such as :valid :invalid :has :focus-visible are very helpful.

To be honest, I'm not familiar with form related elements at all, I think I need more practice.😅

Any feedback is welcome.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, @alululululuer! 👋

    Remove <h1 class="visually-hidden">Ping.</h1>. It is not needed. Instead, make "We are launching soon!" as the <h1>.

    The alternative text of the logo should not be "logo".

    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

    The error message should be programmatically connected with the associated <input>. Then, it should be a live region by adding aria-live attribute. This way, the screen readers will read the message as soon as it gets populated with the text through JavaScript.

    With that said, at first the <p class="error-msg"> should be empty at first.

    Learn more — How To Create Accessible Form with Boring Design? - CodeNewbie Community 🌱

    <button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons

    illustration-dashboard.png is a decorative image. For your information, decorative images are images that don't add any information and serve only aesthetic purposes.

    Links must have accessible names. You can use aria-label to provide an accessible name for each link.

    Remove font-size: 1rem from the <body> styling. It is already the default styling.

    Don't use id selectors for styling. There are two reasons for not using ID’s to style content:

    • They mess up specificity because they are too high (the most important reason).
    • They are unique identifiers. So, they are not reusable on the same page.

    Learn more — What the ID attribute is REALLY for

    I hope you find this useful. Happy coding! 😄

    Marked as helpful
    1
    luking•230
    @alululululuerPosted over 1 year ago

    @vanzasetia Thank you very much! I really want to learn more about web accessibility, it's really helpful!

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    @alululululuer

    Happy to hear that was helpful! 😊

    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