Design decision 1 - Use SVG with img element instead of object

How to use SVG image in a web page.

Summary

Scope

In web content, when using a SVG image.

Issue

Avoiding a HTML validation error when object element was used to load SVG image and tabindex=-1 was used to ensure the object element do not receive focus.

Recommendation

Load the SVG image with an img elements.

<img src="/../jekyll-theme-primer/assets/logo.svg" alt="" />

Deprecated

Use an object element to load a SVG image.

Migration

Replace the SVG loaded with an object element by an img element.

Example

Should:

<a href="#"><img src="/../jekyll-theme-primer/assets/logo.svg" alt="" /></a>

Was:

<a href="#"><object type="image/svg+xml" tabindex="-1" data="/../jekyll-theme-primer/assets/logo.svg"></object></a>

Test

Run the nu validator on a page that load SVG with object[tabindex=-1] vs img.

Nu validation

wet-boew English home page that use a SVG in the theme header.

Expected result:

To not get the following error:

Error: An element with the attribute tabindex must not appear as a descendant of the a element.

Evidence

The wet-boew theme logo are an SVG image and an object element was used to load it.

See:

Background

The reason a tabindex="-1" attribute was used on SVG <object> elements in the first place was because of #1432 (which was fixed by wet-boew/wet-boew-legacy@cc8b81c). Without that attribute, all browsers attempt to set keyboard tabbing focus inside the <object> element - which isn’t desirable.

Rational

The validator/validator#422 was resolved. One of the commits that fixed it (validator/validator@1c02bc18e7a71d531fcd62e60b4dc2064c753cef) intentionally caused any elements containing tabindex attributes to trigger a validation error when situated within <a>/<button> elements.

Based on my research, validator/validator@1c02bc18e7a71d531fcd62e60b4dc2064c753cef’s behaviour is in line with the W3C’s HTML spec:

So, what does this have to do with WET? It turns out that most of WET 4.0’s themes use SVG site logos that are structured as links containing an <object> element with a tabindex="-1" attribute. In other words, WET is nesting interactive content (<object tabindex="-1">) within other interactive content (<a>), which goes against the HTML spec.

As a result, the following error is now appearing when validating virtually any pages that use WET:

Error: An element with the attribute tabindex must not appear as a descendant of the <a> element.

From line 61, column 1; to line 61, column 83

<object type="image/svg+xml" tabindex="-1" data="./theme-wet-boew/assets/logo.svg">

IMO the best way of fixing this would be to replace the <object> element with <img> in WET’s SVG images and remove the tabindex="-1" attributes. I believe it should work fine in all modern browsers and retain compatibility with the SVG image replacer polyfill.

Printing

If you SVG are a white image, then you will need to consider to apply some CSS filter to provide a printable version of it.

Apply a brightness filter to 0 for an img with only white content. (For more background https://github.com/wet-boew/wet-boew/pull/8282/files#r167673909)

img.fltrbr0 { filter: brightness( 0 ); }