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

Lindsey Kopacz
InstructorLindsey Kopacz
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

egghead
egghead
~ 30 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today