Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


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

    Lindsey KopaczLindsey Kopacz
    htmlHTML 5

    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:



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Lindsey Kopacz: Here, we are on the home page. Sometimes, we like to put a class on the active link to tell us where we are in the navigation. Once we add that class, we can put some styling on it. I'm going to add a border bottom with that purple. When we refresh it, we see that styling. However, this is not the most semantic way to do it. Let's listen to this on Safari with the screen reader. Lindsey: You may have noticed that when we were on the home button, it just said link. What we should do to fix this is take away this class, and instead add an aria- current=page. Then we go back to the CSS to make sure that we replaced that class with that Aria attribute. Then we refresh that page. It looks the same, but this time, it has more semantic value. Let's listen to it with the screen reader using aria-current. Lindsey: With the aria-current attribute, the link has a lot more semantic value.