CODEWITHSUNDEEP
htmlattributessemantic-markup
P-God Emmanuel
P-God Emmanuel

Reputation: 49

Why do we not have role=logo in HTML?

I'm not a fan of using images for site logos, I prefer using text with a designed font style... Since they are just text, browsers and crawlers might not understand what it stands for and I keep wondering how I can initialize my text-based logo to be recognized by HTML.

So I thought of doing something like this:

<h1 role="logo">Stack Overflow</h1>

But this isn't correct because there is nothing like role=logo in HTML.

How can I do this?

Upvotes: 0

Views: 653

Answers (2)

Sean
Sean

Reputation: 8025

If you want browsers and assistive technologies to interpret something as an image, you can use the ARIA img role. But don't place this on the <h1> element, because the role="img" attribute will replace the semantics of the heading with an image. Instead wrap it in a <span> and place the role attribute on it, in order to preserve the heading. Also, don't forget your aria-label attribute.

Don't do this:

<!-- don't do this -->
<h1 role="img" aria-label="Logo">Logo</h1>

<!-- because it gets interpreted as this -->
<img alt="Logo">

Instead, if you must:

<!-- if you must, do this -->
<h1><span role="img" aria-label="Logo">Logo</span></h1>

<!-- because it gets interpreted as this, preserving the heading -->
<h1><img alt="Logo"></h1>

However, I can't think of any tangible benefits to forcing browsers to see your text logo as an image. You're fine just leaving it as a normal <h1>.

Upvotes: 1

raina77ow
raina77ow

Reputation: 106365

It seems your use case is covered by existing ARIA img role. Quoting the docs:

Any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img".

Upvotes: 0

Related Questions