What Alt Text Should a Logo Have? An Accessibility Guide With Examples

The right alt text for a logo depends on what the image does where it appears. The same file can need “Acme home” in a linked site header, alt="" beside visible “Acme” text, or “Certified Acme Partner” inside a section explaining a certification.

Alt text is not a caption and it is not a visual asset inventory. It provides an equivalent purpose or meaning when the image is unavailable or not perceived visually.

Start with the complete component

Ask what a user needs to know or do. If the logo is the only content inside a link to the homepage, the accessible name should identify the destination. W3C's functional-image guidance uses the pattern of an organization name plus “home.”

<a href="/">
  <img src="acme.svg" alt="Acme home">
</a>

If the same link already contains visible text that says “Acme home,” repeating that phrase in the image alt creates a doubled announcement. Make the image decorative within that component:

<a href="/">
  <img src="acme-mark.svg" alt="">
  <span>Acme home</span>
</a>

An empty attribute is deliberate. Omitting alt entirely is different: assistive technology may expose the filename or URL, which rarely helps.

Describe identity only when it adds meaning

For a standalone logo that identifies a sponsor, customer, payment method, certification, or partner, use the name represented by the image. Include extra context only when the page depends on it. “Northwind” may be enough in a grid headed “Customers,” while “Northwind certified partner” may be appropriate when that status is the point.

The word “logo” is often unnecessary because the organization name conveys the useful information. It can be helpful in content specifically discussing logo designs, trademarks, or visual comparisons. Avoid phrases such as “image of” because screen readers already identify the element as an image.

Do not attempt to describe every shape, color, and type treatment unless those visual details matter to the surrounding content. In a design critique, “Blue circular Northwind logo with a white compass” may be relevant. In a navigation bar, it is noise.

Handle repeated and decorative logos

A large faint logo used as a page background or section ornament does not add information and should stay out of the accessibility tree. A CSS background is naturally non-semantic; an <img> used for decoration should have empty alt text.

Repeated logos also need judgment. A brand mark in both the header and footer may be functional in each location if each is a home link. A watermark repeated behind every slide should not be announced repeatedly. Review the reading experience as a sequence rather than evaluating each image in isolation.

Treat inline SVG as a component

An inline SVG does not use an HTML alt attribute. Give the complete link or control a reliable accessible name using visible text, aria-label when appropriate, or an SVG title and correct relationships. Avoid combining several naming techniques that produce duplicated or inconsistent output.

An SVG loaded through <img> uses the image element's alt like other image formats. Text visually drawn inside the SVG should not be assumed to create the right accessible name in every embedding mode.

CSS-generated logos and icon fonts cannot carry normal image alt text. If they perform a function, the surrounding link or button still needs an accessible name.

Test the result, not only the markup

Use the browser accessibility tree to inspect the computed name of the link or control. Navigate by keyboard and with at least one screen reader in the supported environment. Listen for repetition, filenames, ambiguous “home” links, and controls with no name.

Also test with images disabled or the asset URL broken. The purpose should remain understandable. Keep the alternative concise and front-load the important information; longer explanations belong in surrounding text.

Good logo alt text is usually short because the decision process happened before the writing. Identify the purpose, look for equivalent visible text, name the complete interactive component, and remove decorative duplication. That produces a cleaner experience than automatically putting “company logo” on every brand image.