Responsive Article Preview with HTML, CSS and JS

Community feedback

• 

  P

  Darkstar•1,100

  @DarkstarXDDPosted 21 days ago

  Hey. Looks like this is a 4 month old submission but somehow in the learning paths i was asked to give feedback on this. Overall it looks good, but here are some suggestions i have.

  • There is no need for a <header> and a <footer> in this challenge. And even if there was, those two should not go inside the <main>. They should be outside of the <main>. This is just a component, so <main> should be the only landmark element needed here.
  • <header> and <footer> both are usually used to wrap content that repeats across multiple pages in a website. <header> you usually see at the very top of a site containing the site logo and the navbar (site navigation). <footer> at the very bottom usually contains any attribution of the site, some contact info, a sitemap (secondary site navigation) etc.
  • When a button or a link only has an image/icon inside it and no text, give it a aria-label. That way screen readers can announce that name when a user navigates into that link. Otherwise the user won't know what that link/button will do since there is no text on it to be announced. You have already given an aria-label to the share button, you can do the same for the social media links as well.
  • I think there is no need for the alt text on that user avatar. Just reading out the name of the person doesn't make that much sense because you already have the name of that person right next to it. So the screen reader will be just reading the name of the person twice. Also at the same time it's very small that there is no point trying to describe that image either. So i think you can keep the alt text of that avatar empty. alt="".
  • Currently when the site loads, the share dialog pops up and then disappears. When i initially click on the share button it doesn't open the dialog. Only when i click the second time the dialog opens. This only happens when the page first loads.

  0