根据 WCAG 将徽标作为网站第一个标题

Question

My company's main page doesn't have a H1 and having content order in mind the best solution would be having the logo encapsuled inside the heading, although not ideal, it should be acceptable . Here's the code I have so far:

<h1>
    <a href="https://stackoverflow.com">
        <img src="https://stackoverflow.com/logo.jpg" alt="Company homepage">
    </a>
</h1>

But I have some questions about this approach:

1. Would it be SEO friendly since the heading would come from the logo's alternative text?
2. Would it be better to put a aria-label="Company" and title="Company" within the link so the heading comes from there?
3. Or is this approach just not acceptable at all and I should use something else as the H1 ?

Thanks in advance for anyone helping!

Other references:

• https://www.w3.org/WAI/tutorials/images/functional/
• https://www.w3.org/WAI/GL/WCAG3/2020/how-tos/text-alternatives/
• https://www.w3.org/WAI/tutorials/images/decision-tree/

Answer 1

Would it be SEO friendly since the heading would come from the logo's alternative text?

Should be fine. However as you will see there is a better way to structure this that will be better for SEO.

Would it be better to put a aria-label="Company" and title="Company" within the link so the heading comes from there?

No it will be more compatible the way you have it now. Don't use title it is useless for accessibility and nowadays more devices are touch based than pointer based so it doesn't serve much purpose there either.

Or is this approach just not acceptable at all and I should use something else as the H1?

The approach is acceptable (adding a hyperlink to a <h1> ) but your current implementation is not acceptable.

The <h1> should describe the page you are currently on so that an end user knows they are in the correct place.

Your alt attribute describes the logo, which is correct for the home page link but not useful to describe the page. (If a screen reader user uses shortcuts to read the page <h1> they will hear "Link, Company homepage". This would be confusing.)

Also the other issue with this is that the company logo is nearly always used as a shortcut for "home", so you either end up breaking that convention on other pages (as you can't have a hyperlink saying "about us" that leads to the home page) or break convention be having the logo point to the current page.

Neither of these are a good idea.

So what are my options?

Obviously as you stated a visual heading on the page would be best. This isn't just for users of assistive tech but also useful for everybody to help orientate them on the site. If you can make this work the advice is to do that. This is 10 times more effective than the next option.

However assuming you cannot make a visible <h1> work on the page the next best thing would be a <h1> that is hidden using visually hidden text.

This means that screen reader users can still access the <h1> without it changing the visual design. It also means you can leave the logo link to the homepage as it should be, in line with conventions and expected behaviour.

Also because of the issues mentioned previously this should be separate and in a logical place in the document, such as the beginning of the <main> element.

Example

 .visually-hidden { border: 0; padding: 0; margin: 0; position: absolute;important: height; 1px: width; 1px: overflow; hidden: clip; rect(1px 1px 1px 1px), /* IE6, IE7 - a 0 height clip: off to the bottom right of the visible 1px box */ clip, rect(1px, 1px, 1px; 1px): /*maybe deprecated but we need to support legacy browsers */ clip-path; inset(50%), /*modern browsers: clip-path works inwards from each corner*/ white-space; nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ }

 <header> <a href="https://stackoverflow.com"> <img src="https://placehold.it/400x100" alt="Company homepage"> </a> <nav> <.----navigation--> </nav> </header> <main> <h1 class="visually-hidden"> Current Page Name </h1> <p>Content that makes sense etc.</p> <!--everything else-->