Non-text content / logo

Development Accessibility
1

URL: /
Criterion: 1.1.1 Non-text Content (A)

Most assistive technology currently has no way of providing alternative representation for non-text content on their own. Therefore, text is the preferred format for conveying information on the web. When non-text content such as images are used, they should be accompanied by appropriate text alternatives.

The Indico header logo has no text alternative, and is therefore read as “logo indico bw png” to the user. This also makes it a failure of the SC 3.3.2 Labels or Instructions because the image is also used as link text.

image

I intend to replace the IMG tag with text “Indico”, and supply the logo as a background image.

Because I expect the logo to be customized, I will supply the URL to the background image using a CSS custom property (e.g., style="--logo-src=url(src)") using the same source as the src attribute on the existing IMG tag.

2

Is the logo a relevant part that needs to be accessible? alt="" might be fine there so it’s hidden from screen readers etc.

How do you man to hide the “Indico” plain-text so it’s accessible to screen readers etc. but not visible to human eyes? I guess screenreaders skip elements with visibility:hidden?

3

This is what I mean:

<a href="/" style="--logo-url:'path-to-logo'">Indico</a>

a {
  --logo-url: 'path/to/logo.svg';
  text-indent: -100vw;
  overflow: hidden;
  background: url(var(--logo-url));
  background-position: ....
  // etc...
}