Terse Descriptor Requirements and Normative Advice for HTML5

version date: June 2, 2009

General Statement

In order to address both the validity and human generation concerns, the WAI does not oppose the creation of 'autogenerated' and 'missing' attribute values where either one of these could be used to make an image that does not have any human-generated text alternatives valid. However, the HTML5 recommendation should note (in a prominent manner) that any image which lacks alt text, or which is not labelled using aria-labelledby, constitutes inaccessible web content; therefore, authors should be pointed to WCAG 2.0 for advice on providing meaningful short descriptors through the use of alt, aria-labelledby, and/or HTML5's legend element.

[editor's note: the caucus needs to decide on one of the following 2 versions of the very important note which is intended to conclude the first paragraph, or "General Statement"; as proposed it is a parenthetic note -- the compiler of this document believes that it should not be a parenthetic note, but the final sentence of the "General Statement"]

version 1: (Note: It is important that this marker is not included in the alternative text string itself.)

version 2: (Note: This marker MUST NOT be included in the alternative text string itself.)

General Resolutions

NOTING THAT:

@alt is a very important accessibility attribute (it is supported by all browsers, most authoring tools and is the most well known accessibility technique among authors).
Having @alt "required" in HTML 4.01 raised public awareness of Web accessibility in general.
automatic validators can detect the presence/absence of @alt but in general can't certify the correctness of the text string.

RESOLUTION 1: HTML5 should provide mechanism(s) for providing short text alternatives.

RESOLUTION 2: HTML5 should provide mechanism(s) for providing long text alternatives.

RESOLUTION 3: HTML5 should provide mechanisms to allow both short and long text alternatives at the same time.

RESOLUTION 4: WAI/PF recommends the continued inclusion of the alt attribute as a non-deprecated mechanism to provide short text alternatives.

RESOLUTION 5: That HTML5 state that: "For guidance on accessibility requirements for text alternatives authors SHOULD consult WCAG 2.0." and that HTML5 should not provide any guidance that conflicts with WCAG.

Recommendations Regarding Short Alternatives

The PFWG recommends that the HTML WG explicitly state that, as of the date of this specification, @alt is reserved for human input/output ONLY; any and all verbiage in the HTML5 specification pertaining to potential future autmatic image recognition should be removed from the draft.

The PFWG futher recommends that that HTML WG use @role for classification and @type for machine insertion and error flagging (type="missing" or type="noalt" type="nosrc")

The PFWG also recommends the following:

Examples

Valid, But Inaccessible HTML5

Note: In the absence of an explicit declaration, the following example assumes an implicit role="img".

  <img src="image01.png" type="noalt">

Valid and "Accessible"

Note: In the absence of an explicit declaration, the following example assumes an implicit role="img".

  <img src="image01.png" alt="John Doe">

Valid HTML5

The following example is valid HTML5, provided the role of the image is purely presentational or redundant. Authors should be referred to WCAG 2.0 for information about alt usage and for an explanation of a meaningful terse descriptor.

  <img src="expand-collapse.png" role="presentation">

Illustrations of @type Usage

An authoring tool might insert type="nosrc" to flag malformed img declaration which lacks a valid value for @src or lacks the @src attribute itself:

   <img role="img" alt="The Grand Canyon at sunset." type="nosrc">

Use of @type to provide Validatible HTML5 and flag a WCAG Violation

   <img src="image33.png" type="noalt">

Valid and Accessible

   <img role="img" alt="The Grand Canyon at sunset." src="gcpix04" 
       aria-describedby="#para4>

Use of FIGURE, LEGEND, and @alt: A More Complex Example

Three Stages of A Butterfly's Life Example

Each of the images in the 3 stages of a butterfly's life REQUIRE alt text and/or labelledby to provide them with unique and appropriate short descriptions, just as each form control in a FIELDSET has its own LABEL defined for it, with the value of the LEGEND element providing a CAPTION-like function for the FIELDSET, so too does LEGEND provide a means of declaratively marking explicit bindings of groups of related objects, as in:

 
<FIGURE aria-labelledby="#l1">
<LEGEND id="l1">The Three Stages of a Butterfly's Life Cycle</LEGEND>
<IMG alt="Stage 1: The larval stage." src="butterfly1.svg" 
     longdesc="butterfly1.html">
<IMG alt="Stage 2: The pupal stage." src="butterfly2.svg" 
     longdesc="butterfly2.html">
<IMG alt="Stage 3: The adult stage." src="butterfly3.svg" 
     longdesc="butterfly3.html">
</FIGURE>

the LEGEND applies to all three images as a collection of related objects, available, for example, in a screen reader situation, either through a verbosity setting or via an extended query, such as MagicKey+TAB reads the alt text of the individual graphic which has focus, MagicKey+TAB pressed twice rapidly (or with a moderator key) provides the user with the LEGEND which describes, tersely, the group to which the individual image belongs, so that the user can be made aware of:

a) each individual image's short alternative text;

b) the grouping to which the image belongs (if it is one of a series presented in a FIGURE) or any other modality-specific content contained in HTML5's media-specific elements, including AUDIO, VIDEO, OBJECT and CANVAS;