Logo accessibility problems

I've found detail specification on W3C site that explains what should be done in this case:

Example 1: Image used alone as a linked logo

<a href="https://www.w3.org/">
  <img src="w3c.png" alt="W3C home">
</a>

Example 2: Logo image within link text

<a href="https://www.w3.org/">
  <img src="w3c.png" alt=""> W3C Home
</a>

We do not have 'Example 2' case for now, because we are rendering site_name in a separate link. This makes the question should we render site_logo and site_name in the same link tag? Olivero core is also rendering site_logo and site_name as two separate links.

So our case is only 'Example 1' and based on this we should have a link without a title tag and inside of that link we should have img tag with alt attribute. This is the same as Olivero theme is doing in `block--system-branding-block.html.twig` implementation and IMHO we should do the same.

Inline SVG logo case

This is a special case when above solution will not work. I've found a good page which discuss this problem in details and explains a correct solution. Here is how this solution should work:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" ... aria-describedby="my-title my-descrip">
  <title id="my-title">Heart</title>
  <desc id="my-descrip">The shape of a red heart</desc>
  <path d="M50 (...) 8.585z" fill="#dc0000" stroke="#dc0000"/>
</svg>

We need to add two information to SVG, a `title` tag and `aria-describedby`attribute to `svg` tag. Additionally we can use desc tag for bigger explanation if needed, but we do not have this info by default.

Recommendation on mdn is a bit different, it explains two cases one for a title tag and another for a desc tag:

- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc

Basically both elements can be used to describe SVG image, but title tag browser can use it to show a tooltip. On a11y-101 site, screen readers tests show that more screen readers support title tag then desc tag. It seems that we should add just a title tag for now with translated 'Home' label.

The question is how to do it, we have two options:

1. Process SVG content in `bs_bootstrap_preprocess_block()` and use regular expressions to inject needed data.
2. Add documentation that describe this process, add a warning about this on theme settings page, when user is using inline SVG for logo, and provide a link to documentation. Basically we are relying on a user to provide correct SVG with aria-describedby and title.

Not sure what is a best approach, if we go with 1. we need to first check if aria attribute and title tag exist before injecting them. 2. is easier to implement and translation of title tag is also supported because we support logo variations by language.

Here is a patch that should fix the first part of the problem - missing alt tag for a case when logo is SVG image.

Looking at this one more time we already have `$logo_attributes` and there is no need to use it for alt tag.

See also this discussion on slack: https://drupal.slack.com/archives/C0D5GJZ8B/p1678137662118929, based on that, an aria-label (or label) on the a around the inline svg would be sufficient and a lot easier to handle.

Checked all new resources and slack discussion, and now I am just more confused than before ;)

At least this one thing is clear:

> rel="home" btw is apparently in draft status since 2005 and nobody except opera seems to provide any support for it:

Checked also on https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel and https://html.spec.whatwg.org/multipage/links.html#linkTypes and there is no mention of rel `home` value. I guess we should remove it then.

So it make sense to remove this one.

And for the rest...

> Having an image with alt describing it's a logo of the site, and the link described itself as a link to home seems sensible to me, but I'm not an export on accessibility.

After reading everything and doing some local test with a browser I am concluding next things:

1. What ever we decide we need to add alt to logo image, so we do not have a validation error. Putting something like 'Site logo' as @Berdir suggested makes sense. Or we can put empty alt tag to avoid error and do not describe image.

2. We can use `a.title` attribute to additionally explain the link, to show title in tooltip, and it could help with SEO. Because logo link does not have text then we can use title attrib to explain to user where logo link is going. However, if this is true then wouldn't be better to use something like 'Back to home page' instead of just 'Home'?

However, `a.title` is not doing anything for accessibility https://www.w3.org/WAI/WCAG20/Techniques/ua-notes/html#H33: "Current user agents and assistive technology provide no feedback to the user when links have title attribute content available.".

Based on all this IMHO it is totally not important for this issue and generally are we going to put title attribute on link or not. I don't see any SEO benefits because we are targeting home page of the same site. Having a tooltip is cool but tooltip will not work for touch screens and screen readers.

Additionally, I could see a potential problem if we have something like this

a.title="Back to home page"
  img.alt="Site Logo"

In this case screen reader will use img.alt text to read the meaning of logo link and this looks wrong to me - yes this is a site logo image, but it does not explain what actual link is doing. Maybe this is the reason why core templates decided to use 'Home' on img.alt?

If we are going fully with this it seems to me we should also use a.aria-label="Back to home page" to properly explain what this link is doing for accessibility technologies, and override img.alt, correct?

4. Now for inline SVG image, the only way to avoid preprocessing SVG image and describe image inside of it is to use `aria-label` attrib on the surrounding link as @Berdir and slack discussion suggested. BUt here we have the same dilema, what to use for a value of aria-label - are we going to put 'Site logo' or 'Back to home page' - for me it make sense to put 'Back to home page'.

5. For logo image of type SVG (not inlined) but regular image tag we should also add role="img" as explained in https://a11y-101.com/development/svg so assistive device are not confused in this case.

So based on all this we have two options

A) Keep all attribs

1. Logo is a plain image:

<a href="/" title="{'Back to home'|t}" aria-label="{'Back to home'|t}">
  <img src="logo.png" alt="{'Site logo'|t}" />
</a>

2. Logo is a SVG image:

<a href="/" title="{'Back to home'|t}" aria-label="{'Back to home'|t}">
  <img src="logo.svg" alt="{'Site logo'|t}" role="img" />
</a>

3. Logo is an inline SVG image:

<a href="/" title="{'Back to home'|t}" aria-label="{'Back to home'|t}">
  <svg ...>
  </svg>
</a>

B) Simplify stuff a bit

To simplify stuff a bit for first two cases we can remove a.title and a.aria-label and move 'Back to home' to img.alt

1. Logo is plain image:

<a href="/">
  <img src="logo.png" alt="{'Back to home'|t}" />
</a>

2. Logo is SVG image:

<a href="/">
  <img src="logo.svg" alt="{'Back to home'|t}" role="img" />
</a>

3. Logo is inline SVG image:

<a href="/" aria-label="{'Back to home'|t}">
  <svg ...>
  </svg>
</a>

Yes we are not describing logo image correctly but I don't think it is that important for this case. The important thing is that we are describing things correctly for screen readers and all the HTML is valid.

I am totally OK if we decide to go with solution "A) Keep all attribs", but I would like that @Berdir check this one more time before we implement this.

Note that I found out this morning about ✨ Add GUI to configure the site's logo alt attribute Needs work . if that get committed to the core we would need to update our changes here.

And found #1270598: Decide on appropriate alt text for default logo → , a bit older issue, but that issue or some follow-up introduced current 'Home' string that we see. But reading all the stuff and related webaim mail thread http://webaim.org/discussion/mail_message?id=18547 I still don't see a definite answer to this.

I think I prefer A). As you said, title is not really relevant for accessibility or SEO, so we could also just do aria-label and image alt, but I guess having a little bit of context for users who can see a tooltip also doesn't hurt. only small issue I see is that it results in a new, likely not yet translated text on existing sites, but I can live with that.

New patch based on A) version. Also did some improvements for maintenance page logo.

Committed.

Automatically closed - issue fixed for 2 weeks with no activity.