[whatwg] Definition of alt= attribute

[Matthew Paul Thomas]

For a while I've been honing a clearer definition of the alt= 
attribute, one that tries to curtail the worst misuses of the attribute 
without being horribly wordy. Since alt= is not yet defined in the Web 
Applications 1.0 draft, my text may be useful.

In HTML 4 alt= is an attribute for <img>, <applet>, and <input>. I can 
think of no reason for <input alt= to exist (<form alt= would make 
slightly more sense, for non-interactive UAs), and Web Applications 1.0 
currently includes an "applets" HTMLCollection but no <applet> element, 
so I've tweaked the text to refer to <img> elements exclusively. If 
<applet> is introduced, alt= should be put in a "Common attributes" 
section, and occurrences of "image" changed to "item".

Anyway, continuing from the existing beginning of the <img> section:

----
<p>Since the two representations are alternate, not supplementary, a 
user agent should render either an image or its alternate text but not 
both at once. For example, a <abbr>UA</abbr> should not show alternate 
text in a tooltip. Authors who wish to provide supplementary text for 
an image may use the <code>title</code> attribute instead.</p>

<p>Specifying alternate text helps readers without graphic display 
terminals, visually impaired people, others who prefer listening to 
documents rather than viewing them, people viewing documents offline 
when an image is not available, and so on. To produce sensible 
alternate text, authors should follow these guidelines:</p>

<ul>
<li><p>Do not describe the image. For example, do not write <code 
class="bad example">&lt;img src="logo.png" alt="ExampleCorp 
logo"&gt;</code>, or <code class="bad example">&lt;img src="logo.png" 
alt="logo.png (3890 bytes)"&gt;</code>. Instead, write text that 
fulfils the image&rsquo;s purpose; for example, <code class="good 
example">&lt;h1&gt;&lt;img src="logo.png" alt="Welcome to 
ExampleCorp"&gt;&lt;h1&gt;</code>. A description is appropriate only if 
the image itself is discussed but not elsewhere described in the 
document. For example: <code class="good example">&lt;p&gt;I managed to 
snap a photo of the animal. &lt;img src="animal.jpg" class="photo" 
alt="It's a bit blurry, but it shows a large brown creature running 
through the forest."&gt; At last, evidence of the 
moa!&lt;/p&gt;</code></p></li>

<li><p>Do not provide alternate text for an image when it is used for 
formatting, decoration, illustration, or linking to a solely graphical 
resource. Instead, use <code>alt=""</code>. For example, a portrait of 
someone should usually have <code>alt=""</code>, unless either their 
physical appearance or the artwork itself is highly relevant and not 
described elsewhere in the document.</p></li>
</ul>
----

-- 
Matthew Paul Thomas
http://mpt.net.nz/