@pikapikamart
Posted
Hey, awesome work on this one. Layout both desktop and mobile is good and it is responsive as well.
Suggestions would be:
- On the
body
tag, yourbackground
declaration is wrong. You should useurl("images/bg-intro-desktop.png")
yourimages
hasImages
that is why the background is not loading. - The blue component above the
form
is just a simple text and does not need to be an interactive element like abutton
div
would be fine. - The images being used as the error-message-icon should have
alt=""
since it does not really add any content. input
elements inside theform
lacks alabel
on it.label
element are necessary when usinginput
because this adds more info about what theinput
does. Thelabel
on this could besr-only
or instead, you could usearia-label
on eachinput
indicating what it does. For example on the first name:
<input type="text" name="firstName" id="firstName" required aria-label="Enter Firstname!" placeholder="First Name"
You need to add all the necessary attributes on the input
like the id
name
, those are needed especially when using the form
in javascript, it makes easier to target every input
.
- Addition to the
input
, when the user uses wrong input, add as well aaria-invalid="true"
to theinput
element:
if ( input is invalid ){
input.setAttribute("aria-invalid", "true");
} else {
input.removeAttribute("aria-invalid");
}
- One great more addition to the
input
. Those error messages, add their ownid
attribute. Thisid
will be used by theinput
elementaria-describedBy
attribute. This way, the user will know what error has the user had done, because the error message will be linked in theinput
. A pseudocode will be:
if ( input is invalid ) {
input.setAttribute("aria-describedBy", idOfTheErrorMessage);
} else {
input.removeAttribute("aria-describedBy");
}
This makes the whole component accessible.
Other than those, great work.
Marked as helpful