Example using aria-labelledby
Unlike aria-label, the aria-labelledby attribute is used when there is already text on the web page to that can be used to define the link's purpose. Let's look at the examples below:
Continuing the previous example, the image below now includes text above the image that references a Mason alum who created his own film festival. The image is hidden from screen readers using a null tag (i.e., alt="") and the hyperlink text remains "Learn more...".
Unfortunately, the link text is still not sufficient enough to provide screen reader users with the additional information they require in order to understand where the link would take them.
Example:
Mason alum, Fernando Mico, is the creator and director of the Northern Virginia Film Festival.
HTML code snippet:
<p id="NOVAfestival"> Mason alum, Fernando Mico, is the director of the Northern Virginia Film Festival.</p>
<p><a href="https://www2.gmu.edu/focused-your-future/lights-camera-action-mason-alum-creates-own-film-festival" />Learn more...</a/>.
In the code snippet above, we have added an id="NOVAfestival" attribute to identify where the aria-labelledby attribute will pull information to provide for a screen reader user.
See below for how you could add the aria-labelledby attribute:
HTML code snippet with aria-labelledby attribute:
<a href="https://www2.gmu.edu/focused-your-future/lights-camera-action-mason-alum-creates-own-film-festival" aria-labelledby="NOVAfestival"/>Learn more...</a/>.
The aria-labelledby attribute points to the NOVAfestival id tag, which will announce that information to the screen reader user when they encounter the link. In this instance, Learn more...Mason alum, Fernando Mico, is the creator and director of the Northern Virginia Film Festival.
Screen Reader Testing Activity:
Turn on NVDA. Press the down arrow key to move through the web page. Now, what is announced when it encounters the hyperlink? Do you see the difference in using the aria-labelledby attribute? Does it differ from using aria-label?