Code examples

A heading can serve as a name

<h2>The Princess Bride</h2>
<video-embed>
</video-embed>

An aria-label="Media title" can also be used

<video-embed aria-label="The Princess Bride"></video-embed>

Developer notes

Name

  • A heading (<h1> <h2> <h3>) above the media can serve as a name.
  • aria-label="Media title" on a wrapper element can also be used.

Role

  • Controls should identify as buttons, switches, etc.
  • There are accessible video embed options available

Group

  • Captions are mandatory for spoken audio content
  • This may require the creation of a VTT file
    • There are many options online that will create these for you
  • Transcripts should be HTML based (not a PDF)

State

  • Video should almost never autoplay
  • Media with audio should absolutely never autoplay
  • Controls should identify their state (pressed, checked, selected, etc)

Focus

  • Focus must be visible