News homepage with semantic HTML and aria-labeledby headings

Community feedback

• 

  Rebecca Padgett•1,840

  @bccpadgePosted about 1 month ago

  Hello @elisilk. Congratulations on completing this challenge!!!🎉

  For the mobile navigation, you can use <button> tag rather than <a> tag for the hamburger and close icons.

  <button>
   <span class="visually-hidden"> Open mobile navigation</span>
   <img src="assets/images/icon-menu.svg" alt="" >
   <img src="assets/images/icon-menu-close.svg" alt="">
  </button>
  

  Add ARIA to the <button>

  • aria-expanded="false"
  • aria-controls="nav"
    • The aria-control on the button connects to the nav when you put a id="nav"

  Using JavaScript you can use setAttribute of aria-expanded="false" to "true"

  Here is an example: Project tracking intro component

  More info📚:

  • HTML Accessibility

  The visually-hidden CSS class will tell screen readers that this <button> will say open mobile navigation.

  /* sometimes referred to as .sr-only */
  .visually-hidden:not(:focus):not(:active):not(:focus-within) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }
  

  To check accessibility on website

  • Open your website in Google Chrome
  • Go to the DevTools
  • Click More Tabs button next to Memory
  • Then click Lighthouse

  Lighthouse analyzes the website with 4 categories

  • Performance
  • Accessibility
  • Best practices
  • SEO (Search Engine Optimization)

  I hope you find this useful and don't hesitate to reach out if you have any questions.

  Marked as helpful

  2

  ---

  

  P

  Eli Silk•660

  @elisilkPosted about 1 month ago

  Hi @bccpadge 👋,

  Thanks the suggestion! I implemented the changeover to the <button> element and learned a bit about the aria-expanded and aria-controls attributes in the process. I appreciate you taking the time to look at my solution and offer feedback. 🙏

  Eli

  0