In this lesson, we are going to use aria-current to give a screen reader user more context about what the current page is. Historically, many developers use an .active class to indicate that the page in a menu is the same that you're on.
Instead of using a class, we are going to use the aria-current attribute to add more semantic value to the HTML and use that attribute to style the active link.
Note: VoiceOver testing works best on the Native Safari Browser, hence why we should always use Safari to test.
More resources:
.menu { display: flex; padding: 0; list-style: none; .menu__link { display: inline-block; position: relative; text-transform: uppercase; font-weight: bold; color: #6505cc; padding: 0.675rem; margin: 0 0.5rem; font-size: 1.5rem; text-decoration: none; &[aria-current="page"] { border-bottom: 8px solid #6505cc; } }}