Primary Navigation Styling and Semantics

[garyb1]

Context

1. Provide active styles to the current active link
2. Markup the current page with aria-current="page". This represents the current page within a set of pages. You can use this attribute as a hook for styling. You can read more about this on Adrian Roselli's Post Using CSS to Enforce Accessibility
3. Ensure navigation landmarks have a unique accessible name. Differentiate between the primary navigation and the footer navigation by providing an accessible name to the nav elements.

Expected Behavior

Example Markup

<nav aria-label="primary">
  <ul role="list">
     <li><a href="/home" aria-current="page">Home</a></li>
     <li><a href="/articles">Articles</a></li>
  </ul>
</nav>

Current Behavior

No semantics or styling provided

Screenshots

Steps to reproduce

Inspect primary navigation on all pages

[github-actions]

Uh oh! @garyb1, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[garyb1]

@NiallJoeMaher see github action above .. even I miss it sometimes!

[garyb1]

Alt text added 👍

[NiallJoeMaher]

That's fantastic! I love our new alt text bot. 🦾

[NiallJoeMaher]

I'm going to take this one! Redesigning our nav now.

[garyb1]

Sure thing @NiallJoeMaher ..got any designs you'd like me to review? 🙂