如何向对象添加替代文本

Question

如果我有这样的对象：

 <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>

我将在哪里放置 alt 标记，以便用户看到文本？此代码中显示的对象是一个视频，我已经在网上寻找解决方案，但我似乎找不到明确的答案。（三重点只是用来替换代码的）

Answer 1

只需在标签之间添加替代文本，如下所示：

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

Answer 2

要为<object>元素提供替代文本（例如，通过 Google 灯塔检查、使用aria-label或aria-labelledby属性），请参阅：

咏叹调标签方法：

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

ARIA-labelledby 方法：

<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>

Answer 3

根据object的定义，对象渲染失败时要渲染的回退内容是元素的内容。更确切地说，它由object元素的所有子元素组成，param元素除外。事实上，问题中的粗略代码包含这样的回退内容：内部object元素是外部元素的回退内容。要为回退提供回退，请将其放在内部object元素中;它可以是任何内容，包括文本：

 <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>

注意：作为回退或替代内容意味着当对象嵌入成功时不显示文本，即显示视频演示。