Indicate an Active Link with ARIA

To indicate an active link in my main navigation, I used a class name as follow:

<li class="active"><a href="/about/">About</a></li>

The issue with using a class name is that screen readers don’t recognized it. Fortunately ARIA has the aria-current="page" attribute to solve the issue (learn more from Manuel Matuzović’s “Building the main navigation for a website”). I switched all my main navigation as follow:

<li aria-current="page"><a href="/about/">About</a></li>

Add PHP function to make the active page dynamic:

<li<?php if ($thisPage=="About") echo " aria-current=\"page\"";?>><a href="/about/">About</a></li>

Style the active link with CSS:

nav li[aria-current="page"] a {color:red;}