Replacing H1 Text with a Logo Image: Best Method for Seo and Accessibility

Replacing H1 text with a logo image: best method for SEO and accessibility?

You're missing the option:

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

title in href and img to h1 is very, very important!

seo - images and h1

SEO is speculative at best.

Generally the accepted convention is to use where appropriate and you won't suffer. For example, your code I would write something like this:

<div id="hdr-top-logo">
 <h1>                   
  <a href="/" title="Blahblah.com logo">
   <img src="logo.jpg" alt="Blahblah logo" />
  </a>
 </h1>
</div>

The benefits of actually having the text instead of the logo won't be much, if anything.

Note: alt + title should be descriptive, so don't just stuff a bunch of keywords in there, otherwise you will suffer SEO wise.

Logo as site first heading according to WCAG

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

<img src="#" alt="cartoon">

<img src="cartoon.jpg" alt="cartoon" name="cartoon">