@Alex-Archer-I
Posted
Hey!
Congrats with first steps with grid! Your work looks neat =)
There is no need for aria-label
tags here. The cards contains text, which will be recognized by screen-readers. The aria-label
is helpful when there is no clearly explanation about what this part of the page do. For example, if the button contains only the svg icon.
Also the purpose of the top-level header
element is to bear content which could be repeated on the different pages of the page (like, logo, navigation and stuff) so it shouldn't have the h1
tag. But you can put header
inside main
or article
and it will have different role.
By the way, why did you make five rows on the grid? I think four will be enough here =)
Oh, and in the mobile version you can omit rows definition at all - grid creates additional rows when get new elements (it could be helpful when the content changes or generated dynamically =)).
Overall you did great, keep doing =)
Marked as helpful
@jl-stephenson
Posted
Hi Alex,
Thank you for the feedback - all very useful.
header
containing repeated content makes a lot of sense.
I used aria-label
off the back of watching this video by Kevin Powell. He seems to be saying that sections aren't semantic without aria-labels - does this apply to articles as well?
Thanks, John
@Alex-Archer-I
Posted
@jl-stephenson
Hey, you're welcome, John =)
Thanks for the video link, I already learned about section
vs article
from this but the video have additional useful things =)
The article
have an implicit "article" role, so it doesn't need aria-label
, but I started to think that articles
not the best choice here.
You see, the MDN Docs says that The article role indicates a section of a page that could easily stand on its own on a page
. But those cards don't really looks like standalone items, more like list of features - so, maybe, the ul
tag and li
would be more appropriate here?
By the way, the thing about header
could be said about footer
too. Imagine that you have multiple page site, and footer and header parts keep the same on different pages, but main content could change.
Marked as helpful
@jl-stephenson
Posted
@Alex-Archer-I
Thanks Alex.
I've refactored the code based on your suggestions:
- Moved the
header
inside ofmain
to act as more of an 'intro'; - Changed the cards to be
li
elements within aul
.
Thanks for the resources too, very helpful!
@Alex-Archer-I
Posted
@jl-stephenson
Glad I could help! Feel free to ask or comment or something like this =)