Article preview component challenge hub

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great job on this one. Though I had to zoom out to see the desktop layout properly (suspecting vh unit in here), did you code this on a large screen? It is not really responsive at my end, using 1366x768 which lots uses too. Mobile layout looks great but the breakpoint is late, that 375px on the design does not mean the breakpoint usage.

  Some suggestions would be:

  • Don't use max-height on the body , don't.
  • On the main tag or in general, avoid using vh unit in the height as this is not consistent for all users. It might look good on your local machine but not for everyone since it is relative to the remaining viewport/screen's height. Instead use rem.
  • .attribution should be inside footer so that it is inside a landmark element.
  • The img could use a more descriptive alt if you think the image is meaningful enough, since drawers is quite ambiguous.
  • I wouldn't really use heading tag on the bold text as it doesn't really give information on what the section would contain as it is like a normal text. Instead, if I were to tackle this, I would use a screen-reader only h1 and gives it a text that will describe what is the main-content is all about.
  • Person's img should be using the person's name as the alt like alt="Michelle Appleton". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
  • Person's name should be a heading tag since they are the focus of this component since those text are like an opening blog of the person. The text below the person should be a p tag.
  • The button should trigger the dropdown onClick and not hover :>>.
  • Following the button on an onClick, the button should have a aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="social media platform dropdown".
  • The button as well should have a default attribute of aria-expanded="false" and will be set to true if the button is toggled and vice-versa.
  • The img inside the button should be hidden since it is only decoration. Decorative image must be hidden at all times for screen-reader users by using alt="" and extra aria-hidden="true" attribute on the img tag.

  Then on the dropdown of the social media:

  • Social media links could be inside ul since those are "list" of links.
  • Each a tag that wraps social media, it should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media like aria-label="facebook" on the facebook link a tag. This way, users will know where this link would take them.
  • Each img inside the social media link should be hidden since they are only decoration so use method I mentioned above.
  • Also, you don't use span to nest the dropdown, it could be a div, section or any other containing elements.

  If you have any queries, just let me know okay. Aside from those, great job again on this one.

  0