Skip to end of metadata
Go to start of metadata

(warning) Note:

This document is not exhaustive and does not cover all possible accessibility metadata FLOE would like to support. This document is intended to aid the development of a Metadata authoring demo.

Content Types

The following tables show the metadata generated by default based on the type of media the user chooses.

Media TypeProperty:ValueExampleScope
VideoaccessMode:visual
accessMode:auditory
<meta itemprop="accessMode" content="visual" />
<meta itemprop="accessMode" content="auditory" />
<video> container
AudioaccessMode:auditory
<meta itemprop="accessMode" content="auditory" />
<audio> container
ImageaccessMode:visual
<meta itemprop="accessMode" content="visual" />
<img> container

Languages

Some metadata properties require a language encoding. For the demo, the following languages will be available:

  • Arabic - "ar"
  • Chinese - "zh"
  • English - "en"
  • French - "fr"
  • Hindi - "hi"
  • Spanish - "es"

Resource: http://rishida.net/utils/subtags/index.php

Panel: Text Descriptions

UI StringUI ComponentPropertySourceExampleScope

"Title"

Text field

name

http://schema.org/Thing

<meta itemprop="name" content="The Problem with Cats" />
<video>, <audio>, <img> container
"Description"Text fielddescriptionhttp://schema.org/Thing
<meta itemprop="description" content="Cats aren't dogs." />
<video>, <audio>, <img> container
  accessibilityFeature:longdescription 
<meta itemprop="accessibilityFeature" content="longdescription" />
<video>, <audio>, <img> container

 

Panel: Video Features

UI ComponentUI ComponentProperty:ValueSourceExampleScope
"Video is high contrast..."CheckboxaccessibilityFeature: highContrast
accessMode: visual

schema.org - Accessibility

<meta itemprop="accessibilityFeature" content="highContrast" />
<meta itemprop="accessMode" content="visual" />
<video> container
"Video contains sign language translation"Checkbox

accessMode: visual
accessMode: auditory
accessibilityFeature:signLanguage

schema.org - Accessibility 
<meta itemprop="accessibilityFeature" content="signLanguage" />
<meta itemprop="accessMode" content="visual" />
<meta itemprop="accessMode" content="auditory" />
<video> container
"Video has flashing visuals... Yes"Radio button (1 of 3)accessibilityHazard:flashingschema.org - Accessibility 
<meta itemprop="accessibilityHazard" content="flashing"/>
<video> container
"Video has flashing visuals... No"Radio button (2 of 3)accessibilityHazard:noFlashingHazardschema.org - Accessibility 
<meta itemprop="accessibilityHazard" content="noFlashing"/>
<video> container
"Video has flashing visuals... Not sure"Radio button (3 of 3)if unknown, do not set property. If property previously set, remove it.
schema.org - Accessibility 
if unknown, do not set property. If property previously set, remove it.
<video> container

Panel: Captions

UI ComponentUI ComponentPropertySourceExampleScope
"Web link"Text fieldhasAdaptation:urlhttp://www.w3.org/wiki/WebSchemas/Accessibility
<track itemprop="hasAdaptation" src="http://www.example.com/captions.srt">
<track> element
  accessibilityFeature:captions 
<meta itemprop="accessibilityFeature" content="captions" /> 
<video container"
"Language"Auto completing drop-down text fieldinLaguage:[BCP-47 value]
  • see above "Languages" section for supported languages
schema.org/CreativeWork
<meta itemprop="inLanguage" content="fr-CA" />
<track> container
"Video already contains captions"Checkbox

accessMode: visual
accessMode: auditory
accessibilityFeature:captions

http://www.w3.org/wiki/WebSchemas/Accessibility
<meta itemprop="accessibilityFeature" content="captions" /> 
<video> container

 

Panel: Audio

UI ComponentUI ComponentPropertySourceExampleScope

"This video has an audio track"

Radio button (1 of 3)accessMode: auditoryhttp://www.w3.org/wiki/WebSchemas/Accessibility
<meta itemprop="accessMode" content="auditory" />
<video> container
"This video has no audio track"Radio button (2 of 3)(minus) remove: accessMode: auditory  <video> container
"I am not sure if this video has an audio track"Radio button (3 of 3)accessMode: auditory
(if user is unsure, assume there is audio)
http://www.w3.org/wiki/WebSchemas/Accessibility
<meta itemprop="accessMode" content="auditory" />
<video> container
"Dialog or narrative"Checkboxkeyword: dialog
keyword: narrative
http://schema.org/keywords
<meta itemprop="keywords" content="dialog narrative" />
<video> container
"Soundtrack"Checkboxkeyword: soundtrackhttp://schema.org/keywords
<meta itemprop="keywords" content="soundtrack" />
<video> container
"Sound effects"Checkboxkeyword: sound effectshttp://schema.org/keywords
<meta itemprop="keywords" content="sound effects" />
<video> container

Panel: Audio Descriptions

UI ComponentPropertySourceExampleScope

"Web link"

 

hasAdaptation:<url>

accessibilityFeature:audioDescription
inLaguage:[BCP-47 value]

http://www.w3.org/wiki/WebSchemas/Accessibility

http://schema.org/CreativeWork

<video itemscope itemtype="http://schema.org/Movie">
<meta itemprop="accessibilityFeature" content="audioDescription">
    <meta itemprop="hasAdaptation" srclangsrc="http://www.example.com/french.mp3">
    <span itemscope>
         <meta itemprop="inLanguage" content="fr-CA">
<track itemprop="hasAdaptation" kind="descriptions" srclang="fr-CA" src="http://www.example.com/french.mp3">
</span>
</video>
 
 
<video> and <track> element

"Video already contains audio descriptions"

"Language"

accessMode: visual
accessMode: auditory
accessibilityFeature:audioDescription

accessibilityFeature:audioDescription
inLaguage:[BCP-47 value]

http://www.w3.org/wiki/WebSchemas/Accessibility
<video itemscope itemtype="http://schema.org/Movie">
<meta itemprop="accessibilityFeature" content="audioDescription">
    <meta itemprop="inLanguage" content="fr-CA">
</video>

<video> container

 

Panel: Transcripts

PropertiesSourceExampleScope

hasAdaptation:<url>

accessibilityFeature:transcript

http://www.w3.org/wiki/WebSchemas/Accessibility
   <video itemscope itemtype="http://schema.org/Movie">
      <meta itemprop="accessibilityFeature" content="transcript" />
      <meta itemprop="hasAdaptation" content="http://www.somewhere.com/transcript.txt" />

      <source src="movie.mp4" type="video/mp4">
  </video>
<video> container

inLaguage:[BCP-47 value]

url

isAdaptationOf

http://schema.org/CreativeWork
<div itemscope itemtype="http://schema.org/CreativeWork"> 
<meta itemprop="inLanguage" content="en">
<meta itemprop="url" content="http://othersite.com/transcript.txt" />
<meta itemprop="isAdaptationOf" content="movie.mp4" /> /* the content value may be an URL too. */
transcript here
</div>
<div> containing transcript

Examples

  1. A document with a video.
<html>
<head>
   <title>Facts about Dogs</title>
</head>
<body>
   <video>
      <source src="movie.mp4" type="video/mp4">
   </video>
</body>
</html>

 

2. Now adding default metadata: (lines 7-8)

<html>
<head>
   <title>Facts about Dogs</title>
</head>
<body>
   <video itemscope itemtype="http://schema.org/Movie">
      <meta itemprop="accessMode" content="visual" />
      <meta itemprop="accessMode" content="auditory" />
	  <source src="movie.mp4" type="video.mp4"
   </video>
</body>
</html>

 

3. After adding some accessibility metadata: (Lines 7-9)

<html>
<head>
   <title>Facts about Dogs</title>
</head>
<body>
   <video itemscope itemtype="http://schema.org/Movie">
      <meta itemprop="accessibilityFeature" content="highContrast" />
      <meta itemprop="accessibilityFeature" content="signLanguage" /> /* Note: If accessMode:auditory was not present, signLanguage will add it. SignLanguage can only exist if Audio accessMode is present. */
      <meta itemprop="accessibilityHazard" content="noFlashing"/>
      <meta itemprop="accessMode" content="visual" />
      <meta itemprop="accessMode" content="auditory" />
      <source src="movie.mp4" type="video.mp4" />
   </video>
</body>
</html>

 

4.  After adding a caption using the URL text field and specifying a language for the captions: (lines 12-13, 18-19)

<html>
<head>
   <title>Facts about Dogs</title>
</head>
<body>
   <video itemscope itemtype="http://schema.org/Movie">
      <meta itemprop="accessibilityFeature" content="highContrast" />
      <meta itemprop="accessibilityFeature" content="signLanguage" />
      <meta itemprop="accessibilityHazard" content="noFlashing"/>
      <meta itemprop="accessMode" content="visual" />
      <meta itemprop="accessMode" content="auditory" />
      <meta itemprop="accessibilityFeature" content="captions" />
      <meta itemprop="hasAdaptation" content="http://www.example.com/captions.srt" />

      <source src="movie.mp4" type="video/mp4">
        
      <!-- the Caption -->
      <span itemscope>  /* Use itemscope property to denote containment / scope for metadata. */
         <meta itemprop="inLanguage" content="fr-CA">
         <track src="http://www.example.com/captions.srt" kind="subtitles" srclang="fr-CA">
      </span>
  </video>
</body>
</html>

 

5. If the user specifies the video has no audio, accessMode:auditory is removed. (Line 11)

<html>
<head>
   <title>Facts about Dogs</title>
</head>
<body>
   <video itemscope itemtype="http://schema.org/Movie">
      <meta itemprop="accessibilityFeature" content="highContrast" />
      <meta itemprop="accessibilityFeature" content="signLanguage" />
      <meta itemprop="accessibilityHazard" content="noFlashing"/>
      <meta itemprop="accessMode" content="visual" />
      <meta itemprop="accessibilityFeature" content="captions" />
      <meta itemprop="hasAdaptation" content="http://www.example.com/captions.srt" />

      <source src="movie.mp4" type="video/mp4">
        
      <!-- the Caption -->
      <span itemscope>  
         <meta itemprop="inLanguage" content="fr-CA">
         <track src="http://www.example.com/captions.srt" kind="subtitles" srclang="fr-CA">
      </span>
   </video>
</body>
</html>

 

6. User has specified that the video has a soundtrack, sound effects, and dialog: (lines 14-16)

<html>
<head>
   <title>Facts about Dogs</title>
</head>
<body>
   <video itemscope itemtype="http://schema.org/Movie">
      <meta itemprop="accessibilityFeature" content="highContrast" />
      <meta itemprop="accessibilityFeature" content="signLanguage" />
      <meta itemprop="accessibilityHazard" content="noFlashing"/>
      <meta itemprop="accessMode" content="visual" />
      <meta itemprop="accessibilityFeature" content="captions" />
      <meta itemprop="hasAdaptation" content="http://www.example.com/captions.srt" />
      <meta itemprop="accessMode" content="auditory" />                      /* NOTE: accessMode:auditory is added back if user specifies a soundtrack, sound effects, etc. */
      <meta itemprop="keywords" content="soundtrack" />
      <meta itemprop="keywords" content="sound effects" />
      <meta itemprop="keywords" content="dialog" />

     <source src="movie.mp4" type="video/mp4">
        
      <!-- the Caption -->
      <span itemscope> 
         <meta itemprop="inLanguage" content="fr-CA">
         <track src="http://www.example.com/captions.srt" kind="subtitles" srclang="fr">
      </span>
   </video>
</body>
</html>

 

7. Finally, we give our video a title and a description: (Lines 16, 18)

<html>
<head>
   <title>Facts about Dogs</title>
</head>
<body>
   <video itemscope itemtype="http://schema.org/Movie">
      <meta itemprop="accessibilityFeature" content="highContrast" />
      <meta itemprop="accessibilityFeature" content="signLanguage" />
      <meta itemprop="accessibilityHazard" content="noFlashing"/>
      <meta itemprop="accessMode" content="visual" />
      <meta itemprop="accessibilityFeature" content="captions" />
      <meta itemprop="hasAdaptation" content="http://www.example.com/captions.srt" />
      <meta itemprop="accessMode" content="auditory" />
      <meta itemprop="keywords" content="soundtrack" />
      <meta itemprop="keywords" content="sound effects" />
      <meta itemprop="keywords" content="dialog" />

      <h1 itemprop="name">The Problem with Cats</h1>
      <source src="movie.mp4" type="video/mp4">
      <span itemprop="accessibilityFeature" content="longDescription">The problem with cats is that they are not dogs."</span>
        
      <!-- the Caption -->
      <span itemscope> 
         <meta itemprop="inLanguage" content="fr-CA">
         <track src="http://www.example.com/captions.srt" kind="subtitles" srclang="fr-CA">
      </span>
   </video>
</body>
</html>

 

8. Adding Transcripts

<html>
<head>
   <title>Facts about Dogs</title>
</head>
<body>
   <video itemscope itemtype="http://schema.org/Movie">
      <meta itemprop="accessibilityFeature" content="highContrast" />
      <meta itemprop="accessibilityFeature" content="signLanguage" />
      <meta itemprop="accessibilityHazard" content="noFlashing"/>
      <meta itemprop="accessMode" content="visual" />
      <meta itemprop="accessMode" content="auditory" />

	  <meta itemprop="accessibilityFeature" content="transcript" />
      <meta itemprop="hasAdaptation" content="http://www.somewhere.com/transcript.txt" />

      <source src="movie.mp4" type="video/mp4">
  </video>

  <div itemscope itemtype="http://schema.org/CreativeWork">
     <meta itemprop="inLanguage" content="en">
     <meta itemprop="url" content="http://othersite.com/transcript.txt" />
     <meta itemprop="isAdaptationOf" content="movie.mp4" /> /* the content value may be an URL too. */
     transcript here
   </div>
</body>
</html>

 

9. Adding Audio Descriptions

<html>
<head>
   <title>Facts about Dogs</title>
</head>
<body>
   <video itemscope itemtype="http://schema.org/Movie">
      <meta itemprop="accessibilityFeature" content="highContrast" />
      <meta itemprop="accessibilityFeature" content="signLanguage" />
      <meta itemprop="accessibilityHazard" content="noFlashing"/>
      <meta itemprop="accessMode" content="visual" />
      <meta itemprop="accessMode" content="auditory" />
      <meta itemprop="accessibilityFeature" content="audioDescription" />
      <meta itemprop="hasAdaptation" content="http://www.example.com/audio-description.mp3" />

      <source src="movie.mp4" type="video/mp4">
        
      <!-- the Audio Description -->
      <span itemscope>
         <meta itemprop="inLanguage" content="fr-CA">
         <track kind="descriptions" srclang="fr-CA" src="http://www.example.com/french.mp3">
      </span>
  </video>

</body>
</html>
  • No labels