Blog preview card using variable fonts

Community feedback

• 

  T

  Grace•31,790

  @grace-snowPosted about 1 month ago

  You need to switch that aria-desciribedby to aria-labelledby. Using description means the blog heading is read out after everything repeatedly.

  The other small issues I noted

  • this card would never be used to serve the main heading on a page. So you know it shouldn't have a h1. Use a lower importance heading level like h2 instead.
  • you don't need aria hidden on decorative images. You have correctly left the alt empty so it's already been hidden in the right way.
  • the description on the author image is only repeating the text that's next to it, leading to unnecessary screen reader announcement. It's bringing no value so treat that image as decorative too with an empty alt.
  • font size should always be in rem not px. See https://fedmentor.dev/posts/font-size-px/
  • I strongly recommend you stop using all these complex direct child css selectors. On a big project that will create css with high specifity that's very difficult to maintain. Keep css specificity as low as possible. Use single class selectors.
  • note when links open in a new tab like in that attribution link it's best practice to let screen reader users know in advance. E.g. include some visually hidden text in a span that says "(opens in a new tab)".
  • the design indicates that this whole card should be clickable. See if you can work out how to do that in a simple way without moving the link (it's in the correct place in the html at the moment - I could say exactly how but you may learn better trying to sort this one on your own first, maybe you just forgot to implement etc)

  Marked as helpful

  0

  ---

  

  P

  Dave Quah•660

  @MilleusPosted about 1 month ago

  @grace-snow Got it! Thanks for taking the time to review and share your feedback.

  I'll fix these issues and apply these insights in future challenges. Much appreciated!

  0