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

volto/packages/volto/src/components/theme/Logo/Logo.jsx

Lines 40 to 46 in 5242643

	<ConditionalLink
	href={navRootPath}
	title={navroot?.navroot?.title}
	// In case that the content returns 404, there is no information about the portal
	// then render the link anyways to get out of the Unauthorized page
	condition={!navroot || currentURLIsNavRoot}
	>

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

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 <title of the site>"
• The title attribute of the a tag says: "Home page - <title of the site>"

[stevepiercy]

@erral your code samples appear identical to me.

[erral]

@erral your code samples appear identical to me.

Yes, they are identical, they use the same code in the home page and in an inner page. But in Plone and Volto we remove the link when in the home page

[JeffersonBledsoe]

@erral Very similar technique then to the GOV UK, but using title rather than aria-label means it will read both the image alt text and the title outloud in VoiceOver (maybe others too? I've not tested in JAWS in a while)

[tisto]

@erral @JeffersonBledsoe thank you for your insights. Here is what we would implement for Plone then:

<a title="Front Page" accesskey="3" href="https://www.plone.org">
      <img src="https://www.plone.org/logo.png" alt="Plone Logo" title="Plone Logo">
</a>

[JeffersonBledsoe]

@tisto Looking forward to getting this fixed!
We should however use aria-label over title as aria-label is designed for overwriting the accessible label whilst title is more for appending additional information to the existing (although behaviour isn't consistent). title will get read in addition to the alt text of the image in some screen readers, which isn't what we're after here.
For example, the markup you shared is read as the following on VoiceOver desktop: link, image, Plone Logo. Front Page. To click this link.... While using aria-label instead doesn't read Plone Logo.

Article from Deque examining behaviour if you're interested in some further reading: https://www.deque.com/blog/text-links-practices-screen-readers

Also, some more late-night thinking, is the accesskey needed here?

[tisto]

@stevepiercy having a link behind the logo is a pattern that is used everywhere. I don't think it makes sense to think about a use case where the logo is not linked.

Regarding the wording, I am ok with using "Home" instead of "front page". I don't see much of an issue with including a link to "Home" or itself when the user is already on the front page.

Therefore I do not see where we disagree. :)

[stevepiercy]

I don't think it makes sense to think about a use case where the logo is not linked.

It already exists in Volto. See #5720 (comment). I don't know why it is that way, but using GitHub's blame it appears to be connected handling of 404s. @sneridagh made the change, so perhaps he can fill in details?

I agree with @JeffersonBledsoe regarding aria-label usage instead of title, which is backed by this authoritative source: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8.html

I also question the use of accesskey.

[tisto]

@sneridagh do you know why we support the use case to not have a link behind the logo? I'd say we should get rid of this.

@stevepiercy We plan to use aria-label instead of title. We will not use the accesskey.

[sneridagh]

@stevepiercy @tisto This change was because of the navroot PRs, I appear as author because of merges, probably. @erral was the author, if I remember correctly. We are removing the link in the case that we really are in the root, which linking to itself seemed redundant.

[sneridagh]

BTW, for those who don't know, ONCE is the Spanish association of blind people. They run a very popular lottery in Spain and thus, they are huge and they have lots of resources and moneys. ONCE is REFERENT, for obvious reasons, in executing a11y best practices in their website, and Plone users for a long long time.

So I'd take what they have in there as guideline. I trust on their judgement, and nobody better than them knows screenreaders. Don't spend more energy on this matter, please.

[tisto]

@erral I am confused. I can not imagine any use case where the logo should not contain a link. This is a pattern that users learn and you can not just take away this pattern for a particular use case, just because it would be a link to "itself". Maybe I am missing something here. Could you please elaborate?

[erral]

I would say that the reason was because it was a link to itself, that would led the users to the same place they are currently on. I was trying to see why I removed the link when in home (or navigation root), but I don't see where did I took the code-idea from, because I see that previously we had the link in Volto and in Classic UI too. Although I would say that in the past we had the logo without the link in Classic UI, I couldn't find the reference.

But I don't think it is something really important. The important thing in this issue was where to put the helper text to point the user to the home page, right?

BTW, for those who don't know, ONCE is the Spanish association of blind people. They run a very popular lottery in Spain and thus, they are huge and they have lots of resources and moneys. ONCE is REFERENT, for obvious reasons, in executing a11y best practices in their website, and Plone users for a long long time.

So I'd take what they have in there as guideline. I trust on their judgement, and nobody better than them knows screenreaders. Don't spend more energy on this matter, please.

Well, sometimes (not in this case), their judgement is very questionable :)

[stevepiercy]

But I don't think it is something really important. The important thing in this issue was where to put the helper text to point the user to the home page, right?

I agree. Whether the logo has a link just complicates accessibility implementations. So putting it all together, is this the way forward?

<a href="/" aria-label="Home">
  <img src="/img/logo.svg" alt="Logo of EntityName" aria-label="Logo of EntityName">
</a>

• Always link logo to home page.
• Use appropriate aria-label values.
• No title attributes.

[erral]

But I don't think it is something really important. The important thing in this issue was where to put the helper text to point the user to the home page, right?

I agree. Whether the logo has a link just complicates accessibility implementations. So putting it all together, is this the way forward?

<a href="/" aria-label="Home">
  <img src="/img/logo.svg" alt="Logo of EntityName" aria-label="Logo of EntityName">
</a>

* Always link logo to home page.

* Use appropriate `aria-label` values.

* No `title` attributes.

No to the home page, to the navigation root

[stevepiercy]

No to the home page, to the navigation root

Agreed, as Home is sometimes not /. Is that what you mean? Maybe if I gave a JSX example, instead of HTML, it would have been clearer.

[erral]

No to the home page, to the navigation root

Agreed, as Home is sometimes not /. Is that what you mean? Maybe if I gave a JSX example, instead of HTML, it would have been clearer.

Yes, for instance in multilingual sites, the linked root should be /en or /es or whatever. But this is something that we already have in the Logo component, so the link destination should not be changed.

[JeffersonBledsoe]

I think we're all in agreement on how it should be marked up then! Let's get that PR updated and this merged. Accessibility is a continuous project, we can always refine and improve :)

[Molochem]

I have updated the PR. Tell me what you think.

[sneridagh]

@Molochem Can you also add a PR for removing the conditional link from the Logo component?

[davisagli]

Fixed in #5776