Raymart Pamplona• 16,090
@pikapikamart
Posted
Hey, awesome work on this one. Layout in desktop looks really good and very close to the design. It is responsive and the mobile layout looks really great as well.
Some suggestions would be:
- You don't have to use
figure
on the website-logo-link, you could have just usediv
or just let thea
tag be its element. - The
alt
value for the website-logo should only bealt="sunnyside"
, avoid adding words that relates to "graphic" such as "logo, icon, image..", it is already an image so no need to describe it as one. - The navigational links on the
header
should be inside aul
element, since those are "list" of links. - The
alt
values for the testimonial images as well should only be using their names, lose the "photo" word. - The position of the person shouldn't be a heading tag, the name being heading tag is enough and more suitable.
- The
alt
values for the 4 images before thefooter
should bealt
since those are only decorative, and there aren't any content that relates to theimg
.
FOOTER
- The
a
tag for the logo-link should have anaria-label
or ansr-only
text inside it, describing where this link would take. For example,aria-label="homepage"
, since typically, website logo links to the homepage. - The
svg
for the logo-img should have atitle
element on thesvg
like:
<title> sunnyside</title>
On svg
, you use title
element inside it, on img
, alt
value are used.
- Again, nav links would be better inside
ul
element. - The social media links should be inside
ul
element as well since it is a "list" of links. - Each
a
tag that wraps the social media icon should havearia-label
attribute on it orsr-only
text inside the element, defining where this link would take, likearia-label="facebook"
. Also, do not usearia-hidden="true"
on it, use it only on images or icons.
MOBILE
- The menutoggle should be using
button
and notdiv
element. When making interactive component, use interactive elements. - The
button
for the toggle will also have anaria-label
orsr-only
text, describing what thebutton
will do, a text like "navigation menu dropdown" could be used. Also, it should be using aaria-expanded
attribute, which will be changed by javascript. - The placement of the toggle and the dropdown is incorrect. The
button
should be placed before the dropdown. Swap those 2.
Aside from those, really great work on this one.
Marked as helpful
1