Logo alt-Title not a11y/Screenreader compliant

[Molochem]

When looking at the alt-Title of the Logo-Image, it displays the Site-Title of the Site-Root.

To Reproduce Hover the Page-Logo or Inspect the Logo with the Browser-Inspector

Expected behavior It should be displaying something like "Back to Homepage" to make it a11y-compliant and Screenreader-accessible

Screenshots On Mouse-Over In Inspector

This happens in any Browser

I am currently working on a fix

[davisagli]

Reopening since comments on https://github.com/plone/volto/pull/5722 revealed a need for more discussion.

[stevepiercy]

I had to get some authoritative information, and rethink this. It seems that no one had it 100% correct. We'll need to get agreement before work begins.

A logo is a brand or identity of an entity, not an action.

Usually the logo is hyperlinked to the home page, but sometimes not, such as when the visitor is on the home page. I think that is exactly what this code does:

https://github.com/plone/volto/blob/5242643d00bacc9cd460a198dbfffd0217bc2c11/packages/volto/src/components/theme/Logo/Logo.jsx#L40-L46

You can verify by visiting the home page and any other page on the Plone demo site and viewing source.

• https://demo.plone.org/
• https://demo.plone.org/test

When using an image for a link, then alt text performs the function of link text. The surrounding anchor tag <a>, if present, should inform the visitor of what they will see if they click the link. For example:

<a href="/" title="Home page of entity_name">
  <img src="/img/logo.svg" alt="Home page of entity_name" title="Home page of entity_name">
</a>

When the logo is not hyperlinked, alt and title should be adjusted.

  <img src="/img/logo.svg" alt="Logo of entity_name" title="Logo of entity_name">

Note that "go to " or "visit " are deemed as uninformative link phrases, such as "click here".

[JeffersonBledsoe]

Adding my 2 cents: GOV.UK Use the logo as the homepage link. They use an image with hidden text of GOV.UK inside of it so the image is semantically correct on it's own, but then apply an aria-label with a value of Go to the GOV.UK homepage. I've used this pattern on a couple of sites and it seems to work pretty well.

Usually the logo is hyperlinked to the home page, but sometimes not, such as when the visitor is on the home page. I think that is exactly what this code does:

I think the case when somebody has customised the site and doesn't want the logo to be hyperlinked is interesting though. Should we assume that if somebody has customised the site, they will carry the correct semantics over? Or should there be a config option for us to handle this a little more automatically for integrators/

GOV UK markup below:

<a
  class="..."
  id="logo"
  aria-label="Go to the GOV.UK homepage"
  href="https://www.gov.uk"
>
  <span class="govuk-visually-hidden"> GOV.UK </span>
  <span class="govuk-header__logotype">
    <!--[if gt IE 8]><!-->
    <svg
      aria-hidden="true"
      class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown--large-navbar"
      height="30"
      width="36"
      focusable="false"
      viewBox="0 0 132 97"
      xmlns="http://www.w3.org/2000/svg"
    >
      ...
    </svg>
    <!--<![endif]-->
    <!--[if IE 8]>
      <img
        src="/assets/static/govuk-logotype-crown-66ad9a9b8fca42cf0ba18979eef6afc2e8056d5f158ca9b27ce9afdf852aae87.png"
        alt=""
        class="govuk-header__logotype-crown-fallback-image"
        width="36"
        height="32"
      />
    <![endif]-->
  </span>
</a>

[erral]

We have been working for ONCE, the Spanish Blind People Association. They mainly use JAWS for testing. They have their own a11y unit with several rules (although sometimes questionable :wink:)

In their website they follow the following approach:

Home page:

<a title="Página de inicio - Web de la ONCE." accesskey="3" href="https://www.once.es">
      <img src="https://www.once.es/logo.png" alt="Logotipo de la Web de la ONCE." title="Logotipo de la Web de la ONCE.">
</a>

Inner page

<a title="Página de inicio - Web de la ONCE." accesskey="3" href="https://www.once.es">
       <img src="https://www.once.es/logo.png" alt="Logotipo de la Web de la ONCE." title="Logotipo de la Web de la ONCE.">
</a>

Although it is in Spanish, I will try to explain:

• The alt attribute of the img tag says "Logo of the