Improve spoken navigation of cloud.gov Pages application

[svenaas]

This task documents a findings from https://github.com/cloud-gov/product/issues/2496

The Home link in the cloud.gov Pages application is a key navigational element, but the way it's currently implemented omits relevant context for screen reader users.

The Home link renders as an image containing a logo representing cloud.gov Pages followed by the word "Pages". But this image is not rendered as an img element — it's an SVG background image on the <a> pointing to /. As a result it has no alt attribute, which would otherwise be the natural place to put "cloud.gov Pages" (or "cloud.gov Pages logo").

The Home link does, reasonably, include title="Home" (as well as aria-label="Home") but a screen reader user who has begun navigating with the tab key will not hear the words "cloud.gov Pages".

By comparison, the 18F website addresses both points with

<a href="/" title="Home">
  <img class="usa-logo-img" src="https://18f.gsa.gov/assets/img/logos/18f-logo.svg" alt="18F">
</a>

which macOS voiceover reads as "[visited] link, image, 18F: Home"

Even though cloud.gov Pages includes "Home" inside the anchor tag, macOS voiceover only reads the link as "[visited] link, Home".

We could do the same thing as 18F, but I believe it would be sufficient for cloud.gov Pages to simply change the title attribute to "cloud.gov Pages home".

Acceptance criteria:

• [x] A screen reader user tab navigating to the home link hears "cloud.gov Pages Home".

[svenaas]

Closed with #4137; confirmed on staging.