Skip to content

Commit cc405d9

Browse files
authored
Update explainer.md with Accessibility notes and video fallback example. (#111)
1 parent 7d27fbf commit cc405d9

File tree

1 file changed

+32
-11
lines changed

1 file changed

+32
-11
lines changed

explainer.md

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -168,23 +168,39 @@ the element, it should appear as in the image below.
168168

169169
### Fallback content
170170

171-
In the case where `<model>` can not display any of its `<source>` children, it
172-
will fall-back to showing its last non-`<source>` child that is a replaced
173-
element. In the example below, this would mean the contents of the `<picture>`
174-
element would be displayed.
171+
In the case where `<model>` can not display any of its `<source>` children,
172+
it will fall-back to showing its last non-`<source>` child that is a
173+
replaced element. In the example below, this would mean the `<img>` element
174+
would be displayed.
175175

176176
```html
177177
<model>
178178
<source src="fake.typ1" type="imaginary/type-1">
179179
<source src="fake.typ2" type="imaginary/type-2">
180-
<picture>
181-
<source src="animated-version.mp4" type="video/mp4">
182-
<source src="animated-version.webp" type="image/webp">
183-
<img src="animated-version.gif"/>
180+
<img src="animated-version.gif" alt="Ha Ha reaction bubble">
181+
</model>
182+
```
183+
184+
Expanded example that includes `<video>` element in order to account for
185+
localized, accessible video alternatives like Closed Captions (CC/SDH) and Audio
186+
Descriptions (AD).
187+
188+
```html
189+
<model>
190+
<source src="fake.typ1" type="imaginary/type-1">
191+
<source src="fake.typ2" type="imaginary/type-2">
192+
<video controls poster="poster.gif">
193+
<source src="animated-crawl.webm" type="video/webm">
194+
<source src="animated-crawl.mp4" type="video/mp4">
195+
<track kind="captions" src="sdh_en.vtt" srclang="en" label="English (SDH)">
196+
<track kind="captions" src="sdh_ja.vtt" srclang="ja" label="日本語 (SDH)">
197+
<img src="animated-crawl.gif" alt="Probably need the full text of the animated crawl here, or use a text element as the fallback instead of img.">
184198
</picture>
199+
</video>
185200
</model>
186201
```
187202

203+
188204
## DOM API
189205

190206
Each `<model>` element is represented in the DOM as `HTMLModelElement` instances.
@@ -348,13 +364,18 @@ that browser behaviors around loading, autoplay and accessibility should be
348364
honored for the `<model>` element as well, for instance:
349365

350366
- a static poster image may be displayed prior to loading the full `<model>` resource,
351-
- playback may be disabled if the user has set a preference to reduce animations.
367+
- playback may be disabled if the user has set a preference to reduce or stop animations.
352368

353369
Like other timed media, the `<model>` element will provide a DOM API for playing,
354370
pausing, etc.
355371

356-
The `<model>` element has an `alt` attribute to provide a textual description of the
357-
content. Also, the 3D content itself might expose some features to the accessibility engine.
372+
The `<model>` element needs, at minimum, an `alt` attribute (possibly on a fallback img
373+
descendent) to provide a textual description of the content. Likewise, animated models
374+
might include `<video>` elements as fallback, along with the localization and
375+
accessiblity features available via the `<track>` element.
376+
377+
Also, the 3D content itself might expose some features to the accessibility engine, as is
378+
currently being discussed for USD.
358379

359380
## Privacy considerations
360381

0 commit comments

Comments
 (0)