Accessible SVG Logo Component for Etch

When creating SVG logos for websites, accessibility is often overlooked. A logo may be decorative in some situations and meaningful content in others. To support both use cases, this Etch component includes two accessibility modes: Image and Decorative.

Even though this is for a component, the information rearding accessibility would apply to any logo or image.

Image Mode

Use Image mode when the logo appears as standalone content and should be announced by assistive technology.

In this mode, the SVG includes:

• role="img"
• aria-labelledby
• A <title> element

This allows screen readers to identify and announce the logo using the title text provided in the component settings.

Decorative Mode

Use Decorative mode when the logo is already described by a surrounding element, such as a linked site title or branded navigation area.

<a href="/" aria-label="Meaningful text to explain the link destination">
    Logo SVG
</a>

<a href="/" aria-label="Meaningful text to explain the link destination">
    Logo SVG
</a>

In this mode, the SVG includes:

• aria-hidden="true"
• focusable="false"

The logo is ignored by screen readers because the surrounding element already provides the accessible name.

Customizable Properties

The component includes several properties for flexibility:

HFC Color

Controls the color of the HFC portion of the logo.

Accent Color

Controls the color of the A accent mark.

Logo Size

Sets the logo width using any valid CSS value.

• 12rem
• 16rem
• clamp(10rem, 20vw, 18rem)
• var(--size-12)

Accessibility Mode

Choose between:

• Image – Announces the logo to assistive technology.
• Decorative – Hides the logo from assistive technology.

Title Text

The accessible name used when the logo is operating in Image mode.

Title ID

Provides a unique identifier for the SVG title element. This prevents duplicate IDs when the logo appears multiple times on the same page, such as in both the header and footer.

Recommended Usage

By supporting both image and decorative use cases, the component adheres to modern accessibility best practices while remaining flexible enough for use across a WordPress site.