The header of almost every site starts with the brand identity, which consists of a logo, the brand name, or both. From a design perspective, this is pretty straightforward. Each item can stand alone, but if both are used together, the logo is typically displayed first, followed by the brand name.

Things gets a little trickier when we consider accessibility. I'm not an accessibility expert, but I do try to make things as accessible as possible. Let's take a look at our options.

1. Brand name only

<a href={site.url} class="brand-identity">{site.name}</a>

As long as the site name is something reasonable/recognizable, we might be good right there. However, if the label is unusual and could cause confusion about whether or not the link leads to the home page, we could add an ARIA label.

<a href={site.url} class="brand-identity" aria-label="Go to home">{site.name}</a>

Please note: The first rule of ARIA use is to only use it if native HTML doesn't have an accessible option.

2. Logo only

<a href={site.url} class="brand-identity--plato brand-identity--h brand-identity sketch">
  <img src="http://example.com/logo.svg" class="brand-identity__logo" alt="{site.name} logo, go to home page" />
</a>

In this case, we don't have any link text, but HTML already provides us with an accessible method to communicate the purpose of the link via the alt text. We're specifying that the image is the brand logo and clicking it will take us to the home page.

More info: https://htmhell.dev/adventcalendar/2024/1

3. Logo and heading

<a href={site.url} class="brand-identity">
  <img src="https://example.com/logo.svg" class="brand-identity__logo"  alt="" />
  {site.name}
</a>

Here we use an empty alt tag to let the browser/screen reader know that this image is decorative and we don't need it to be announced. That leaves just the site name to be announced, just like we had in example #1.