@pikapikamart
Posted
Hey, awesome work on this one. Layout in desktop looks great, it is somehow responsive and the mobile state looks fine, just need the input to be centered like what Tee have said.
Some other suggestions would be:
- You shouldn't use:
<h1> SPLI</h1>
<h1> TTER</h1>
This makes it unreadable from assistive tech. What you could have done is that, use only 1 h1
to wrap the text like this:
<h1> splitter </h1>
Then use text-transform: uppercase
on the h1
, do not explicitly type the word capitalized, because instead of being read by the word splitter
, it will be read out letter by letter. Then to make it wrap, use word-break: break-all
on the h1
then add max-width
on it, adjust the max-width
until the word breaks.
- The
select
tip shouldn't useh5
, use heading tag incrementally, if you haveh5
, make sure thath1, h2, h3, h4
are all present before it. - I wouldn't really used
button
for the tips, since it doesn't make it really accessible, I would useinput type="radio"
for those, for which the textselect tip
will be mylegend
inside afieldset
, this way, it will add more information about the user on what is going on, sincebutton
itself can't make those. This might be confusing, I don't have any example to show on this one :> - The custom
input
needs to havelabel
for it, thelabel
would havesr-only
since it will be screen-reader text to hide from sighted users. - Your error should as well needs to address, not only zero, but negative value.
- The error-message as well needs to have
id
attribute, to which will be referenced by theinput
below it. This will be used by thearia-describedBy
attribute, that will be used on theinput
. This way, when user inputs a wrong value, the text appears, then theinput
is linked with the error, making users know what is the error is all about, usearia-invalid
on theinput
as well. I have snippet for this one, but it is a snippet for form, but the above technique is used on it, take a look and see how it should be used - The
tip amount / person
could only used single heading tag. - The number on the right side or the result, shouldn't be a heading tag especially not a
h1
. Always use singleh1
on a webpage, avoid using multipleh1
.
Aside from those, great work again on this one.
Marked as helpful
@Rhiino1
Posted
@pikamart Your comment it's awesome, I never received that kind of feedback, thank you so much. I'm going to look every thing you said and I will do my best fixing it, working on projects like this made me fell in love with front-end, my short developer life was spend working on back-end but Frontendmentor and people like you just doing amazing this is perfect for me to fit in.
Thank you so much again and keep being so nice. π