1×
Become a member
to unlock all features

Level Up!

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

Autoplay

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

    ariaARIA

    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: