The right way to markup your navbar logo

The company logo is an essential branding element that usually appears in the top left corner of a website’s navbar. Ironically, it’s an element that often contains accessibility issues. Let’s take a look at how to avoid those issues.

The navbar logos should follow these considerations:

• Has a text description of the logo image
• Has a text description for the link destination
• Should not be wrapped in an H1 tag (in most cases)
• The img element has a role attribute set to “img” (if you’re using SVG)

<a class="navbar-brand" href="/" hreflang="en">
    <img src="./assets/logo.svg" alt="Litz Digital logo" role="img">
    <span class="screen-reader-text">Visit the Litz Digital homepage</span>
</a>

The .screen-reader-text is a CSS helper class that visually hides the element, while still making it available to screen readers. Bootstrap and Tailwind CSS have the .sr-only class, which does the same thing.