Card details form with animation

Code Feedback
1

A simple form for card details with animations using vanilla css

desktop-design
desktop-design1440Ă—900 36.8 KB

Feedbacks will be appreciated :slight_smile:

codepen

2

Hey, this looks real nice. Just a few things:

  • The labels for the inputs are not set up properly. The labels need to have for attributes, which means the inputs need to have ids.
  • There needs to be two separate labels for the month/year inputs. Since these two inputs are related you could use a fieldset to wrap them and then use a legend for “Exp. Date (MM/YY)”. And then give each input it’s own label (one for “Month” and one for “Year”). If you don’t want the label text for these to show on the page then you can use CSS to visually hide them.
  • The placeholder text is so light that it’s basically not there. You can make it darker using the CSS ::placeholder pseudo-element.

The next two issues are not things I expect you to know or even implement. Just wanted to make you aware of some accessibility issues that would need to be addressed in a real world application.

  • The updating of the cards is a nice effect. I think you would probably want to hide them both from screen reader users though since it is redundant information and the way you have implemented them makes them very “noisy”. To do this you can add the aria-hidden="true" attribute to the div with a class of left. This will tell screen readers to ignore this div and anything in it completely. I don’t expect you to know this, or even do this. Just making you aware of the accessibility issues.
  • The confirmation message needs to announced automatically to screen reader users so that they know it was successful. You would probably do this by using an aria live region. The you would just duplicate the confirmation in that live region and screen readers would automatically announce it.
1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.