3 Column Preview Card Component with Sass

Community feedback

• 

  darryncodes•6,350

  @darryncodesPosted over 3 years ago

  Hi Eduard,

  Excellent solution, I think you've nailed it.

  Your semantic html is almost there, it's really important to mindful of it. Your <section> could be a <main> and your .attribution <div> could be a <footer>. This should resolve the warnings in the accessibility report.

  Marked as helpful

  0

  ---

  

  Eduard Mekler•60

  @emekler0729Posted over 3 years ago

  @darryncodes thanks for writing some feedback! I implemented the changes you suggested and updated the solution.

  0

  

  darryncodes•6,350

  @darryncodesPosted over 3 years ago

  ah nice one Eduard. Now you know longer need role=main and role=contentinfo they've become redundant.

  0

  

  Eduard Mekler•60

  @emekler0729Posted over 3 years ago

  @darryncodes I saw that... what made me chuckle was when I was reading the accessiblity report from Front End Mentor, it was their own guide that was linked through the "Learn More" reference that suggested using both semantic HTML and the role attribute to ensure compatibility with a screen reader. However, when I made the change, their grading engine threw up the alert that using both semantic HTML and the role attribute is redundant. Oh well, I've learned for next time. :)

  0

  

  darryncodes•6,350

  @darryncodesPosted over 3 years ago

  That’s bonkers!! All the best Eduard.

  0