Encoding Accessibility Metadata for Floe - Tables and Examples

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 Type	Property:Value	Example	Scope

Media Type

Property:Value

Example

Scope

Video

accessMode:visual
accessMode:auditory

<meta itemprop="accessMode" content="visual" />

<meta itemprop="accessMode" content="auditory" />

<video> container

Audio

accessMode:auditory

<meta itemprop="accessMode" content="auditory" />

<audio> container

Image

accessMode: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 String	UI Component	Property	Source	Example	Scope

UI String	UI Component	Property	Source	Example	Scope
"Title"	Text field	name	http://schema.org/Thing	`<meta itemprop="name" content="The Problem with Cats" />`	<video>, <audio>, <img> container
"Description"	Text field	description	http://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 Component	UI Component	Property:Value	Source	Example	Scope

UI Component	UI Component	Property:Value	Source	Example	Scope
"Video is high contrast..."	Checkbox	accessibilityFeature: 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:flashing	schema.org - Accessibility	`<meta itemprop="accessibilityHazard"content="flashing"/>`	<video> container
"Video has flashing visuals... No"	Radio button (2 of 3)	accessibilityHazard:noFlashingHazard	schema.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 Component	UI Component	Property	Source	Example	Scope

UI Component	UI Component	Property	Source	Example	Scope
"Web link"	Text field	hasAdaptation:url	http://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 field	inLaguage:[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 Component	UI Component	Property	Source	Example	Scope

UI Component	UI Component	Property	Source	Example	Scope
"This video has an audio track"	Radio button (1 of 3)	accessMode: auditory	http://www.w3.org/wiki/WebSchemas/Accessibility	`<meta itemprop="accessMode" content="auditory" />`	<video> container
"This video has no audio track"	Radio button (2 of 3)	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"	Checkbox	keyword: dialog keyword: narrative	http://schema.org/keywords	`<meta itemprop="keywords" content="dialog narrative" />`	<video> container
"Soundtrack"	Checkbox	keyword: soundtrack	http://schema.org/keywords	`<meta itemprop="keywords" content="soundtrack" />`	<video> container
"Sound effects"	Checkbox	keyword: sound effects	http://schema.org/keywords	`<meta itemprop="keywords" content="sound effects" />`	<video> container

Panel: Audio Descriptions

UI Component	Property	Source	Example	Scope

UI Component

Property

Source

Example

Scope

"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

Properties	Source	Example	Scope

Properties

Source

Example

Scope

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

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>