News homepage using grid, flexbox & vanilla JS

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hello Ania,

  I just looked at your code and I really like your approach towards digital accessibility and semantic HTML! There are just a few changes I would consider.

  Skip navigation link

  I find it great that you added a skip navigation link. To make it work correctly, you should add a # followed by the ID value of the content section inside href attribute.

  <a href="#main-content">Skip to main content</a>
  ...
  <main id="main-content">
   ...
  </main>
  

  Further, to reduce redundancy, there is no necessity to add an aria-label attribute to your skip-link, as the link already contains the appropriate text. You can read more about it in this W3C document.

  Using the role attribute

  I see you added role="list" to the <ul> inside navigation. The <ul> tag is semantic, which means it has already an implicit role of list with an ARIA equivalent. W3C recommends to avoid specifying redundant roles which could otherwise lead to unintended side effects.

  Besides that, I think you made a really good job adding ARIA elements to your page.

  Keep up the good work!

  Marked as helpful

  0

  ---

  

  P

  ania•330

  @ania221BPosted about 2 years ago

  @dusan-b

  Hello Dusan!

  Thank you very much for looking at my code, sharing the articles — I'll check them out — and all your kind words! As far as the role="list" goes, I decided to use it after reading this article, which Dave kindly shared with me. Maybe it will be an interesting read for you too :) Thank you again and happy coding!

  1

  

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  @ania221B Great article, thanks!

  1