Add Semantic Styling to the Current Page of a Navigation Item with aria-current
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:
Lindsey Kopacz: [00:00] Here, we are on the home page. [00:02] Sometimes, we like to put a [00:04] class on the active link to tell [00:07] us where we are in the [00:08] navigation. Once we add that [00:10] class, we can put some styling [00:12] on it. I'm going to add a border [00:15] bottom with that purple. [00:21] When [00:21] we refresh it, we see that [00:22] styling. However, this is not [00:24] the most semantic way to do it. [00:26] Let's listen to this on Safari [00:28] with the screen reader. [00:48] [VoiceOver] Lindsey: [00:48] You may have noticed that when [00:50] we were on the home button, it [00:51] just said link. What we should [00:52] do to fix this is take away this [00:54] class, and instead add an aria- [00:57] current=page. Then we go back to [01:01] the CSS to make sure that we [01:03] replaced that class with that [01:05] Aria attribute. [01:07] Then we refresh [01:08] that page. It looks the same, [01:11] but this time, it has more [01:12] semantic value. Let's listen to [01:14] it with the screen reader using [01:16] aria-current. [01:32] [VoiceOver] Lindsey: [01:32] With the aria-current attribute, [01:34] the link has a lot more semantic [01:35] value.