Example using aria-label
Example: The image below references a Mason alum who created his own film festival. We have hidden the image from screen readers using a null tag (i.e., alt="") and the hyperlink text is "Learn more...". Unfortnately, the link text is a problem for screen reader users that require additional information in order to understand where the link would take them.
HTML code snippet:
<a href="https://www2.gmu.edu/focused-your-future/lights-camera-action-mason-alum-creates-own-film-festival" alt=""/>Learn more...</a/>.
See below for how you could add an aria-label attribute to provide the information needed for a screen reader user, while keeping the aesthetics the web developer might prefer:
HTML code snippet with aria-label attribute:
<a href="https://www2.gmu.edu/focused-your-future/lights-camera-action-mason-alum-creates-own-film-festival" aria-label="Lights! Camera! Action! Mason Alum Creates Own Music Festival"/>Learn more...</a/>.
Now, the aria-label text is announced to the screen reader user when they encounter the link. In this instance, Learn more...Lights! Camera! Action! Mason alum creates own music 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-label attribute?