Skip to content
Submitted over 1 year ago

Intro component with sign-up form with Basic HTML/SCC/JS

Eneyee•60
@Eneyee
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Please provide general review of a project, any feedback welcome!

Community feedback

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

    Hi, Eneyee! 👋

    The <footer> should not live inside the <form> element. It should be a child element of the <body> element.

    Also, the terms and conditions statement should not be merged with your attribution. They are different content.

    You should not set display: none to the <label>. It would be the same as the <input> without a label. You need to know that display: none makes the element disappear visually and programmatically.

    You should use visually hidden styling to only visually hidden the <label> but still accessible with assistive technologies such as screen readers.

    The anatomy of visually-hidden - TPGi

    A couple of suggestions:

    • Make the error icons as background images of the inputs.
    • The <p> for the error message should be programmatically connected with the <input>. You can connect it with aria-describedby attribute.
    • The error message should be empty at first. Populate it with the message using JavaScript.
    • The <p> element for the error message should be a live region. This way, screen readers can pronounce the error message as soon as it gets populated with the message.
    • Use CSS to uppercase the text. Screen readers might spell the uppercased word in the HTML (spelled letter by letter).

    I recommend reading my article to learn more about creating an accessible form.

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

    I hope my feedback helps. Have fun programming! 😄

    Marked as helpful
    1
    Eneyee•60
    @EneyeePosted over 1 year ago

    @vanzasetia Thank you so much for your feedback, and for the articles you've provided. Still figuring out accessibility and the importance of it

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

    @Eneyee

    You are welcome!

    I recommend taking a look at the following site as a starting point to learn more about web accessibility.

    Solid Start

    And for sure web accessibility is important because the web is for everyone. Also, it can help you to write good HTML too.

    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