Responsive landing page using Grid and Flex

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hi Guada,

  I just look at your solution and I really like it, especially the fact that the web page is accessible with a reasonable HTML structure. Also the trick with role="list" on <ul> elements to keep the semantic meaning, pretty neat. Frankly, I only recently found out about this bug fix.

  There are just a few changes I would consider:

  • I see that you have added aria-label="Primary" to the <ul> element inside the primary navigation. A better, more appropriate place for it would be inside the <nav> element, to make it clear for screen reader users that this is the primary navigation.

  • The menu button is an important part of the navigation, so it should belong inside <nav>, otherwise it would be announced seperately by assistive software. Also, the aria-controls property should indicate the <ul> element.

  • The purpose of the Contact "button" is most likely to navigate the user to the contact page, not to trigger an action or event. Therefore, it should be a link which only by design looks like a button.

  With these changes in mind, I would recommend rewriting the navigation part as follows:

  <nav aria-label="Primary">
    <button aria-controls="primary-navigation" aria-expanded="false">
      ...
    </button>
    <ul role="list"  id="primary-navigation">
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  

  The rest is superb, keep up the good work. :)

  Marked as helpful

  0