How do I add alternative text to an object?

Question

If I had an object like this:

 <p><object classid="…" height="…" width="…"><param name="…"value="…"/>
 <param name="…" value="…" /><param name="…" value="…" />
 <object data="…" height="…" type="…"><param name="…" value="…" />
 <param name="…" value="…" /></object></object></p>

Where would I put the alt tag so that the user will see text? The object that's being displayed in this code is a video and I've looked online for a solution, but I can't seem to find a clear answer. (The triple dots are just there to replace the code)

What do you mean with "so that the user will see text"? – unor Jan 11 '15 at 15:01 — unor, Jan 11 '15 at 15:01

score 10 · Answer 1 · answered Jul 28 '16 at 09:10

10

Just add alternative text between the tags like this:

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

answered Jul 28 '16 at 09:10

ThomasAFink

1,257
14
25

score 3 · Answer 2 · answered May 11 '22 at 09:59

To provide alternate text for <object> element, for example, to pass Google Lighthouse checks, use aria-label or aria-labelledby attributes, see:

aria-label approach:

<object data="img.svg" type="image/svg+xml" aria-label="Alternative Text">Alternative Text</object>

aria-labelledby approach:

<span id="label-uid">Alternative Text</span>
<object data="img.svg" type="image/svg+xml" aria-labelledby="label-uid">Alternative Text</object>

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(10rem, min-content));
  grid-gap: 1rem;
  align-items: end;
}

.object-wrapper object {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2/1;
  background-color: tomato;
}

<div class="grid">
  <div class="object-wrapper">
    <object data="img.svg" type="image/svg+xml" aria-label="Alternative Text">Alternative Text</object>
  </div>

  <div class="object-wrapper">
    <span id="label-uid">Alternative Text - Label</span>
  
    <object data="img.svg" type="image/svg+xml" aria-labelledby="label-uid">Alternative Text</object>
  </div>
</div>

score 1 · Answer 3 · answered Jan 11 '15 at 08:48

According to the definition of object, the fallback content to be rendered when the object rendering fails is the element’s content. More exactly, it consists of all children of the object element except param elements. In fact, the sketchy code in the question contains such fallback content: the inner object element is fallback content for the outer one. To have a fallback for the fallback, put it inside the inner object element; it can be any content, including text:

 <p><object classid="..." height="..." width="..."><param name="..."value="...">
 <param name="..." value="..." /><param name="..." value="..." />
 <object data="..." height="..." type="..."><param name="..." value="..." />
 <param name="..." value="..." />This is fallback content.</object></object></p>

Note: Being fallback or alternate content means that the text is not displayed when object embedding is successful, i.e. a video presentation is shown.

How do I add alternative text to an object?

3 Answers3