​

When creating basic link text, take a moment to ensure that it gives users a clear idea of where the link will take them. Since most screen readers allow users to access a list of just the links in a page, imagine how the links on your page would look or read in a list.

When your site has a page that provides an overview of other pages, such as a news or blog home page, you need to ensure that any repetitive links have the appropriate associated text for links to the full article.

An example, on our DubBlog home page, each entry has a Read More button. Without special treatment, this text would not provide the user with appropriate readable text for these links.

If you manually produce the content for such an overview page, you can add an aria-label attribute with the appropriate descriptive text to your link. The content inside the aria-label tag will be read to the screen reader user instead of just 'Read More.'

<a aria-label="Read More of Holiday Office Hours">Read More</a>

If a CMS generates your overview page, you can automate the creation of an 'aria-labelledby' attribute. Following is the code used on the page shown above:

The aria-labelledby attribute added above pulls in the article title from this part of the page's HTML:

This type of automated solution will most likely need to be handled by someone who manages the back-end of your CMS.
​

When images are used as links, the alt tag for the image is read as the discernible text for the link. In such cases, be sure you refer to the destination of the link in the alt text.
​

From the DubBot logo in the top, left of our DubBot Home page.
​

The most common offender we see in this area is social media icons.

Even though there is no content between the <a> and </a> tags, adding the 'aria-label' attribute ensures that discernible text will be announced to our screen reader users.