Design comparison
SolutionDesign
Solution retrospective
practice responsive
Community feedback
- @pikapikamartPosted almost 3 years ago
Hey, awesome work on this one. A quick note though, the background-image is covering the whole page:>. Desktop layout looks great , the site is responsive and the mobile state looks great as well.
Some suggestions would be:
- Remove the
background-size
from themain
tag so that the image won't be covering the whole page. - Change the
section
tag into just usingdiv
.section
alone is not informative as a landmark unless it is labelled usingaria-labelledby
attribute. - Remember that a website-logo is one of the meaningful images on a site so use proper
alt
for it. Use the website's name as the value likealt="clipboard"
. - Other images
alt
could be improved. For example, on the computer-image, you could use something likealt="clipboard application on computer"
. Describing more the image. article
is not needed as well since you mainly want anarticle
to contain contents that are to be distributed with different page of the site, hence it is independent content.- Those 3 icons after the tablet images are just decorative. Decorative images should be hidden for screen-reader at all times by using
alt=""
andaria-hidden="true"
to theimg
tag or onlyaria-hidden="true"
if you are usingsvg
instead ofimg
tag. - When using
img
tag, you don't need to add words that relates to "graphic" such as "icon and others, sinceimg
is already an image so no need to describe it as one. - Use only the company's name as the company
img
tagalt
value.
FOOTER
- Since you are treating the website-logo as a link. Website-logo-link
a
tag should have eitheraria-label
attribute orsr-only
text inside, that describes where the link would take the user. Usually, website-logo directs user to homepage so usehomepage
as the value like `aria-label="homepage". - Same with the company logo, use a more proper
alt
value. - Add a
aria-label="footer"
on thenav
tag inside thefooter
so that it will be clear whatnav
the user is navigating. - Those social-media links could be inside a
ul
element since those are "list" of links. - Each
a
tag that wraps the social-media icon should have eitheraria-label
attribute orsr-only
text inside it, defining where the link would take them. For example, you should usefacebook
as the value if the link would take the user to facebook. - Social-media image should be hidden since it is only a decorative image so use
alt=""
andaria-hidden="true"
.
Aside from those, great job again on this one.
Marked as helpful1 - Remove the
- @JimmyHoang296Posted almost 3 years ago
thank you so much. I will read more on aria-label to get that done perfectly on next project.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord