@pikapikamart
Posted
Hey, really awesome work on this one, this is my favorite challenge just to insert. The site looks great in desktop, it is responsive and the mobile state looks great as well.
Others already gave their feedbacks, just some suggestions as well:
- First, why are there lots of css errors, I haven't encountered those before, hmm.
- You could add
main
word on the skip-link-text to make it more explicit and clear. - I was going to suggest adding
title
element inside the website-logo but I tested it with nvda and it is not reading the svgtitle
why is that. I was suggesting that for long time and google it right now and it is not reading it, so right now I might test some alternatives and I could suggest this link about using aria-labelledBy along with title :> - Those decorative images on the site could have use an extra
aria-hidden="true"
attribute so that they will be totally hidden alongside with thealt=""
- Also, tabbed interface is really great^^.
- Same goes for the website logo. Also, if you don't want to trouble yourself with doing those
aria
's you could use thesvg
as animg
so that you could just usealt
. - I just noticed by now, making my dev tools higher, the layout shifts and I suspect some
vh
units in here:> - Dropdown
svg
in thefaq
section could usearia-hidden="true"
. - The
form
works properly but currently it lacks information for the users to know what happened. A pseudocode looks like:
if ( input is wrong )
input.setAttribute("aria-invalid", "true");
input.setAttribute("aria-describedBy", id of the error-message);
else
input.removeAttribute("aria-invalid");
input.removeAttribute("aria-describedBy");
The error-message element should have an id
attribute which is referenced by the aria-describedBy
attribute on the input
element. By doing that, your user will know that the input
is wrong because of aria-invalid
and they will know what kind of error they made because of the aria-describedBy
- You can also create an
aria-live
element that announces if theform
submission is a success or not so that users will be informed on the spot. - The
button
should havetype="submit"
. Always be explicit on what yourbutton
should act especially when it is inside aform
element. Since by default abutton
inside aform
turns totype="submit"
. So imagine you have aform
with a closebutton
but thisbutton
does not havetype="button
" instead of users closing theform
they would submit it. - Error-svg to use
aria-hidden="true"
as well.
FOOTER
- Same goes for the website-logo`svg
- Social media
svg
should usearia-hidden="true"
.
Just those ones. Again, this is really great.
Marked as helpful