Home link should have an accessible name

[obulat]

Problem

Currently, the home link has accessible name only on the home page of size md and above:

openverse-frontend/src/pages/index.vue

Lines 16 to 22 in 190d631

	<VLink
	href="/"
	class="relative -left-[6.25rem] hidden rtl:-right-[6.25rem] lg:block"
	>
	<h1>
	<span class="sr-only">Openverse</span>
	<!-- width and height chosen w.r.t. viewBox "0 0 280 42" -->

In the header has no accessible name. Instead of saying the home page, Voice Over reads out all of the URL.

Lighthouse shows the following error:

Description

According to W3C¹, we should add an alt text to the Openverse logo <img> element saying "Openverse home".

Alternatives

GitHub uses an aria-label="Homepage" on the <a> link, and makes the image aria-disabled.
MDN also uses aria-label on the <a> element.
Ariakit uses a span with text "Reakit" that's clipped to a size of 1x1px inside of the <a> element that also has aria-current="page".

Additional context

Implementation

• 🙋 I would be interested in implementing this feature.

Footnotes

1. https://www.w3.org/WAI/tutorials/images/functional/#example-1-image-used-alone-as-a-linked-logo ↩