@pikapikamart
Posted
Hey, awesome work on this one. This is my first project and I still find this really hard to be honest:>. For the layout, I had to zoom out since you are using 1440px which is too big for lots including me who uses a 1366x768, the 1440px on the design is not related to the breakpoint. Toning it down would be great since showing the mobile layout from 0-1440px is too big, don't you think.
AliAbuhumra already gave feedback on this, just going to add some suggestions as well:
- A typical structure of a site looks like this:
<header />
<main />
<footer />
This way, all content of your page will be inside their own respective landmark element.
For this, the header
will only contain the navbar
since the header
will be using position: absolute
so that the first section of the main
could occupy the topmost part to show the design.
- 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="sneakers"
. - Right now, your markup for the navbar is too complicated. What you could have looks something like this:
<nav>
<ul>
<li>
<button>Product</button>
<ul>
{ links in here }
</ul>
</li>
<li> ...</li>
<li> ...</li>
</ul>
</nav>
You will need to have a parent ul
that has 3 li
that wraps each of the navlinks like the product, company, connect
. Also, you don't need to use heading tag on each of those, use only button
.
- Also, when creating interactive components, use interactive elements. For example, the dropdown, you are making the arrow-icon, an
img
to be interactive which should not be sinceimg
is not designed to act that way right, that is why there arebutton
for interactivity. - You don't need to have those
div
inside thea
tags since you could just directly use the text-content of thediv
as the text-content of thea
tag. - Also, when using a heading tag, make sure you are not skipping a level. If you use
h4
then make sure thath1, h2, h3
are all present. - Don't nest
a
tag insidebutton
or vice-versa. Use onlya
tag itself orbutton
. - Those images that are in here except for the illustration of the phone, are only decorative images. 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 the image is usingsvg
. - Only use descriptive
alt
on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users. - When using
img
tag, you don't need to add words that relates to "graphic" such as "illustration" and others, sinceimg
is already an image so no need to describe it as one. - Phone-illustration could have use a descriptive
alt
since the app is being show. It could be likealt="blogr app on a phone"
.
FOOTER
- Same with the company logo, use a more proper
alt
value. - Again same as the proposed markup above, those links again on the bottom-part should use it. They are still you navigational links so use
nav
withul
that has 3li
items and eachli
will have aul
that will contain those list-of-links.
MOBILE
- Hamburger menu should be using a
button
since it is an interactive component.
SUPPOSING BUTTON IS USED
- The
button
should have a default atribute ofaria-expanded="false"
and it will be set totrue
when the users toggles it and vice-versa. - The hamburger
button
should have eitheraria-label
attribute orsr-only
text inside it which defines what thebutton
does. You could usearia-label="navigation dropdown menu"
- The
img
inside the hamburger-menu should have been hidden since it is only a decorative image. - Also the markup placement is wrong. The dropdown-toggle should be placed before the navbar so that after the user toggles the
button
the focus will be "next" to the dropdown.
Right now, html is the problem in here. You could look up for some same challenges solution on this and take note of their structuring, but do not take mine since it is not accessible and haven't refactored it yet:>
But still, great job again on this one.
@nareshpoonia
Posted
@pikamart Hi Raymart,
Thanks for such a detailed reply, I have fixed a few issues, for others, I am taking a note and will try to implement them in my next project.
Thanks again