0

I have two logo's in my site header.

I like the solution here: Replacing H1 text with a logo image: best method for SEO and accessibility? :

Solution: According to Matt Cuts (and some other comments) the best solution is to use an image with alt and title attributes. The alt attribute is for SEO and the title attribute is for accessibility. Using an image also makes sense for semantic markup. A company logo is actually an important piece of content.

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

How to have this with 2 logo's?

<h1>
   <a href="http://stackoverflow.com">
     <img src="logo1.png" title="Click to return to Stack Overflow homepage" alt="logo1 " />
  </a>
  <a href="http://stackoverflow.com">
    <img src="logo2.png" title="Click to return to Stack Overflow homepage" alt="logo2" />
  </a>
</h1>

would the h1 then be: logo1 logo2?

Community
  • 1
  • 1
user2160744
  • 1
  • 2
  • 1
    Please show where Matt says the `title` is good. The title attribute should not be used because assistive technology handles it differently. I have a few answers talking about this. – Ryan B Mar 12 '13 at 14:18
  • Do you have a real example for the use case? What would these two logos contain? – unor Mar 13 '13 at 14:13

2 Answers2

2

You shouldn't use h1 as logo, as explained by Harry Roberts (http://csswizardry.com/2013/01/your-logo-is-still-an-image-and-so-is-mine/).

If you want to use two logos, just use two links.

Jakob Plöns
  • 33
  • 5
  • 1
    If the logo represents the site title, you should use `h1`. Otherwise your page outline might be wrong. – unor Mar 13 '13 at 14:08
0

In the case of the two logos, it depends on the context. Are you using two images because they are two different things, ie

<h2>Our Sponsors</h2>
<a><img src="" alt="Google"/></a> <a><img src="" alt="MS"/></a>
<a><img src="" alt="Adobe"/></a>

Or something like:

<a><img src="" alt="Toyota"/><img src="" alt="Corolla"/></a>

If it is th second, you should do:

<a><img src="" alt="Toyota Corolla"/><img src="" alt=""/></a>

For assistive technology, the first Toyota Corolla example will read as:

Link image toyota image corolla

and the second way:

Link image Toyota corolla.

Some say using null alts (alt="") is bad for accessibility and/or SEO. This is false. If an image is used for decorative purposes, a null alt attribute should be used, because all it does is add unneeded chatter. Once upon a time, search engines used to ding people for using null alt, but not anymore.

Ryan B
  • 3,364
  • 21
  • 35
  • Regarding the 2nd example: if a screen reader user would want to download the image, he would think that the first `img` is about "Toyota Corolla", but instead it is about "Toyota" only. Same for bots (like search engines). – unor Mar 13 '13 at 14:11