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?
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>.