This Wiki page is edited by participants of the HTML Accessibility Task Force. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Task Force participants, WAI, or W3C. It may also have some very useful information.

MediaSpecificElements

From HTML accessibility task force Wiki
Jump to: navigation, search

Towards A Unified Approach to HTML5's Media Specific Elements, version 0.1

Note: All links to the HTML5 draft are pointers to the latest editor's draft of HTML5


Precis

All block level containing media specific elements described and defined in HTML5:

  • AUDIO
  • FIGURE (of which IMG is a child, providing a mapping for backwards compatability with HTML4x's IMG)
  • VIDEO

as well as all generic containers:

in addition to the:

MUST:

  1. be a block-level container;
  2. be capable of content-negotiation, so that the most suitable file available is made available to the user, in accordance with user and user agent preferences and capabilities

References:

Part 2: The Media Specific Element Model

 
<ELEMENT>
<LEGEND></LEGEND> - required (maps to HTML4's @alt)
<CAPTION></CAPTION> - required
<DESC></DESC> - required (maps to HTML4's @longdesc)
<HELP></HELP>
</ELEMENT>


ELEMENT: the media-specific block level element

In this preliminary outline of a standard and consistent approach to HTML5's media specific elements, the abstracted element, "ELEMENT", represents the following element names:

  • AUDIO - may contain FIGURE
  • EMBED
  • FIGURE - may contain IMG
  • OBJECT
  • VIDEO

In addition, the use of a role attribute for media-specific block level elements will assist in machine-processing.

Child Element 1: LEGEND

The LEGEND element is the successor to @alt (a terse descriptor), but with support for rich markup, as it is a nested block level element

NOTE 1: Either the LEGEND element:

  1. MUST be a child of ELEMENT, or
  2. a for/id relationship between LEGEND and ELEMENT must be defined any LEGEND that is not nested in the ELEMENT container that provides a re-useable LEGEND;

NOTE 2: in the case of FIGURE, the value defined for the LEGEND element MUST mirror the value defined for the alt attribute associated with the embedded IMG; however, the equivalent content defined for the alt attribute can be marked up semantically using the LEGEND element; this provides a basis on which to map IMG to FIGURE, instances of IMG alone SHOULD be rendered as if encased in a FIGURE container

NOTE 3: an id/for relationship has been defined for the LEGEND element so that the LEGEND can appear outside of the FIGURE element; LEGEND can also be reused using the @headers value model of space delimited values, so that a single LEGEND can be associated with multiple instances of the same image (for example: for="w3c-logo w3c-logo-blue w3c-logo-small")

The Model So Far

 
<ELEMENT>
<LEGEND></LEGEND>
</ELEMENT>


or 


 
<LEGEND for="foo1"></LEGEND>
<ELEMENT id="foo1">
</ELEMENT>


Child Element 2: CAPTION

The CAPTION element, is a child of a media specific element. The CAPTION contains text associated with, commenting upon or describing the contents of the media specific element. This is text that will be displayed visually on the visual and paged media canvases; its purpose is not to provide a description of the contents of the media-specific ELEMENT, although it may do so in a terse manner as a means of identifying the media-specific element; its purpose is to provide a titling mechanism identical to the CAPTION element which is a child element of TABLE; (refer to HTML5 Section 4.8.3 The caption element) 


 
<LEGEND for="foo1">Franklin Delano Roosevelt delivers the <cite>Four 
Freedoms</cite> address to a joint session of Congress, January 6, 
1941.</LEGEND>

<FIGURE id="foo1"><IMG 
alt="Franklin Delano Roosevelt delivers the Four Freedoms address to a joint session of Congress, January 6, 1940." 
src="fdr-4free.png">

<CAPTION>
<p><abbr title="Franklin Delano Roosevelt">FDR</abbr> addresses a joint 
session of Congress, January 6, 1941.</p>

<dl>
<dt><a href="http://www.speeches.web/mp3/political/unitedstates/fdr4freedoms19410106.mp3" 
title="listen to Franklin Delano Roosevelt's Four Freedoms Speech, as delivered to Congress on January 6, 1941 (MP3 Format)"
>Listen to the Four Freedoms speech (MP3 format/36 minutes, 28 seconds)</a></dt>

<dd>this audio is in the public domain;</dd>
<dd>clip provided courtesy of: <a href="http://www.speeches.web/">The 
Internet Speech Archive</a></dd>
</dl>
</CAPTION>


Child Elements 3: DESC

The DESC element -- which SHOULD be mapped to the longdesc attribute of IMG -- provides an area in which to provide rich "fallback content";

Note 1: The ability to render the DESC as well as the IMG MUST NOT be an either-or proposition. There are documented use cases where simultaneous rendering of the graphic and its long descriptor, in order to provide, for example, a user with a very limited viewport the ability to use the contents of the DESC element as a guide through the graphic.

Example of a DESC (building upon the previous example): 


 
<DESC lang="en">
<p>A black and white photograph of the thirty-second president of the 
United States of America, Franklin Delano Roosevelt, delivering 
the <cite>Four Freedoms</cite> speech before a joint session of 
Congress on January 6, 1941. The photograph is taken from the 
perspective of the Congressmen gathered in the chamber.  At the 
center of the photograph, stands a podium, behind which a 
bespectacled <abbr title="Franklin Delano Roosevelt">FDR</abbr> stands. 
Behind and slightly above the presidential podium is the Speakers' well, 
in which sit both the Speaker of the House of Representatives, Samuel 
Taliaferro Rayburn (<abbr title="Democrat">D</abbr>-<abbr 
title="Texas">TX</abbr>), and the vice-president of the United States, 
John Nance Garner, in his capacity as the President of the Senate.  
Behind the Speaker and Vice-President hangs an American flag with 48 
stars.
</p>
</DESC>
</FIGURE>


or, abstracted: 


 
<LEGEND for="foo1"> ... </LEGEND>
<ELEMENT id="foo1">
<CAPTION> ... </CAPTION>
<DESC> ... </DESC>
</ELEMENT>


Child Element 4: The HELP Element

HELP

Similar to the XForms HINT; this block level element contains information that may be presented to the user in a variety of modes, containing information about the resource, such as file-size, estimated download time; instructions as to how to invoke the resource, etc. (aria-role="alert")

<HELP>File Size: 2.25 MB</HELP>

Note 1: HELP could/should be mapped to any @title defined for an IMG. 


 
<LEGEND for="foo1"> ... </LEGEND>
<ELEMENT id="foo1">
<CAPTION> ... </CAPTION>
<HELP> ... </HELP>
</ELEMENT>


or 


 
<ELEMENT id="foo1">
<LEGEND for="foo1"> ... </LEGEND>
<CAPTION> ... </CAPTION>
<HELP> ... </HELP>
</ELEMENT>


Implications for IMG Processing & Accessibility

required attribues for IMG:

  • alt

optional attributes for IMG:

  • title
  • longdesc

Proposed Mapping Strategy:

  1. the value defined for the mandatory/required alt attribute text -- which is necessary for backwards compatibility -- must be identical to the contents of the LEGEND child element, although the contents of HELP can be marked up;
  2. the value defined for the title attribute for an IMG element must be identical to the contents of the HELP child element, although the contents of HELP can be marked up;
  3. The DESC element must be mapped to the longdesc attribute of IMG, in order to provide an area for rich "fallback content";

Example Using FIGURE

Note: The following example is incomplete; the "real" example is being tweaked and quadruple-checked offline. Apologies for any inconvenience and thank you for your patience. 


 
<FIGURE>
<IMG src="" 
alt="The Great Seal of Australia, 178">
<LEGEND>
</LEGEND>

<CAPTION>
</CAPTION>

<DESC>
</DESC>

<HELP>
</HELP>

</FIGURE>


Part 3: Content-Negotiation and HTML5's Media Specific Elements

See also

Retrieved from "https://www.w3.org/WAI/PF/HTML/wiki/index.php?title=MediaSpecificElements&oldid=2695"