nhsuk/nhsuk-frontend

Header logo "Content with images must be labeled" accessibility warning on firefox

mikemonteith opened this issue · 1 comments

What is the problem?

Firefox accessiblilty tool is reporting that the NHS Logo must have descriptive text (https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names?utm_source=devtools&utm_medium=a11y-panel-checks-text-label#content_with_images_must_be_labeled)

The HTML in question is:

<a class="nhsuk-header__link nhsuk-header__link--service " href="/" aria-label="NHS digital service manual homepage">
        
  <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
    <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
    <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
  </svg>

        <span class="nhsuk-header__service-name">
          Digital service manual
        </span>
      </a>

Attachments

image (2)

We belive that since the logo is wrapped in a link with aria-label="NHS digital service manual homepage", the svg doesn't actually need descriptive text, and this can be considered a false-positive in the firefox accessibility tool.