News Homepage Challenge

Community feedback

• 

  Hassan El Jebyly•490

  @hassaneljebylyPosted about 1 year ago

  hey and well done for finishing the project, to answer your question in order to provide assistive technology users with a logical view of the page structure all sectioning elements <main> <nav> <header>... must have a defined role="" attribute, all sectioning elements automatically define one with the exception of the <section> tag, it only defines region when it has an accessible name using aria-labelledby or aria-label or title. the perfect fix to this in my opinion is to add an <h2 id="last-news-section-title">(title of your choice to describe the section)</h2> inside that section the add aria-labelledby="last-news-section-title" attribute to the section, It will be displayed on the page but you can hide it by adding visually-hidden class to the h2, It won't be displayed but assistive technologies will see it.

  css

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  

  I hope this helps :)

  source

  Marked as helpful

  1

  ---

  

  Fausto Calviño•240

  @faustocalvinioPosted about 1 year ago

  @hassaneljebyly Thank you Hassan. It makes total sense, I'll try it :)

  0