@pikapikamart
Posted
Hey, awesome work on this one. Layout in desktop looks great, it is responsive though you can made some section better like on the article section, going from desktop to mobile breakpoint in dev tools, each article image are really huge, you could have made like a 2x2 column so that the image is properly contained, same with the 4 icons below it, you could use 2x2. Mobile layout however looks great.
Some suggestions would be:
- Those decorative images that you used could have used an extra
aria-hidden="true"
attribute so that they will be completely hidden for screen-reader user.s - Now, there are lots of element that are not inside a landmark element. A typical layout of a site looks like:
<header />
<main />
<footer />
This way, all element that has content are inside their respective landmark elements.
- Website-logo- link
a
tag should either usearia-label
or screen-reader only text inside it, that defines where this link would take the user. Since typically a website-logo links to homepage, use "homepage" as the value for what ever method you will use. - Website-logo
img
should be using the website's name as thealt
likealt="pod"
. Remember that a website's logo is meaningful so always make sure it uses the properalt
value. - On the article section, you could have used
article
tag for each of those cards since it makes sense right. - When wrapping a text-content do not just use
span
to wrap it, use meaningful element like ap
tag if it just a regular text or heading tag if it is an heading. - I would use heading tag on the person's name since they are the ones that each article is all about.
FOOTER
- Same goes for the website-logo-link, use the method I mentioned above.
- The website-logo
svg
should have atitle
element inside it:
<title id="footer-web-logo">easybank</title>
then your svg
should have aria-describedBy
and the value for that attribute will be the id
of the title
element.
- Each
a
tag that wraps social media, it should have eitheraria-label
attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media likearia-label="facebook"
on the facebook linka
tag. This way, users will know where this link would take them. - Each
svg
inside the social media link should be hidden since they are only decoration so usearia-hidden="true"
attribute on them. - Same for the website-logo it should use the website name as the
alt
value. - Those 6 links could have used a single
ul
since those are related links. Also you can wrapped the singleul
inside anav
since those are still your website's navigational links.
MOBILE
- Hamburger menu should be using a
button
element since it is a control. Again, interactive components uses interactive elements. By usingdiv
you are making it not-accessible.
SUPPOSING BUTTON IS USED
- The
button
will be using the method I mentioned usingaria-label
attribute or screen-reader element inside. The value will describe what does thebutton
do. The value could bearia-label="navigational dropdown menu"
. - The
button
should have a defaultaria-expanded="false"
attribute on it. It will be set totrue
if the user toggles thebutton
. - The placement of the toggle and the dropdown is incorrect. The toggle should be placed "before" the dropdown, so that the focus will be next to the dropdown if the
button
has been toggled. Swap them up.
Aside from those, great job again on this one.
Marked as helpful
@TechieStephen
Posted
@pikamart fixed it. Thanks for taking your time to do this.