Image in the link to wp-admin in the Altis admin bar has no alt attribute, which triggers an HTML/A11y error

[rianrietveld]

Hey humans. it's me, the accessibility police :-)

I am doing consultancy for a site that runs on Altis. I need to be logged in to test the site for accessibility issues.
And every time I run into this issue in the Altis toolbar with Axe DevTools that keeps bugging me:

Current code:

<a class="ab-item" tabindex="0" aria-haspopup="true" href="https://xxx-dev.altis.cloud/wp-admin/">
  <span class="altis-logo-wrapper">
    <img src="https://xxx-dev.altis.cloud/vendor/altis/cms/assets/logo-white.svg">
  </span> 
  <span class="altis-env-indicator">
     <abbr title="development">dev</abbr>
   </span>
</a>

The issue:
<img src="https://xxx-dev.altis.cloud/vendor/altis/cms/assets/logo-white.svg">
has no alt attribute, which is an HTML syntax error and also an accessibility error.
If an image has no alt attribute, the screen reader will announce the filename. In this case, the screen reader will announce:
"link logo-white dev". Pretty useless :-)

If you want no alt text, add the alt attribute, but leave the value empty (alt=""), that way the image is omitted by screen readers (removed from the accessibility tree).

A quick fix is

<a class="ab-item" aria-haspopup="true" href="https://xxx-dev.altis.cloud/wp-admin/">
  <span class="altis-logo-wrapper">
    <img src="https://xxx-dev.altis.cloud/vendor/altis/cms/assets/logo-white.svg" alt="Altis WordPress Admin">
  </span> 
  <span class="altis-env-indicator">
     dev
   </span>
</a>

Give the img an alt attribute alt="Altis WordPress Admin", then the link to /wp-admin/ has a proper accessible name.
"Altis WordPress Admin dev". Describing what is visually shown and where the link leads to.

Bonus points:

• <abbr> is not an allowed element inside a link, see MDN on links
• tabindex="0" is redundant, as links already get keyboard focus by nature.

Steps to reproduce:

1. Go to the frontend of a site running on Altis, log in and watch the admin bar at the frontend.
2. Run aXe DevTools and inspect the errors
3. Or inspect the code :-)

Acceptance criteria:

• ...

[robindevitt]

Thank you @rianrietveld for initially creating the issue. We have merged the PR addressing the change for the alt attribute.

I have also created two follow up issues addressing the points you raised around the tab indexing and <abbr> attribute.

[rianrietveld]

Thanks @robindevitt!