Responsive solution using CSS Grid

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  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

  0

  ---

  

  jl-stephenson•100

  @jl-stephensonPosted 3 months ago

  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

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  @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

  0

  

  jl-stephenson•100

  @jl-stephensonPosted 3 months ago

  @Alex-Archer-I

  Thanks Alex.

  I've refactored the code based on your suggestions:

  • Moved the header inside of main to act as more of an 'intro';
  • Changed the cards to be li elements within a ul.

  Thanks for the resources too, very helpful!

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  @jl-stephenson

  Glad I could help! Feel free to ask or comment or something like this =)

  0