Before we start - I am as guilty of this as everyone else, and the article is to help remind me of my mistakes.

What is a branding link?

Most websites will have an image - link in the left of the navigation bar - image of the company logo that links to the home page.

The issue:

<a href="/"><img src="location-of-awesome-logo" alt="Company Name Logo" /></a>

("company name" is a placeholder for this example) This looks okay - the alt text has a description of the context of the image.

But what ends up happening here is that when assistive technology reaches this link, since there is no text content of the link, the screen-reader then reads the alt text of the image. So the perception of the branding link for assistive technology is something like the below picture, and will read "link company name logo"

This is a visual representation of the above code.

This link does not have a good description of the destination, but it does have an accurate alt text to describe the image in the event that the image fails to load.

It can be even worse if you don't have alt text as the screen reader will just announce "link".

Solution:

Aria Label to the rescue. The aria label on the link will overwrite the alt text of the child element (image) so that you can describe your destination, taking Codú as the company name,

<a href="/" aria-label="codú.co home><img src="location-of-codu-logo" alt="Codu Company Logo" /></a>

Visual representation of the above code. When a screen reader encounters this it will read "link codu dot co home".

Another example:

To give a real world example of this - I'll use the Codú Articles page as a reference.

In all the blog article cards there is an image of the authors avatar but links to a page where you can view all the articles by the author.

Naturally the alt text of this image is "Niall Maher's Avatar" as that is a description of the image, if the image ever fails to load the alt text of "Niall Maher's avatar" will appear which gives context for those that do not rely on assistive technology.

But for those that rely on assistive technology - the perception of the link is something like the below picture, and will read "link Niall Maher's avatar"

Solution:

An aria label on the link will overwrite the alt text of the child element (image) so that you can describe your destination, but still have accurate alt text for the image in the event that this fails to load correctly.

<a href="link-location" aria-label="view all niall maher's posts"><img src="location-of-avatar-image" alt="Niall Maher's avatar /></a>

What this does: when a screen-reader encounters this it will read "link view all niall maher's posts".

This allows for additional description of the links destination, and will allow visitors who rely on assistive technology to better understand what to expect if they click / select this link.

This is a visual representation of the above code.

An alternative solution would be to describe the link destination in the alt text of the image but this would appear as "view all niall mahers posts" if the image fails to load, and may not be what you want. But if you use a Content Management System this could be the approach for you.

@Niall if you've read this far I'll put in a pull request to update this in the Codú codebase.