Dieser Inhalt ist derzeit nur auf Englisch verfügbar

Audit object-alt

Ensure <object> elements have alternative text

Impact:

Serious

WCAG-Konformität:

A
WCAG 1.1.1

Issue types:

failure, needs review

Object element rendering non-text content has non-empty accessible name

This rule checks that each `object` element rendering non-text content has a non-empty accessible name.

Applicability

This rule applies to any object element for which all the following are true:

The object element is included in the accessibility tree; and
The object element has no explicit role; and
The object element embeds a resource whose MIME type is either image, or audio or video.

Expectation

Each target element has an accessible name that is not empty ("").

Background

Testing that the accessible name describes the purpose of the object element is not part of this rule and must be tested separately.

When the object resource is not loaded, the fallback content, if present, is rendered as shown in the Inapplicable Example: "This object element does not need an accessible name because it loads no image, audio, or video.". When screen readers encounter an unsupported media format they will also use the fallback content instead of other attributes.

Assumptions

There are currently no assumptions

Accessibility Support

Some screen readers announce object elements even if they do not have an accessible name, while other skip the element. If an object is used to render decorative content, to ensure it is marked as decorative and can be ignored by all major screen readers a presentational role is necessary.

The MIME type of the resource embedded in the data attribute impacts how the accessible name of the object is computed. For example, object embedding image MIME type may use their alt attribute to compute their accessible name, but object embedding audio or video MIME types may not. An object does not officially support the use of an alt so this may behave differently according to the browser used.

Bibliography

Understanding Success Criterion 1.1.1: Non-text Content

Test Cases

Passed

Passed Example 1

This object element which embeds an audio resource has a non-empty accessible name through its aria-label attribute.

<object aria-label="Moon speech" data="/test-assets/moon-audio/moon-speech.mp3"></object>

Passed Example 2

This object element which embeds a video resource has a non-empty accessible name through its title attribute.

<object title="Rabbit animated short" data="/test-assets/rabbit-video/video.mp4"></object>

Passed Example 3

This object element which embeds an image resource has a non-empty accessible name through its aria-labelledby attribute.

<span id="label">W3C logo</span> <object aria-labelledby="label" data="/test-assets/shared/w3c-logo.png"></object>

Passed Example 4

This object element placed off screen, which embeds an audio resource, has a non-empty accessible name through its title attribute.

<html>
	<style>
		.offScreen {
			position: absolute;
			left: -9999px;
			top: -9999px;
		}
	</style>
	<body>
		<object title="Moon speech" data="/test-assets/moon-audio/moon-speech.mp3" class="offScreen"></object>
	</body>
</html>

Failed

Failed Example 1

This object element which embeds an audio resource has an empty accessible name because it does not provide an accessible name through one of title, aria-label or aria-labelledby attributes.

<object data="/test-assets/moon-audio/moon-speech.mp3"></object>

Failed Example 2

This object element which embeds a video resource has an empty accessible name because the title attribute is empty.

<object title="" data="/test-assets/rabbit-video/video.mp4"></object>

Failed Example 3

This object element which embeds an image resource has an empty accessible name because the span element with id="label" is empty.

<span id="label"></span> <object aria-labelledby="label" data="/test-assets/shared/w3c-logo.png"></object>

Failed Example 4

This object element which embeds an audio resource has an empty accessible name because the aria-labelledby attribute references a non-existing id.

<object aria-labelledby="download" data="/test-assets/moon-audio/moon-speech.mp3"></object>

Failed Example 5

This object element has an empty accessible name. The img element inside the object is not used in computing the object's accessible name.

<object data="/test-assets/shared/w3c-logo.png">
	<img src="/test-assets/shared/w3c-logo.png" alt="W3C logo" />
</object>

Failed Example 6

This object element has alt attribute, however this will not create an accessible name. Because of this the accessible name is empty.

<object data="/test-assets/moon-audio/moon-speech.mp3" alt="Moon speech"></object>

Inapplicable

Inapplicable Example 1

This object element has an explicit role of "img".

Note: Object elements with other roles may still require an accessible name. This is tested through other rules.

<object role="img" title="W3C" data="/test-assets/shared/w3c-logo.png"></object>

Inapplicable Example 2

This object element is not included in the accessibility tree due to display:none.

<object data="/test-assets/rabbit-video/video.mp4" style="display: none;"></object>

Inapplicable Example 3

This object element is not included in the accessibility tree due to visibility:hidden.

<object data="/test-assets/moon-audio/moon-speech.mp3" style="visibility: hidden;"></object>

Inapplicable Example 4

This object element is not included in the accessibility tree due to aria-hidden="true".

<object data="/test-assets/shared/w3c-logo.png" aria-hidden="true"></object>

Inapplicable Example 5

This object element is not included in the accessibility tree because it is marked as decorative through role="presentation".

<object type="image/png" role="presentation" data="/test-assets/contrast/example.png"></object>

Inapplicable Example 6

This object element embeds an HTML resource.

<object title="My University" data="/test-assets/shared/index.html"></object>

Inapplicable Example 7

There is no object element.

<audio title="Moon speech" src="/test-assets/moon-audio/moon-speech.mp3"></audio>

Inapplicable Example 8

This object element does not need an accessible name because it loads no image, audio, or video. Instead the img element inside the object is rendered.

<object data="/invalid/url/index.html">
	<img src="/test-assets/shared/w3c-logo.png" alt="W3C logo" />
</object>

Autoren: António Estriga

Finanzierung: WAI-Tools

Assets:

JFK's "We Choose the Moon" speech excerpt is courtesy of NASA.