Bugzilla – Bug 283
Try a new way of handling images that the author doesn't know much about.
Last modified: 2009-11-23 17:16:58 CET
Index: source =================================================================== --- source (revision 1971) +++ source (revision 1972) @@ -13123,13 +13123,13 @@ that mitigate this attack.</p> <p>Once the resource has been fetched, if the image is a valid and - supported image, the user agent must <span>fire a <code - title="event-load">load</code> event</span> on the <code>img</code> - element (this happens after <code - title="dom-img-complete">complete</code> starts returning true). If - the fetching process fails without a response from the remote - server, or it completes but the image is not a valid or supported - image, the user agent must <span>fire an <code + supported image, then the image is said to be <i>available</i>; the + user agent must <span>fire a <code title="event-load">load</code> + event</span> on the <code>img</code> element (this happens after + <code title="dom-img-complete">complete</code> starts returning + true). If the fetching process fails without a response from the + remote server, or it completes but the image is not a valid or + supported image, the user agent must <span>fire an <code title="event-error">error</code> event</span> on the <code>img</code> element.</p> @@ -13160,29 +13160,151 @@ <hr> - <p>The element represents the image specified by the <code - title="attr-img-src">src</code> attribute.</p> + <p>What an <code>img</code> element represents depends on the <code + title="attr-img-src">src</code> attribute and the <code + title="attr-img-alt">alt</code> attribute.</p> - <p>When the <code title="attr-img-alt">alt</code> attribute is - present and its value is the empty string, the image supplements the - surrounding content. In such cases, the image may be omitted in the - rendering without affecting the meaning of the document. If the - image is not available, then the element represents nothing.</p> - - <p>When the <code title="attr-img-alt">alt</code> attribute is - present and its value is not the empty string, the image is a - graphical equivalent of the string given in the <code - title="attr-img-alt">alt</code> attribute. In such cases, the image - may be replaced in the rendering by the string given in the - attribute without significantly affecting the meaning of the - document. If the image is not available, then the element represents - that string instead.</p> - - <p>When the <code title="attr-img-alt">alt</code> attribute is - missing, the image represents a key part of the content. Non-visual - user agents should apply image analysis heuristics to help the user - make sense of the image. If the image is not available, the element - represents some indication that the image is missing.</p> + <dl class="switch"> + + <dt>If the <code title="attr-img-src">src</code> attribute is set + and the <code title="attr-img-alt">alt</code> attribute is set to + the empty string</dt> + + <dd> + + <p>The image is either decorative or supplemental to the rest of + the content, redundant with some other information in the + document.</p> + + <p>If the image is available and the user agent is configured to + display that image, then the element represents the image + specified by the <code title="attr-img-src">src</code> + attribute.</p> + + <p>Otherwise, the element represents nothing, and may be omitted + completely from the rendering. User agents may provide the user + with a notification that an image is present but has been omitted + from the rendering.</p> + + </dd> + + <dt>If the <code title="attr-img-src">src</code> attribute is set + and the <code title="attr-img-alt">alt</code> attribute is set to a + string with at least one character whose first character is not a + U+007B LEFT CURLY BRACKET character ({) or whose last character is + not a U+007D RIGHT CURLY BRACKET character (})</dt> + + <dd> + + <p>The image is a key part of the content; the <code + title="attr-img-alt">alt</code> attribute gives a textual + equivalent or replacement for the image.</p> + + <p>If the image is available and the user agent is configured to + display that image, then the element represents the image + specified by the <code title="attr-img-src">src</code> + attribute.</p> + + <p>Otherwise, the element represents the text given by the <code + title="attr-img-alt">alt</code> attribute. User agents may provide + the user with a notification that an image is present but has been + omitted from the rendering.</p> + + </dd> + + <dt>If the <code title="attr-img-src">src</code> attribute is set + and the <code title="attr-img-alt">alt</code> attribute is set to a + string whose first character is a U+007B LEFT CURLY BRACKET + character ({) and whose last character is a U+007D RIGHT CURLY + BRACKET character (})</dt> + + <dd> + + <p>The image is a key part of the content, and there is no textual + equivalent of the image available. The string consisting of all + the characters between the first and the last character of the + value of the <code title="attr-img-alt">alt</code> attribute gives + the kind of image (e.g. photo, diagram, user-uploaded image).</p> + + <p>If the image is available, the element represents the image + specified by the <code title="attr-img-src">src</code> + attribute.</p> + + <p>If the image is not available or if the user agent is not + configured to display the image, then the user agent should + display some sort of indicator that the image is not being + rendered, providing to the user the information regarding the kind + of image that is (as derived from the <code + title="attr-img-alt">alt</code> attribute).</p> + + </dd> + + <dt>If the <code title="attr-img-src">src</code> attribute is set + and the <code title="attr-img-alt">alt</code> attribute is not</dt> + + <dd> + + <p>The image's role in the document is unknown.</p> + + <p>If the image is available, the element represents the image + specified by the <code title="attr-img-src">src</code> + attribute.</p> + + <p>If the image is not available or if the user agent is not + configured to display the image, then the user agent may display + some sort of indicator that the image is not being rendered.</p> + + </dd> + + <dt>If the <code title="attr-img-src">src</code> attribute is not + set and the <code title="attr-img-alt">alt</code> attribute is set + to the empty string</dt> + + <dd> + + <p>The element represents nothing.</p> + + </dd> + + <dt>If the <code title="attr-img-src">src</code> attribute is not + set and the <code title="attr-img-alt">alt</code> attribute is set + to a string with at least one character whose first character is + not a U+007B LEFT CURLY BRACKET character ({) or whose last + character is not a U+007D RIGHT CURLY BRACKET character (})</dt> + + <dd> + + <p>The element represents the text given by the <code + title="attr-img-alt">alt</code> attribute.</p> + + </dd> + + <dt>If the <code title="attr-img-src">src</code> attribute is not + set and the <code title="attr-img-alt">alt</code> attribute is set + to a string whose first character is a U+007B LEFT CURLY BRACKET + character ({) and whose last character is a U+007D RIGHT CURLY + BRACKET character (})</dt> + + <dd> + + <p>The user agent should display some sort of indicator that an + image is missing, providing to the user the information regarding + the kind of image that it would be (as derived from the <code + title="attr-img-alt">alt</code> attribute).</p> + + </dd> + + <dt>If neither the <code title="attr-img-src">src</code> attribute + nor the <code title="attr-img-alt">alt</code> attribute are + set</dt> + + <dd> + + <p>The element represents nothing.</p> + + </dd> + + </dl> <p>The <code title="attr-img-alt">alt</code> attribute does not represent advisory information. User agents must not present the @@ -13190,10 +13312,13 @@ the same way as content of the <code title="attr-title">title</code> attribute.</p> - <p>If the <code title="attr-img-src">src</code> attribute is - omitted, the image represents whatever string is given by the - element's <code title="attr-img-alt">alt</code> attribute, if any, - or nothing, if that attribute is empty or absent.</p> + <p>User agents may always provide the user with the option to + display any image, or to prevent any image from being + displayed. User agents may also apply image analysis heuristics to + help the user make sense of the image when the user is unable to + make direct use of the image, e.g. due to a visual disability or + because they are using a text terminal with no graphics + capabilities.</p> <p>The <em>contents</em> of <code>img</code> elements, if any, are ignored for the purposes of rendering.</p> @@ -13309,6 +13434,21 @@ came together now. The phone call where Hector had referred to a lion's tail, the time Marco had stuck his tongue out...</p></pre> + <p>Here it is not known at the time of publication what the image + will be, only that it will be a coat of arms of some kind, and thus + no replacement text can be provided, and instead only the kind of + image is provided:</p> + + <pre><p>The last user to have uploaded a coat of arms uploaded this one:</p> +<p><img src="last-uploaded-coat-of-arms.cgi" alt="{user-uploaded coat of arms}"></p></pre> + + <p>Ideally, the author would find a way to provide real replacement + text even in this case, e.g. by asking the previous user. Not + providing replacement text makes the document more difficult to use + for people who are unable to view images, e.g. blind users, or + users or very low-bandwidth connections or who pay by the byte, or + users who are forced to use a text-only Web browser.</p> + </div> <div class="example"> @@ -13359,6 +13499,7 @@ </div> + <h5 id="alt">Requirements for providing text to act as an alternative for images</h5> <p>The requirements for the <code title="attr-img-alt">alt</code> @@ -13681,13 +13822,14 @@ text available. This could be the case, for instance, on a photo upload site, if the site has received 8000 photos from a user without the user annotating any of them. In such cases, the <code - title="attr-img-alt">alt</code> attribute may be omitted, but the - <code title="attr-img-alt">alt</code> attribute should be - included, with a useful value, if at all possible.</p> + title="attr-img-alt">alt</code> attribute's value must be a + description of the <em>kind</em> of image, surrounded by braces + ("{" and "}"). The kind of image is something along the lines of + "photo", "diagram", "painting", "user-uploaded image", etc.</p> <p>In any case, if an image is a key part of the content, the <code title="attr-img-alt">alt</code> attribute must not be - specified with an empty value.</p> + omitted or specified with an empty value.</p> <div class="example"> @@ -13708,11 +13850,15 @@ <legend>Screenshot of a KDE desktop.</legend> </figure></pre> + </div> + + <div class="example"> + <p>A photo on a photo-sharing site, if the site received the image with no metadata other than the caption:</p> <pre><figure> - <strong><img src="1100670787_6a7c664aef.jpg"></strong> + <strong><img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong> <legend>Bubbles traveled everywhere with us.</legend> </figure></pre> @@ -13729,7 +13875,7 @@ describe a Rorschach inkblot test.</p> <pre><figure> - <strong><img src="/commons/a/a7/Rorschach1.jpg"></strong> + <strong><img src="/commons/a/a7/Rorschach1.jpg" alt="{inkblot test}"></strong> <legend>A black outline of the first of the ten cards in the Rorschach inkblot test.</legend> </figure></pre> @@ -13758,8 +13904,9 @@ are using a text-only browser, or because they are listening to the page being read out by a hands-free automobile voice Web browser, or simply because they are blind), the <code - title="attr-img-alt">alt</code> attribute is only allowed to be - omitted when no alternative text is available and none can be made + title="attr-img-alt">alt</code> attribute is only allowed to + contain the <em>kind</em> of image rather than replacement text + when no alternative text is available and none can be made available, e.g. on automated image gallery sites.</p> </dd> @@ -13785,6 +13932,11 @@ </dl> + <p>The <code title="attr-img-alt">alt</code> attribute's value must + not start with a U+007B LEFT CURLY BRACKET character ({) and end + with a U+007D RIGHT CURLY BRACKET character (}), unless the + attribute is giving the <em>kind</em> of image rather than + replacement text.</p>