Article preview component, mobile-first, using flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop is really good as well as for the mobile layout. Great.

  Some suggestions would be:

  • I think the image could be an actual img element. Since the article itself talks about furniture, it would be great addition to add those and have maybe a descriptive "furniture" alt value.
  • The alt of the person should use that person's name as the alt value, like alt="michelle appleton".
  • The person's name should be a heading tag, since this is an article, a person's name adds very much to the content.
  • Now, on the toggler, it should use button element, using div alone is not really accessible. Whenever we create an interactive element, our keyboard should also interact with it, right now, you can't use your tab key in the keyboard like it should do. Making it a button makes it accessible.
  • The button togller as well should have aria-expanded attribute on it. This will be changed by javascript, either true or false depending on whether it is toggled.
  • The social media dropdown order in html, it should be after the toggler. So that when it is accessible, when I pressed again my tag, I would be navigating the dropdown now, right now, I can't because the ordering is wrong.
  • The social media should be wrapped inside an a tag since it will act as a link for the user.
  • Each social media link a tag should have aria-label on them, example, the a tag that will wrap the facebook, it should have aria-label="facebook".
  • The img of the social media should only use their name as the alt value like alt="facebook". Avoid adding words that relates to "graphic" like "icon, logo, image".. as the value. Assistive tech will handle those for you.

  Aside from those above, you did a great job on this.

  Marked as helpful

  1

  ---

  

  Jullierme Rodrigues Gomes•95

  @jullierme-rPosted about 3 years ago

  @pikamart thank you so much. I'll work on your advices and try to keep that in mind for the next time.

  0