@pikapikamart
Posted
Hey, awesome work on this one. That animation is cool to be honest, haven't seen anything like that so great. The layout in desktop looks great as well and the mobile layout is great as well.
- For the tag, it is fine to use
header
on this one since it contains the website's logo. - For javascript, I don't really dive into js when reviewing a site, unless there is a specific question about how they used js or a part.
- I haven't use webpack:>
Some other suggestions would be:
- I would rather use
img
instead ofobject
, if there are element that do a specific task that you want to do, use that element. - if that were an
img
, you need to usealt="splitter"
, a website logo should be named as the website's name. I haven't useobject
to be honest, but usingaria-label="logo"
for the logo is not good. Avoid using words that relates to "graphic" such as "logo, icon, image.." when describing an image, since it is already one. - Theme toggle should be using
button
so that it will be more explicit instead of usingdiv
withtabindex
. - If you are going to build a color theme, using
input type="radio"
are the ones that you should use. Since it is a selection, radio buttons are intended for those. Those radio button should be inside afieldset
along with alegend
which can be hidden or not, depending on the design. Using this kind of structure, it is more accessible for all users. Have a look at my sample snippet about using radio buttons. svg
on the theme toggler should be hidden so usearia-hidden="true"
on it, if you are using ansvg
and it is meaningful, use antitle
element inside thesvg
along with ansr-only
class on it.- You don't need to use
aria-label
on the billinput
since it already uses alabel
associated with it. - Using
label
that associates with adiv
will not work. So this element<label for="input--percentage" calss="input__label">Select Tip %</label>
won't work since it points to a containerdiv
.label
are forinput
. - No need for
aria-label
for eachbutton
since the textselect tip 5
gives the overview of what thebutton
will do. But to be honest, I won't usebutton
for this, instead I will useinput type="radio"
inside of a fieldset sincebutton
alone is not accessible, unless you make like anaria-live
element, that announces that thebutton
has been selected or pressed. - Again,
aria-label
not needed for the nextinput
which is thenumber of person
. - Using
::after
to hold thecan't be zero
is not accessible for NOT sighted users, since there will be no text-content that their assistive tech will read. It would be great to make use of aspan
for example. Thespan
will contain the error-message and it will have anid
attribute. Theid
will be referenced by theinput
element, if theinput
is wrong, that is where you addaria-describedBy
attribute on theinput
and the value of that attribute, will be theid
of the error-message. This way, users will know what kind of error they had made. Also, when theinput
is wrong, add anaria-invalid="true"
attribute on it, so that users will know their input is wrong. - Avoid using multiple
h1
on a single page. On the result section, you don't needh1
or heading tag to wrap the result of the calculator. The result will be better to just usep
tag, since theTip Amount
is already a heading, giving overview on what the section will contain. - An addition as well, for the
reset
button, creating anaria-live
element, that announces the calculator has reset. Sincebutton
does not inform that much, you kind of uses this kind of methods to inform users.
Aside from those, great work again on this one.
Marked as helpful
@buneeIsSlo
Posted
@pikamart, I really appreciate you for taking the time out of your day to provide me some constructive criticism. I've made a note of all the tips and ideas you've given me and will be sure to implement them in my future projects.
I'd like to mention the reason behind why I chose to use the object
tag instead of the img
tag. The SVG stroke animation that you see in the beginning of the intro requires the path of the SVG, and the path can only be retrieved if the SVG is linked in an object
or an embed
tag.
I'm extremely thankful for your feedback. Thank you! Happy Coding :)
@pikapikamart
Posted
@buneeIsSlo Ooh, I don't really have an idea about how that works so it is my first time hearing that :>.
Thank you as well for that information and happy coding as well!