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:
- [Using the aria current attribute](https://tink.uk/using-the-aria-current-attribute/)
- [W3 WAI-ARIA - aria-current](https://www.w3.org/TR/wai-aria-1.1/#aria-current)
- [Breadcrumb Example - w3-WAI ARIA Practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html)

https://app.egghead.io/api/v1/lessons/aria-add-semantic-styling-to-the-current-page-of-a-navigation-item-with-aria-current/subtitles

Add Semantic Styling to the Current Page of a Navigation Item with aria-current

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.


Add Semantic Styling to the Current Page of a Navigation Item with aria-current

Share this video with your friends