1×
Become a member
to unlock all features

Create egghead account to access 5000+ tutorials and resources from expert developers.

Create account
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: