PF/XTech/HTML5/MediaSpecificElements
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, Section 4.7.10:
- 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:
- CANVAS element defined in HTML5, Section 4.7.11
MUST:
- be a block-level container;
- 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:
- FIGURE element: HTML5 Section 4.7.1
- IMG element: HTML5 Section 4.7.2
- IFRAME element: HTML5 Section 4.7.3
- EMBED element: HTML5 Section 4.7.4
- OBJECT element: HTML5 Section 4.7.5
- PARAM element: HTML5 Section 4.7.6
- VIDEO element: HTML5 Section 4.7.7
- AUDIO element: HTML5 Section 4.7.8
- SOURCE element: HTML5 Section 4.7.9
- Media Elements: HTML5 Section 4.7.10
- CANVAS element: HTML5 Section 4.7.11
- LEGEND: HTML5 Section 4.13.1
- CAPTION: HTML5 Section x.x.x
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:
- MUST be a child of ELEMENT, or
- 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:
- 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;
- 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;
- 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
- HTML5 Issue Collection and Requirements Drafting Index
- XTech Wiki: Issues Which Cut Across Specific Working Groups & Domains
- PF Working Group Member-Confidential Space
- PF Working Group Public Web Space