4CardsChallenge

Community feedback

• 

  Thomas Hertog•825

  @thomashertogPosted 5 months ago

  I feel you have overdone accessibility a bit with this challenge. Imagine you were to look at this with a screenreader. Would you really believe that all the heading levels you used are appropriate? In my opinion this challenge only needs an <h1> to identify the page title and an <h2> to identify the section with the cards. The titles of the cards themselves feel a bit awkward as a heading to me. Same goes for the <h3> in the <hgroup> there is no added value in having that as a heading (to which you can directly navigate). On top of that it feels a bit awkward that you're structuring it like

  1. <h3>
  2. <h1>

  more down the page 3. a collection of <h2> Heading levels should be thought of as a means to quickly navigate the structure of a website. I'm always comparing it to a table of contents. You wouldn't make a ToC with 1.1.1. above 1. which is above 1.1 up til 1.4, right?

  <article> also feels a bit overkill for the different cards

  about the alt text for the icons. alt text should describe the image you're looking at, so i'd replace icon karma with lightbulb icon, though you may argue that these icons are purely decorative in which case i'd leave the alt text empty and add aria-hidden to hide it from screenreaders (as they have little value in a read-out page)

  absolutely love how you made the effort of building an in-between layout with just 2 columns.

  to make your CSS more maintainable/reusable/readable, you may want to look into CSS custom properties (some people like to call it variables) also, if you're writing with short-hand properties (e.g. padding: 1rem 2rem 1rem 2rem), notice that there is a shorter version available which has the same effect -> padding: 1rem 2rem

  hope this was insightful however you already did a pretty good job!

  Marked as helpful

  0