<object> accessiblity audit does not consider alt attribute

[midzer]

Provide the steps to reproduce

1. Run LH on https://shoogle.net/overview/

What is the current behavior?

Accessibility audit <object> does not have [alt] text fails, although relevant element has [alt] text.

When using extra info https://web.dev/object-alt/#how-to-add-alternative-text-to-lessobjectgreater-elements and putting the alt text as text content in audit passes as expected.

What is the expected behavior?

Mentioned audit should pass with [alt] text.

Environment Information

• Affected Channels: DevTools
• Lighthouse version: 6.4.0
• Chrome version: Version 88.0.4315.5
• Node.js version: -
• Operating System: Debian

I would have time to help out fixing the issue.

Cheers
midzer

[patrickhulce]

Thanks for filing @midzer! I can't reproduce this with the latest axe version, so I'm guessing it's been fixed.

Should be addressed by updating to axe 4 in #11643

[patrickhulce]

I made a note for us to double check this is fixed when we update, if it's not we'll come back here to reopen and discuss :)

#11643 (comment)

[midzer]

@patrickhulce Audit still fails for me using latest master on LH 7.0.0

[patrickhulce]

Hmm @midzer I can reproduce in latest axe now, but they have added guidance about why. It seems alt is not sufficient for object elements.

Seems like this is WAI then. If you think it's still not, then an issue with axe would be the appropriate next step. Not sure why I couldn't repro before, sorry! (We probably need to update web.dev docs if this is the case 🤔 )

[patrickhulce]

Next steps for LH team: figure out if this is WAI and if it is, update the web.dev docs.

[tunetheweb]

Just hit the same issue and did some investigating and think that Lighthouse (well axe) is correct to flag this, but documentation could certainly do with flagging this, reasonably common, use-case of using <object> for loading SVGs.

This is fine:

<object>
This is visible text
</object>

However this is not fine:

<object type="image/svg+xml">
This text is not exposed to the accessibility tree
</object>

and neither is this:

<object data="example.svg">
This text is also not exposed to the accessibility tree
</object>

In effect, setting the type or data of the object means anything in the element as it is no longer able to treated it as plain text and so can't be used as the accessible name. You can see this is the case by looking at the Accessibility tree in Chrome Dev Tool.

Therefore the last two examples do need an accessible name (unless it's switched to being presentational with either role="presentation" or aria-hidden="true"), which should be provided by the aria-label, aria-labelled-by or title (note you cannot use the alt attribute on an object element). I can confirm when adding these the audit no longer fails.

@midzer it looks like you've updated your object to be aria-hidden on your site:

<object data="/svg/map.svg" type="image/svg+xml" id="world" alt="World map" aria-hidden="true"></object>

However it probably should be this:

<object data="/svg/map.svg" type="image/svg+xml" id="world" aria-label="World map"></object>

[adamraine]

Merging this into #6146