Better (more accessible) active link styling
Until this morning, I always styled the current link in my navigation menu by doing this.
<ul class="nav">
<li><a href="/about">About</a></li>
<li class="active"><a href="/articles">Daily Tips</a></li>
<li><a href="resources">Learn JS</a></li>
</ul>
.nav .active a {
border-bottom: 0.125em solid #fa7176;
color: #272727;
}
It gives users a clear visual indication that “you are here.”
Well… sighted users, that is. If you’re visually impaired or use a screen reader to navigate the web, it tells you nothing.
I just learned that I should have been using [aria-current]
to indicate the current page in the navigation, like this.
<ul class="nav">
<li><a href="/about">About</a></li>
<li><a aria-current="page" href="/articles">Daily Tips</a></li>
<li><a href="resources">Learn JS</a></li>
</ul>
You can even hook into the attribute for styling purposes, so I can drop the .active
class altogether.
.nav [aria-current] {
border-bottom: 0.125em solid #fa7176;
color: #272727;
}
Léonie Watson has a great article on the [aria-current]
attribute, and I suggest you go read the whole thing.
Most notably, you can use it for more than just the current page (formatting adjusted for space).
The aria-current attribute can be given one of a predefined set of values (enumerated tokens):
page
represents the current page within a set of pages;step
represents the current step within a process;location
represents the current location within an environment or context;date
represents the current date within a collection of dates;time
represents the current time within a set of times;true
represents the current item within a set;false
does not represent item within a set.
You can dig deeper into the [aria-current]
attribute, with some great examples, in Léonie’s detailed article.