Tarsnap Website Screen Reader Compatibility

[reece365]

Hello,
On the Tarsnap website, the Tarsnap logo/graphic at the top is inside an <h1> tag. This can cause issues with how a screen reader reads a websites formating. The screen reader expects text to be inside a <h1> tag, not graphics or logos. More information here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names#headings_should_have_visible_text_content

[gperciva]

Thanks for the report. Do you work on accessibility or use a screen reader? I'm aware that firefox reports this an accessibility issue, but I haven't found a definitive reference to back them up.

For anybody skimming these issues, the html in question is this:

<h1><a href="https://www.tarsnap.com/"><img src="images/header.png" alt="Tarsnap - Online backups for the truly paranoid"></a></h1>

or, expanded for readability:

<h1>
  <a href="https://www.tarsnap.com/">
    <img src="images/header.png" alt="Tarsnap - Online backups for the truly paranoid">
  </a>
</h1>

The question of "how should we deal with a website logo?" is an old one. There's a fair amount of discussion here:
https://stackoverflow.com/questions/665037/replacing-h1-text-with-a-logo-image-best-method-for-seo-and-accessibility

There's a few options:

1. do what we have above -- it uses alt, and the whole point of that attribute is to help screen readers. (This is what Matt Cutts said to do in 2009, when he was part of the google search team.)
2. text in html, then use CSS to put the logo on top of the text.
3. text in html, then use CSS to place the text at position -9999px and add a background image at the original location.
4. have both text and <img> in the header, but add display: none to the text.

At the moment, I'm not convinced that options 2-4 are better than option 1.

[reece365]

I'm going to be honest with you, I just saw the issue in Firefox, and I just wanted to make sure that you were aware of the issue. I'm a noob at web design, and don't really have much to add to this, except for this question, how bad for SEO would it be if you just didn't put the logo in a <h1> tag?

[gperciva]

Fair enough. I don't think that we're too concerned about SEO; it's more a question of "what's the best for accessibility and good practice?".

As for having the logo inside <h1> or not... it varies. Wikipedia uses <h1> for the article title, while w3c uses it for the logo (and does the trick of having a background image in CSS). Google doesn't seem to have <h1> at all. If there was any kind of consensus about what's the best thing to do, I'd be happy to change our website to match that. Or if there was an undisputed authority (such as specifying this in a RFC or IETF standard), again I'd be happy to follow that guidance. But I haven't found anything like that (so far?).

That's not to say that the website is perfect; one piece of advice I've seen multiple places is that you shouldn't skip any headings, and our pages currently skip over <h2>. So there's definitely tweaks to be made (in this case, probably using <h2> for the navbar position).