Lack of Active Navigation Link Indicator

[Syransong]

Description

Currently, there is a consistent navigation bar at the top of all pages. However, there isn't any active page indication where the user is currently within the website. By having an active link indicator, users will be able to know where they are and be confident in where they want to navigate to next. This would be especially helpful as some users may first land on pages that aren't the home page.

The active page can be indicated by including an underline, a symbol, bolding the text, or a combination of the aforementioned methods. To be accessible, the design should not rely on solely on colour. Aria labels should be also included to indicate the active page.

Steps to Reproduce

1. Go to karinasong.com in the browser.
2. Navigate to another page on the site, for instance, by clicking the "Design" link in the navigation bar.

Expected Result

When the user goes to a new page, they should see that there is an active page indicator in the navigation bar. Users using a screen-reader will be able to know which page is active via the aria-label role.

Actual Result

There is no indicators on the navigation bar to show which page is active.

Environments

This is present on all environments across all browsers.

Screenshots

On the Development page:

[Syransong]

successfully added a dot indicator under the active page. "aria-current='page'" is also present in the link element

[Syransong]

Encountering issue where all links have an indicator on first load. All links have the "aria-current='page'" attribute on the home page

[Syransong]

issue with all links having an active indicator fixed and fix was launched live