Lighthouse: Ignores "alt" text on <object> element

[lukeed]

Provide the steps to reproduce

1. Run LH on https://pwa.cafe

What is the current behavior?

It fails, saying that <object> elements do not have [alt] text, put prints the failing element _showing_ that it does indeed have an alt attribute with text.

https://twitter.com/lukeed05/status/1046462007841447936

Second Picture

What is the expected behavior?

It should be able to parse the alt text correctly since it exists.

Environment Information

• Affected Channels: Chrome Extension
• Lighthouse version: 3.2.0
• Node.js version: N/A
• Operating System: OSX

[patrickhulce]

I'm not an expert on the object element (as you note it's rarely used these days 😉), but the linked axe docs from Lighthouse have this to say...

Add alternative text to all embedded object elements using either inner text, title attributes, aria-label or aria-labelledby.

It seems like screen readers expect alt text somewhere other than the alt attribute for the object element. If you think this is wrong, feel free to file an issue over in axe-core. We'll pickup anything they change in the next version :)

[paulirish]

Aye. I'd say this flagged a pretty worthwhile issue.

The <object> tag on pwa.cafe is important content and certainly deserves an alt attribute to describe what a screenreader user is missing out on.

@lukeed btw which tool generated the SVG? (_edit:_ ah.. termtosvg.)

[lukeed]

Thank you both @patrickhulce and @paulirish

I'll move the text within the tag body if that's the expected behavior. TBH, I'm not an expert on object either, but I did expect it to warrant an alt tag. I'm a little confused if this is a valid issue or if I should move the content within the tags.

FWIW I'm only using it because Chrome inconsistently renders the SVG text/fonts when used with an <img> tag. Only the monospace font is used btw.

@paulirish Yeah, that one 😆 After a _lot_ of fiddling and customization of the final animation. Overall pretty impressed with it though!

[lukeed]

Thanks~! I agree that inline SVG is the best choice here, but I'll have to circle back to that. It poses a slight challenge during development due to how webpack wants to base64 the SVGs but extract them for production builds.

Gotta play with the defaults for @pwa/core regarding this 🤔

Anyway, I moved the alt text within the object tags & am now back at full 100s – feel free to close this.

Apologies, but thank you both for the help!