@pikapikamart
Posted
Hey, great work on this one. I like that animation on the hero section. Okay, for the desktop layout it is good, resizes fine although the hero-image gets hidden. The mobile layout is good.
Some suggestions would be:
- The website logo in the
header
, thea
tag should usearia-label="homepage" so that when users navigate in that link, assistive tech will anounce the phrase
homepage link`, this will inform the user that this is a homepage link. - The website logo, the
img
should usealt="easybank"
as the attribute. Avoid adding words that relates to "graphic" like "logo, image, icon.." as a value onalt
. - Navbar links is not showing.
- The hero background is not appearing, change the
::before
background
value with thisbackground: url(../img/bg-intro-desktop.svg) no-repeat;
. - Adding
alt
on the hero image is nice, but I thinkphone
alone is not descriptive, maybealt="easybank phone app"
. alt
on the icons in thewhy choose easybank
section could be left empty since those are just decoration.- On the article section, since you are adding like a
cursor: pointer
to thearticle
itself and treating it as an interactive element, what would make it better is to wrap the wholearticle
insidea
tag. This way, the interaction that you add makes more sense. Because if you add an animation interaction to an element that doesn't do anything, what good would it add, right? But I like the hover effect:> - On the
article
the title of the article should be a heading tag, if thearticle
is wrapped in thea
tag. - On the
footer
, website logoa
tag should usearia-label="homepage"
as well. - The
svg
of the website logo in thefooter
should have atitle
element inside it with a text:
<title> easybank </title>
This is like a alt
but for svg's.
-
The six links in the
footer
should be wrapped inside anav
since those are navigation links like the ones on theheader
element. -
On mobile layout, the hamburger menu should use
button
instead ofdiv
, this will make it accessible. Also include aaria-label="hamburger dropdown toggler"
on it. Also add aaria-expanded
attribute with it, you should use javascript to toggle thearia-expanded
attribute to eithertrue
orfalse
. This will inform a user that a dropdown has been expanded.
Aside from those, really great work.
Marked as helpful
@zaraag92
Posted
@pikamart thanks so much your feedback.
I fixed all the problems and going to update them. Really appreciate your time and all the suggestions, it really helped me.