This is an image description for:
8 |The image is taken from an eighteenth-Century 11 | engraving in which the various parts 12 | of a castle are identified by numbers. Text in the 13 | engraving gives a name for each numbered part 14 | of the castle.
15 |The castle consists of a square central tower some 16 | four or five storeys high, with square turrets at 17 | each corner and in the middle of the wall visible in 18 | the picture. There is also a flagpole on top of this building, 19 | and there are battlements (castellation) around the top of 20 | the roof. The entire castle is drawn as if seen from a 21 | building slightly taller than this central tower and 22 | some distance away, although this is obviously a 23 | fictional vantage point. The castle itself is also 24 | probably fictional, not representing any specific 25 | location.
26 |Surrounding the square tower are three concentric stone 27 | walls, also with castellations or arrow-slits at the top 28 | of the walls. There are out-buildings in the space between 29 | the two smallest rings of wall and a complex gate with 30 | turrets on the outermost ring.
31 |The parts are labeled as follows:
` 32 |This is a gate with two turrets set entirely outside 35 | the main walls; it defends the bridge over 36 | moat leading to the outermost wall.
The ditch runs all the way round the outer 39 | stone wall. 40 | It is difficult to judge its depth from the picture, 41 | but it coulf be anywhere from three feet (one metre) deep 42 | to two or three times that depth. It might also have water 43 | in it, although again that is not very clear in the picture.
This is the outermost wall, just inside the ditch or 46 | (if filled with water) the moat. The wall appears to be 47 | a little over two meters (six feet) high and consists 48 | of straight segments perhaps twnety feet long joined 49 | at angles to make a large rough circle shape. There are 50 | towers at most of the corners, some square and some circular. 51 | The towers are of varying heights, 52 | perhaps between ten and twenty feet, 53 | with arrow-slits in the walls around the roof of each tower.
54 |The number 3 is engraved 55 | on the diagram 56 | just behind the barbican gate (number 1), where an 57 | arched entrance in the wall is protected by a 58 | circular turret rising up from that same wall, and 59 | connects the area inside the outer Ballium with a 60 | bridge over the moat leading to the inside of the 61 | main entrance, the Barbican.
The Outer Ballium is the space between the outermost 65 | stone wall and the middle stone wall. 66 | The two outwemost walls are perhaps some tenty feet (seven meters) apart 67 | from each other. The ground is drawn as flat, using wiggly lines 68 | of shading, although on the left-hand side there is a hill.
This artificial mont, or mound, is a round hill perhpas ten 71 | feet (three meters) high, on the left side of the pictuer, 72 | nestling up against the middle wall and 73 | almost large enough to reach the outer wall. 74 | The walls go upward to account for the height of the mound. 75 | There is a square tower built in to the middle wall at 76 | the top of the hill.
The middle wall is labeled in the diagram as the 80 | wall of the Inner Ballium; the Inner Ballium is the space between 81 | the two innermost walls.
82 |This middle wall is about the same height and nature as 83 | the outer wall. It has an arched entrance protected by a circular 84 | tower built into the wall. At the right hand end of the wall 85 | is a square tower. The wall makes an abrupt right-angled turn 86 | at that tower, contuing in its circuit towards the back of 87 | the castle. The back left corner of that very rough circle is also 88 | a right angle, just like the front right corner, so this middle 89 | wall would be somewhat diamond shaped in a plan view.
90 |The Inner Ballium is the area between the middle wall and 94 | the smallest ring. The two smallest walls are much further apart 95 | than the two outermost walls, making the Inner Ballium into 96 | a larger space. 97 | There are maybe five or six out-buildings in 98 | this space, one of which, near the back left, has a tower 99 | and might be intended to represent a small church.
100 |The Keep is the square tower in the center of th diagram. 103 | It has a wall going round it that, judging by the part that 104 | is visible, is probably six-sided. 105 | The wall has towers at each corner and a small entrance-way in 106 | the middle of one wall. It is not clear in the diagram wither 107 | the entrance is small or whether it has been drawn smaller than the 108 | others because it is further away: the artist did not have strong 109 | perspective skills.
110 |Neither the innermost wall nor the space between that wall and 111 | the Keep are labeled in the diagram.
112 |76 | This document contains best practice guidance for authors of HTML [[HTML5]] documents on providing text alternatives for images. 77 |
78 |This document was developed through the HTML Accessibility Task Force, and is published by the HTML Working Group with approval by the Protocols and Formats Working Group.
82 |It is a draft document and its contents are subject to change without notice.
83 |The body of this document is expected to be incorporated into HTML 5.1 directly.
84 |A list of existing bugs is available. Comments on this draft text should be filed at the
85 | W3C Bugzilla
86 | using the HTML WG Product and the LC1 alt techniques component,
87 | preferably with the a11y keyword.
The HTML alt attribute can be placed on any
93 | img element.
94 | Its content should provide
95 | a short textual description of the image.
96 | Such descriptions help users who for any
97 | reason are unable to view the images.
98 | They are also used by software processing HTML documents,
99 | such as Web search engines and in-page user agent searches.
Except where otherwise specified the alt attribute MUST be specified on
101 | every img element and MUST NOT be empty.
102 | The value SHOULD be an appropriate functional replacement for the image.
The alt attribute is an essential part of making accessible
108 | documents as well as providing for text-based search engines
109 | and other consumers of HTML. Text such as the content of
110 | alt attributes intended to be used when images are
111 | unavailable is known as
112 | alternative text,
113 | and is an instance of a more general class of
114 | Text alternatives [[WCAG20]],
115 | a primary way of making visual information accessible.
116 | Text alternatives allow the information to be rendered
117 | in a variety of ways by a variety of user agents.
118 | For example,
119 | a person who cannot see a picture
120 | can have the text alternative read aloud using synthesized speech.
121 |
125 | Authors use text alternatives to provide the same information
126 | (or in many cases functionality) to people who cannot see an image.
127 | The function of an image depends on its context: a company logo, for
128 | example, might be part of identity branding on a home page
129 | but function as a navigation icon on other pages.
130 | Thus, the same image may need different
131 | alt text in different contexts.
132 | See also the longdesc attribute [[HTML-LONGDESC]] for
133 | a way to link to external text alternatives and image descriptions.
134 |
137 | The following sections give some principles for writing text alternatives
138 | with the alt attribute and suggest when to use the longdesc
139 | attribute to provide more detail.
140 | Additional guidance, techniques, and examples
141 | are available in Resources on Alternative Text for Images.
Because alt is an HTML attribute there are some restrictions on
147 | what it can contain and how it can be used:
The language of the attribute value cannot be marked as being
152 | different from that of the image element itself. This is not usually
153 | a problem in practice unless the image element was supplied by
154 | automated language-based document assembly; use the
155 | lang (and for the XML syntax the xml:lang attribute)
156 | to mark the language of the alternate text if it differs from that of
157 | the surrounding text.
Attributes are plain text and cannot contain sub-elements.
163 | In particular this also means that fragments of MathML or SVG
164 | cannot be included in an alt attribute value, and
165 | that emphasis cannot be used.
The value of the alt attribute will generally be
171 | rendered by an HTML user agent as replacement text
172 | in place of a broken or unavailable
173 | image, or if image display is disabled, or in a text-mode browser.
174 | The replacement text will usually be rendered in the space reserved
175 | for the image. If the text does not fit in the available space,
176 | some user agents will truncate the text and others might not
177 | display the text at all, reducing accessibility and usability
178 | of the document for sighted users in the case that images were
179 | not available.
In at least some user agents the CSS overflow property
181 | may be used to allow the alternate text to extend outside
182 | the width and height allocated for the img element.
Why are we mentioning something that only works in some 184 | user agents? I would strike this sentence - we should not be recommending 185 | techniquies that don't work portably.
186 |Text readers will generally read out the value of the
191 | alt attribute
192 | every time it is encountered, and may or may not provide the
193 | user with a way to skip to the end of the alternate text and
194 | to carry on reading out the document just after the image element.
195 | This means that documents should not contain overly
196 | burdensome alternate text even if it might fit in the available
197 | space.
For visual differentiation, CSS styles such as
200 | color can be applied to the img element.
Text that is for use as an alternative to an image but that
203 | contains formatting or markup (e.g., tables or equations)
204 | needs to be made available separately as described in the next
205 | section,
206 | Principles for
207 | providing text alternatives. In this case a short text
208 | alternative (e.g., Maxwell's Equations) SHOULD be
209 | used in the alt attribute.
The
212 | alt attribute may be subject to XML “attribute
213 | value normalization” if the document is served as XML or
214 | processed by XML tools.
215 | In particular this normalization removes leading and trailing
216 | ASCII whitespace. Non-breaking spaces such as   are
217 | not subject to normalization and can be used when concatenating
218 | the alt text value to surrounding text might cause
219 | unacceptable word joining.
Even though there are restrictions on its value, the
229 | alt attribute is still needed in order to make
230 | documents properly accessible.
231 | This section describes general principles for authors and
232 | developers to use when considering the use of the
233 | alt attribute, the
234 | longdesc attribute, and also the newer
235 | ARIA described-by and described-at
236 | attributes. [[WAI-ARIA]]
We mention described-at here, but it is 1) not approved and 2) we 238 | don't point that out until much later in the document. We should probably 239 | remove this reference or at least point to the information about its 240 | status.
241 | 242 |The Web Accessibility Initiative provides
243 | An
244 | fDecision Tree to help authors decide what to put
245 | into an alt attribute value.
Where an image has a function (e.g., a button to press) or serves
249 | a clear purpose such as identifying the maker of a page by a company
250 | logo, be direct and simply give the purpose (e.g., Make Payment
251 | or W3C Logo
).
If an image is used to stand for a special character, emoji, gaiji,
256 | itaiji, emoticon, or text in an unusual font, the alt text should
257 | simply be the text that is on the image, or a textual equivalent
258 | such as :-) for a smiling face.
In many cases Web fonts can be used instead of images, 260 | and, provided that the fonts are correctly encoded and that the 261 | characters represented are in Unicode, user agents that do not use 262 | the fonts will still render the correct text.
263 |Recommended practice is to mark up mathematical equations
268 | with MathML. If this is not possible, sometimes a picture
269 | of an equation is used. Similarly even complex tables can
270 | usually be marked up in HTML directly, but sometimes a
271 | picture is used instead. In these and similar cases the
272 | alt attribute should be given a value such as Equation 7
273 | or Table of wandering monsters by level
.
274 | Since people seeing the image would not want to read the
275 | same content in two different forms, the information in the
276 | equation or table picture should then be presented in an
277 | external document, pointed to with a URI as the value of the
278 | longdesc attribute, for example
279 | longdesc = "equation007.html".
It is often possible to represent charts, diagrams, and other 285 | explanatory sorts of pictures using [[SVG]]. This does not automatically 286 | make such pictures accessible, but different mechanisms then 287 | become available for embedding text alternatives in the SVG images.
288 |If SVG is for some reason not used then the same considerations 289 | as for images of equations and 290 | tables 291 | generally apply. A description of a diagram, however, may need to 292 | include information about the presentation as well as the 293 | information. For example, a government report in an archival 294 | format might mention the colors used in a bar chart 295 | in order to facilitate subsequent discussions.
296 |Where an image or diagram can be described adequately 301 | with a short piece of plain text that would easily fit 302 | in the space otherwise occupied by the image, 303 | that text should be used for the text alternative.
304 |If an image is purely decorative, it is not necessary to give
309 | it alt text; use an empty value for the
310 | alt attribute.
311 | If the image separates words of text an alternative text
312 | of an encoded single space (e.g., alt="") might be appropriate.
When multiple images are placed together, for 314 | example to make up a frame or border or when a 315 | complex image is split into smaller images, only 316 | the first image should normally have explanatory 317 | text, in order to avoid tedious repetition from 318 | a screen reader.
319 |When an a element that is a hyperlink, or a button element, has no text content but contains one or more images, include text in the alt attribute(s) that together convey the purpose of the link or button.
<ul> 342 | <li><button><img src="b.png" alt="Bold"></button></li> 343 | <li><button><img src="i.png" alt="Italics"></button></li> 344 | <li><button><img src="strike.png" alt="Strike through"></button></li> 345 | <li><button><img src="blist.png" alt="Bulleted list"></button></li> 346 | <li><button><img src="nlist.png" alt="Numbered list"></button></li> 347 | </ul> 348 |349 |
The image link is broken, and I don't see such an image name in the current HTML source. Where 350 | is this image?
351 |In this example, a link contains a logo. The link points to the W3C web site from an external site. The text alternative is a brief description of the link target.
353 |
<a href="http://w3.org"> 355 | <img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"> 356 | </a>357 |
This example is the same as the previous example, except that the link is on the W3C web site. The text alternative is a brief description of the link target.
360 |
<a href="http://w3.org"> 362 | <img src="images/w3c_home.png" width="72" height="48" alt="W3C home"> 363 | </a>364 |
Depending on the context in which an image of a logo is used it could be appropriate to provide an indication, as part of the text alternative, that the image is a logo. Refer to section on Logos, insignia, flags, or emblems.
365 |In this example, a link contains a print preview icon. The link points to a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target.
368 |
<a href="preview.html"> 370 | <img src="images/preview.png" width="32" height="30" alt="Print preview."> 371 | </a>372 |
In this example, a company logo for the PIP Corporation has been split into the following two images, the first containing the word PIP and the second with the abbreviated word CO. The images are the sole content of a link to the PIPCO home page. In this case a brief description of the link target is provided. As the images are presented to the user as a single entity the text alternative PIP CO home is in the alt attribute of the first image.
<a href="pipco-home.html"> 377 | <img src="pip.gif" alt="PIP CO home"><img src="co.gif" alt=""> 378 | </a>379 |
Readers can benefit when content is presented in graphical form, for example as a flowchart, a diagram, a graph, or a map showing directions. 384 | People unable to see the image for any reason will 385 | need the information provided in another form.
386 |Diagrams often convey a lot of information. This means that
387 | a textual alternative may be quite lengthy. The content of the
388 | alt attribute is in general limited to the amount
389 | of text that will fit in the space normally occupied by
390 | the image. In addition, it may be tedious for someone
391 | listening to an audio rendition of a Web page to have to skip
392 | over a lengthy description each time they reach the diagram.
An appropriate technique, then, is to have a short description
394 | in the alt attribute, such as
395 | bar chart of product sales by region, and
396 | to link to a longer image description.
An image description in this context is text, 398 | whether embedded in the main document or elsewhere, that 399 | would enable a reader to have a good idea of what the image 400 | looks like. This is different from an 401 | alternate representation in that, for example, 402 | it might mention that a pie chart is circular or that the 403 | items in a bar chart are horizontal rows, and should mention 404 | any significant colors. Such a description can enable people 405 | to participate in conversations about the image, or to 406 | answer examination questions that might rely on the 407 | way the information is represented and not just the underlying 408 | data.
409 | 410 |alt attribute with an external image descriptionAn external image description is just another document, normally 412 | in HTML, that describes an image. 413 | You should consider using an external image description if 414 | one of more of the following applies:
415 |alt attribute with an associated text alternativeA text alternative presents the same essential information
426 | as a diagram or illustration but in a text format accessible
427 | in cases where the image is not seen or used. It is normally contained
428 | in the same document as the image.
429 | You should supply a text alternative in addition to the alt attribute
430 | in these circumstances:
alt cannot contain elements.alt cannot be marked with xml:lang for
443 | language.The following example is taken from a (fictional)
448 | examination question on simple color theory.
449 | Someone unable to see the image would need to know that the
450 | two circles are colored red and blue respectively,
451 | and that the white area is where the circles overlap.
452 | Someone able to see the image would not want to waste time
453 | in an exam context reading such a description. In addition,
454 | the description is too long for an alt attribute
455 | value.
To meet the needs both of users who see the image an
457 | users who don't, an image description is provided separately.
458 | In some contexts this could be included in the same HTML document
459 | as the examination question
460 | but image descriptions for educational purposes are often provided
461 | by third parties and may be more easily managed as a separate file.
462 | In addition browsers used by people with accessibility needs might
463 | not have JavaScript available or enabled.
464 | In this example the widely-supported longdesc attribute
465 | is used to point to an external description;
466 | a more general attribute to point to external descriptions,
467 | aria-describedat, has been proposed but is not
468 | yet (2015) widely supported.
Is there really a reason to say whether longdesc is widely 470 | supported or not? Longdesc is part of HTML5 so we can safely recommend 471 | its use. We don't need to point out that it is widely supported. It has been 472 | in HTML for ~20 years - Shane
473 | 474 | 475 |
479 | What color should be used to complete the white part of
480 | the diagram, assuming a reflective color model?
<p><img src="overlapping-circles.html" 482 | alt="overlapping circles" longdesc="overlapping circles-d.html><br> 483 | What color should be used to complete the white part of 484 | the diagram, assuming a reflective color model?</p> 485 |486 |
alt attribute with an associated text alternativeYou should consider supplying a text alternative in addition to the alt attribute
491 | in these circumstances:
alt cannot contain elements.alt cannot be marked with xml:lang for
503 | language.Although the alt attribute is essential to enable someone to understand
506 | which image was not rendered, it should not be relied on to convey
507 | detailed content.
Here's an example of a flowchart image with a short text alternative included in the alt attribute.
511 | In this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to a description (within the same document) of the process represented in the flowchart.
<a href="#desc"><img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp."></a> 514 | ... 515 | ... 516 | <div id="desc"> 517 | <h2>Dealing with a broken lamp</h2> 518 | <ol> 519 | <li>Check if it's plugged in, if not, plug it in.</li> 520 | <li>If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.</li> 521 | <li>If it still doesn't work; buy a new lamp.</li> 522 | </ol> 523 | </div>524 |
In this example, there is an image of a chart. It would be inappropriate to provide the information depicted in the chart as a plain text alternative in an alt attribute as the information is a data set. Instead a structured text alternative is provided below the image in the form of a data table using the data that is represented in the chart image.
Indications of the highest and lowest rainfall for each season have been included in the table, so trends easily identified in the chart are also available in the data table.
529 || 536 | | United Kingdom | 537 |Japan | 538 |Australia | 539 |
|---|---|---|---|
| Spring | 542 |5.3 (highest) | 543 |2.4 | 544 |2 (lowest) | 545 |
| Summer | 548 |4.5 (highest) | 549 |3.4 | 550 |2 (lowest) | 551 |
| Autumn | 554 |3.5 (highest) | 555 |1.8 | 556 |1.5 (lowest) | 557 |
| Winter | 560 |1.5 (highest) | 561 |1.2 | 562 |1 (lowest) | 563 |
567 | <figure role="group" aria-labelledby="caption"> 568 | <img src="rainchart.gif" alt="Bar chart: Average rainfall in millimeters by Country and Season."> 569 | <table> 570 | <caption id="caption">Rainfall in millimeters by Country and Season.</caption> 571 | <tr><td><th scope="col">UK <th scope="col">Japan<th scope="col">Australia</tr> 572 | <tr><th scope="row">Spring <td>5.5 (highest)<td>2.4 <td>2 (lowest)</tr> 573 | <tr><th scope="row">Summer <td>4.5 (highest)<td>3.4<td>2 (lowest)</tr> 574 | <tr><th scope="row">Autumn <td>3.5 (highest) <td>1.8 <td>1.5 (lowest)</tr> 575 | <tr><th scope="row">Winter <td>1.5 (highest) <td>1.2 <td>1 lowest</tr> 576 | </table> 577 | </figure>578 |
The table image and data table are grouped using a figure element
580 | with a [[WAI-ARIA]] role="group". The
581 | figure is labelled by the table caption content using aria-labelledby.
582 |
584 | Once figure and figcaption are accessibility supported in browsers, the addition of ARIA attributes will not be required.
For any of the examples in this section the details and summary
585 | elements could be used so that the text descriptions for the images are only displayed on demand:
Default (closed) view:
589 |
Expanded view (after control activated):
591 |
593 | <figure> 594 | <img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp."> 595 | <details> 596 | <summary>Dealing with a broken lamp</summary> 597 | <ol> 598 | <li>Check if it's plugged in, if not, plug it in.</li> 599 | <li>If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.</li> 600 | <li>If it still doesn't work; buy a new lamp.</li> 601 | </ol> 602 | </details> 603 | </figure> 604 |605 |
The details and summary elements are not well supported by browsers. Until they are well supported, you will need to use scripting to provide the functionality. There are a number of scripted polyfills and custom controls available in popular JavaScript UI widget libraries that provide similar functionality.
Sometimes an image contains only text, and the purpose of the image is to display text using visual effects and/or fonts. It is strongly recommended that text styled using CSS be used, but if this is not possible, provide the same text in the alt attribute as is in the image.
This example shows an image of the text "Get Happy!" written in a fancy multi colored freehand style. The image makes up the content of a heading. In this case the text alternative for the image is "Get Happy!".
612 |
<h1><img src="gethappy.gif" alt="Get Happy!"></h1>614 |
When an image is used to represent a character that cannot otherwise be represented in Unicode (e.g., gaiji, itaiji, or new characters such as novel currency symbols) the text alternative should be a more conventional way of writing the same thing (e.g., using the phonetic hiragana or katakana to give the character's pronunciation).
616 |An image should not be used if Unicode characters would serve an identical purpose. Only when the text cannot be directly represented using Unicode (e.g., because of decorations or because the character is not in the Unicode character set) would an image be appropriate. If necessary Web fonts can be used to supply specific representations for 617 | Unicode characters. This is preferable to the use of images because a text reader 618 | or search engine can process the Unicode character directly.
619 |An illuminated manuscript might use ornate forms for some of its letters. The text alternative in such a situation is just the character that the image represents.
621 |
nce upon a time and a long long time ago...
<p><img src="initials/fancyO.png" alt="O">nce upon a time and a long long time ago...623 |
In many cases an image is actually just supplementary &emdash; its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value MUST be the empty string.
In general, an image falls into this category if removing the image doesn't make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.
629 |It is not always easy to write a useful text alternative for an image. Another option is to provide a link to a description or further information about the image when one is available.
631 |In this example of the same image, there is a short text alternative included in the alt attribute, and there is a link after the image. The link points to a page containing information about the painting.
The Lady of Shalott
633 | A poem by Alfred Lord Tennyson.
Full recitation of Alfred, Lord Tennyson's poem.
637 |<header> 638 | <h1>The Lady of Shalott</h1> 639 | <p>A poem by Alfred Lord Tennyson</p> 640 | </header> 641 | <figure> 642 | <img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat."> 643 | <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p> 644 | </figure> 645 | 646 | <!-- Full Recitation of Alfred, Lord Tennyson's Poem. -->647 |
Purely decorative images are visual enhancements, decorations, or embellishments that provide no function or information beyond aesthetics to users who can view the images.
652 |Mark purely decorative images so they can be ignored by assistive technology by using an empty alt attribute (alt="").
Here's an example of an image being used as a decorative banner for a person's blog. The image offers no information and so an empty alt attribute is used.
Clara's Blog
658 |Welcome to my blog...
659 |<header> 661 | <div><img src="border.gif" alt="" width="400" height="30"></div> 662 | <h1>Clara's Blog</h1> 663 | </header> 664 | 665 | <p>Welcome to my blog...</p>666 |
When images are used inline as part of the flow of text in a sentence, provide a word or phrase as a text alternative which makes sense in the context of the containing sentence:
671 |I 
you.
I <img src="heart.png" alt="love"> you.674 |
My breaks.
My <img src="heart.png" alt="heart"> breaks.676 |
Unicode characters could be used as an alternative to inline images where appropriate. Modern browsers have support for characters like "♥" and "☺", and support the use of custom fonts to render those as colored image fonts.
678 |alt attribute.
682 | Consider the following image which is a map of Katoomba, it has 2 interactive regions corresponding to the areas of North and South Katoomba:
684 |
The text alternative is a brief description of the image. The alt attribute on each of the area elements provides text describing the content of the target page of each linked region:
<p>View houses for sale in North Katoomba or South Katoomba:</p> 691 | <p><img src="imagemap.png" width="209" alt="Map of Katoomba" height="249" usemap="#Map"> 692 | 693 | <map name="Map"> 694 | <area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130" href="north.html" 695 | alt="Houses in North Katoomba"> 696 | <area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61" 697 | alt="Houses in South Katoomba" href="south.html"> 698 | </map>699 |
Generally, slicing an image for links should be used instead of image maps as fallback support for image maps is poorly supported.
702 |In some cases an image is included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum requirement is to provide a caption for the image using the figure and figcaption elements under the following conditions:
706 |In other words, the only content of the figure is an img element and a figcaption element, and the figcaption element must include (caption) content.
713 |Such cases SHOULD be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.
In this example, a person uploads a photo, as part of a bulk upload of many images, to a photo sharing site. The user has not provided a text alternative or a caption for the image. The site's authoring tool inserts a caption automatically using whatever useful information it has for the image. In this case it's the file name and date the photo was taken.
716 |The caption text in the example below is not a suitable text alternative and is not conforming to the Web Accessibility Guidelines 2.0. [[WCAG20]]
717 |
clara.jpg, taken on 12/11/2010.
719 |<figure> 720 | <img src="clara.jpg"> 721 | <figcaption>clara.jpg, taken on 12/11/2010.</figcaption> 722 | </figure>723 |
Notice that even in this example, as much useful information as possible is still included in the figcaption element.
724 |In this second example, a person uploads a photo to a photo sharing site. She has provided a caption for the image but not a text alternative. This may be because the site does not provide users with the ability to add a text alternative in the alt attribute.
Eloisa with Princess Belle
729 |<figure> 730 | <img src="elo.jpg"> 731 | <figcaption>Eloisa with Princess Belle</figcaption> 732 | </figure>733 |
CAPTCHA stands for "Completely Automated Public Turing test to tell Computers and Humans Apart". CAPTCHA images are used for security purposes to confirm that content is being accessed by a person rather than a computer. This authentication is done through visual verification of an image. CAPTCHA typically presents an image with characters or words in it that the user is to re-type. The image is usually distorted and has some noise applied to it to make the characters difficult to read.
737 |To improve the accessibility of CAPTCHA provide text alternatives that identify and describe the purpose of the image, and provide alternative forms of the CAPTCHA using output modes for different types of sensory perception. For instance provide an audio alternative along with the visual image. Place the audio option right next to the visual one. This helps but is still problematic for people without sound cards, the deaf-blind, and some people with limited hearing. Another method is to include a form that asks a question along with the visual image. This helps but can be problematic for people with cognitive impairments.
738 |It is strongly recommended that alternatives to CAPTCHA be used, as all forms of CAPTCHA introduce unacceptable barriers to entry for users with disabilities. For further information, see [[TURINGTEST]].
739 |This example shows a CAPTCHA test which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content.
<img src="captcha.png" alt="If you cannot view this image an audio challenge is provided."> 743 | <!-- audio CAPTCHA option that allows the user to listen and type the word --> 744 | <!-- form that asks a question -->745 |
alt attributeThe primary method for providing text alternatives for images is by including text in the img element alt attribute. In graphical browsers the content of the alt attribute is typically displayed along with an indication (bordered area and/or an image icon) of the presence of an image when the image is not displayed, because the user has disabled image display or the image source information is incorrect. Assistive technologies such as screen readers will typically announce the presence of an image followed by the alt attribute content. Text based browsers may display the alt attribute content in brackets or in different colored text or as the content of a link to the image or as text without any indication of the image or prefixed with an indication of the image.
<img src="example.jpg" alt="text alternative.">757 |
alt attribute content does not impact upon the default visual display of content.alt attribute is not available to some users who may find it useful.alt attribute content is too long it may cause display issues in some browsers.alt attribute content is too long it may cause reading issues in some assistive technologies.alt attribute are read by assistive technologies
769 | every time the image is encountered, with no possibility of skipping and no
770 | distinction from the surrounding text.alt attribute content.alt attribute content a replacement for an image?The answer to this question depends on the content of the image and the context the image is being used in:
777 |alt attribute as a container for a text alternative, the alt attribute content can be a label for the image. This label MAY be a brief description that identifies the image. This SHOULD be accompanied by a more complete text alternative that is programmatically associated with the image.alt attribute as a container for a text alternative, the alt attribute content SHOULD be a label for the image. This label MAY be a brief description that identifies the image. This SHOULD be accompanied by a structured text alternative that is programmatically associated with the image. alt attribute content SHOULD be considered as a replacement for the image. alt attribute SHOULD be considered as an indication that the image can be safely ignored. alt attribute SHOULD be considered as an indication that the image can be safely ignored.alt attribute SHOULD be considered as an indication that the image can be safely ignored.alt attribute content SHOULD be a brief description of the link target. alt attribute content SHOULD be empty. alt attribute content MAY be empty or a text alternative for the image. If the text content is not a description of the link target, the alt attribute content SHOULD be a brief description of the link target.alt attribute alt=""Circumstances in which it is appropriate to use an empty or null alt attribute:
Circumstances in which it is not appropriate to use an empty or null alt attribute:
figure element and has an associated caption provided using the figcaption element. Using an empty alt attribute hides an image from some users. If an image has a caption the image needs to be discoverable by users, otherwise a caption is present that refers to nothing for some users.alt attribute hides an image from some users. In order to have the possibility of interrogating the image, the image must be discoverable.alt attribute hides an image from some users, which is incorrect. The image is not meaningless, it contains information which a range of users could interpret with the aid of the short text alternative and longer description. It also provides a text alternative for users who have images turned off in their browsers, so they can load and view the image if they wish. If an empty alt attribute is present there may be no indication that an image is present. Furthermore if a description of an image is provided in a document, a programmatic association between the image and the descriptive text is required. Using an empty alt attribute on the image effectively precludes the assigning of a programmatic association.A text alternative for an image should be as long as it needs to be to adequately convey the information in the image in the context in which the image is being used.
809 |alt text be?While there are no definitive right or wrong lengths for text alternatives provided using the img element's alt attribute, the general consensus is that if the text alternative is longer 30-50 words (2 to 3 sentences), it should not be considered a short text alternative and should not be presented using the alt attribute. Refer to the section - Graphical Representations: Charts, diagrams, graphs, maps, illustrations for example methods of providing longer text alternatives for images.
A text alternative provided using the alt attribute is exposed to screen reader users as a text string, generally announced as a chunk, and cannot be structured into paragraphs or have other markup added to aid comprehension. It also cannot usually be interrupted, so brevity can be of considerable value.
figure and figcaption elementsThe figure and figcaption elements provide a method to explicitly associate a caption with a variety of content including images. Any content inside the figure element that is not contained within the figcaption element is labelled by the content of the figcaption element. The figcaption content may be an adjunct to the text alternative provided using the alt attribute:
The figcaption content may be a text alternative for the image, obviating the need for a text alternative provided using the alt attribute. This would only be the case if the figcaption content provides an adequate text alternative for the visual content in the image:
<img src="example.jpg" alt="Shadow like figures and a graffiti tag drawn on the walls of a partially 823 | demolished building, illuminated by the light from a street lamp.">824 |
Drawings on the walls of a partially demolished building (photo)
827 |<figure>830 |
<img src="shadows.jpg">
<figcaption>Drawings on the walls of a partially demolished building (photo). 829 | </figcaption>
</figure>
figcaption will be explicitly associated with the image. figure and figcaption elements are not currently accessibility supported by all browsers. Until the figure and figcaption elements are widely accessibility supported by browsers and/or assistive technology it is recommended that role="group" be used on the figure element and in the case where the figcaption content is the text alternative, provide a label for the image in the alt attribute. These recommendations are illustrated in following example:
Shadow like figures and a graffiti tag drawn on the walls of a
844 | partially demolished building, illuminated by the light from a street lamp (photo 1).
<figure role="group"> 847 | <img src="shadows.jpg" alt="photo 1"> 848 | <figcaption>Shadow like figures and a graffiti tag drawn on the walls of a 849 | partially demolished building, illuminated by the light from a street lamp (photo 1). 850 | </figcaption> 851 | </figure>852 |
figure elements In cases where there is a group of related images each having an associated caption, it is recommended that nested figure and figcaption elements be used.
The castle through the ages: 1423, 1756, and 1966 respectively.
858 |
Charcoal on wood. Anonymous, circa 1423
860 |.
Oil-based paint on canvas. Eloisa Faulkner, 1756.
862 |
Film photograph. Séraphin-Médéric Mieusement, 1936.
864 | 865 |<figure> 866 | <figcaption>The castle through the ages: 1423, 1756, and 1966 respectively.</figcaption> 867 | <figure> 868 | <img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it."> 869 | <figcaption>Charcoal on wood. Anonymous, circa 1423.</figcaption> 870 | </figure> 871 | <figure> 872 | <img src="castle-painting.jpg" alt="The castle now has two towers and two walls."> 873 | <figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption> 874 | </figure> 875 | <figure> 876 | <img src="castle-fluro.jpg" 877 | alt="The castle lies in ruins, the original tower all that remains in one piece."> 878 | <figcaption>Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption> 879 | </figure> 880 | </figure>881 |
The title attribute MUST NOT be used to provide a text alternative for an image. The title attribute MUST NOT be used to provide a caption for an image; use the figure and figcaption elements to provide a caption, as described above.
Gaiji is a term meaning "external characters". In general, this means characters that are not represented in existing Japanese 892 | encoding systems such as [[UNICODE]].
893 |Operating systems and other platforms provide a set of interfaces using an accessibility API that expose information about objects and events to assistive technologies. Assistive technologies use these interfaces to get information about and interact with those widgets. Examples of this are the Java Accessibility API [JAPI], Microsoft Active Accessibility [MSAA], the Mac OS X Accessibility Protocol [AXAPI], the Gnome Accessibility Toolkit (ATK) [ATK], and IAccessible2 [IA2].
910 |The accessible name is the name of a user interface element. Each platform accessibility API provides the accessible name property. The value of the accessible name may be derived from a visible (e.g., the visible text on a button) or invisible (e.g., the text alternative that describes an icon) property of the user interface element.
912 |Alt text is a colloquial term for a text alternative provided using the alt attribute of an img element.
An assistive technology is a hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents. A more detailed explanation of assistive technology is provided in the WCAG 2.0 glossary. [[WCAG20]]
916 |Information and sensory experience to be communicated to the user by means of a user agent such as a web browser, including code or markup that defines the content's structure, presentation, and interactions.
918 |alt Attribute or Null alt AttributeAn alt attribute with no content:
921 | <img src="null.gif" alt=""> 922 |923 |
A non-text content is any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language
925 |Note: This includes ASCII Art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text.
926 |It must be possible for people using assistive technologies to find the text alternative for an image when they encounter the image that they cannot use. To accomplish this, the text must be "programmatically associated" with the image and is referenced as programmatic association. This means that the user must be able to use their assistive technology to find the alternative text (that they can use) when they land on the image (that they can't use).
928 |Text that is programmatically associated with non-text content or referred to from text that is programmatically associated with non-text content. Programmatically associated text is text whose location can be programmatically determined from the non-text content. [[UNDERSTANDING-WCAG20]]
930 |934 | Incomplete and in no particular order - Heydon Pickering, David MacDonald, Laura Carlson, Josh O Connor, Gez Lemon, Anne van Kesteren, Ian Hickson, Mike Smith, Mike Paciello, Bim Egan, Gregory Rosmaita, Michael Cooper, Janina Sajka, Matt May, Bevi Chagnon, Jonathan Avila, Pat Rees, Charlie Pike, Andy Maseyk, Rich Clark.
935 |71 | This document contains best practice guidance for authors of HTML [[!HTML5]] documents on providing text alternatives for images. 72 |
73 |This document was developed through the HTML Accessibility Task Force, and is published by the HTML Working Group with approval by the Protocols and Formats Working Group.
77 |It is a draft document and its contents are subject to change without notice.
78 |It is expected to be published as a W3C Working Group Note.
79 |A list of existing bugs is available. Comments on this document should be filed at the
80 | W3C Bugzilla
81 | using the HTML WG Product and the LC1 alt techniques component,
82 | preferably with the a11y keyword.
The HTML alt attribute can be placed on any
88 | img element.
89 | Its content should provide
90 | a short textual description of the image that can be presented
91 | to a user in the case that the image is not
92 | viewed or to software that processes text.
93 | The descriptions are useful when images are not displayed
94 | and also for users who are unable to view images.
95 | The descriptions may also be used by web search engines
96 | and in-page user agent searches.
Text alternatives [[WCAG20]] are a primary way of making visual information accessible.
102 | Text alternatives allow the information to be rendered
103 | in a variety of ways by a variety of user agents.
104 | For example,
105 | a person who cannot see a picture can have the text alternative read aloud using synthesized speech.
106 | The alt attribute, along with the longdesc attribute [[!HTML-LONGDESC]], is an essential part of making accessible
107 | documents as well as providing for text-based search engines
108 | and other consumers of HTML.
In order to write alternate content such as that found in
111 | alt attribute values, authors must consider
112 | not only the image itself but also
113 | both the context in which the image appears and the function the image may have in that context.
114 | The same image may need different
115 | alt text in different contexts.
116 | The following sections give some principles for writing text alternatives
117 | with the alt attribute and suggest when to use the longdesc
118 | attribute to provide ore detail; these principles
119 | are then illustrated by examples.
120 | Additional guidance and techniques are available in Resources on Alternative Text for Images.
Because alt is an HTML attribute there are some restrictions on
126 | what it can contain and how it can be used:
The language of the attribute value cannot be marked as being
131 | different from that of the image element itself. This is not usually
132 | a problem in practice unless the image element was supplied by
133 | automated language-based document assembly; use the
134 | lang (and for the XML syntax the xml:lang attribute)
135 | to mark the language of the alternate text if it differs from that of
136 | the surrounding text.
Attributes are plain text and cannot contain sub-elements.
142 | In particular this also means that fragments of MathML or SVG
143 | cannot be included in an alt attribute value, and
144 | that emphasis cannot be used.
The value of the alt attribute will generally be
150 | rendered by an HTML user agent as replacement text
151 | in place of a broken or unavailable
152 | image, or if image display is disabled, or in a text-mode browser.
153 | The replacement text will usually be rendered in the space reserved
154 | for the image. If the text does not fit in the available space,
155 | some user agents will truncate the text and others might not
156 | display the text at all, reducing accessibility and usability
157 | of the document for sighted users in the case that images were
158 | not available.
In at least some agents the CSS overflow property
160 | may be used to allow the alternate text to extend outside
161 | the width and height allocated for the img element.
Text readers will generally read out the value of the
167 | alt attribute
168 | every time it is encountered, and may or may not provide the
169 | user with a way to skip to the end of the alternate text and
170 | to carry on reading out the document just after the image element.
171 | This means that documents should not contain overly
172 | burdensome alternate text even if it might fit in the available
173 | space.
For visual differentiation, CSS styles such as
175 | color can be applied to the img element.
Text that is for use as an alternative to an image but that
178 | contains formatting or markup (such as tables or equations),
179 | needs to be made available separately as described in the next
180 | section,
181 | Principles for
182 | providing text alternatives. In this case a short text
183 | alternative, such as Maxwell's Equations, should be
184 | used in the alt attribute.
Even though there are restrictions on its value, the
194 | alt attribute is still needed in order to make
195 | documents properly accessible.
196 | This section describes general principles for authors and
197 | developers to use when considering the use of the
198 | alt attribute, the
199 | longdesc attribute, and also the newer
200 | ARIA described-by and described-at
201 | attributes. [[!WAI-ARIA]]
The Web Accessibility Initiative provides
204 | An
205 | alt Decision Tree to help authors decide what to put
206 | into an alt attribute value.
Where an image has a function, such as a button to press, or serves
210 | a clear purpose such as identifying the maker of a page by a company
211 | logo, be direct and simply give the purpose, such as Make Payment
212 | or W3C Logo
.
If an image is used to stand for a special character, emoji, gaiji,
217 | itaiji, emoticon, or text in an unusual font, the alt text should
218 | simply be the text that is on the image, or a textual equivalent
219 | such as :-) for a smiling face.
In many cases Web fonts can be used instead of images, 221 | and, provided that the fonts are correctly encoded and that the 222 | characters represented are in Unicode, user agents that do not use 223 | the fonts will still render the correct text.
224 |Recommended practice is to mark up mathematical equations
229 | with MathML; if this is not possible, sometimes a picture
230 | of an equation is used. Similarly even complex tables can
231 | usually be marked up in HTML directly, but sometimes a
232 | picture is used instead. In these and similar cases the
233 | alt attribute should be given a value such as Equation 7
234 | or Table of wandering monsters by level
.
235 | Since people seeing the image would not want to read the
236 | same content in two different forms, the information in the
237 | equation or table picture should then be presented in an
238 | external document, pointed to with a URI as the value of
239 | longdesc attribute, for example
240 | longdesc = equation007.html.
It is often possible to represent charts, diagrams and other 246 | explanatory sorts of picture using SVG. This does not automatically 247 | make such pictures be accessible, but different mechanisms then 248 | become available for embedding text alternatives in the SVG images.
249 |If SVG is for some reason not used then the same considerations 250 | as for images of equations and 251 | tables 252 | generally apply. A description of a diagram, however, may need to 253 | include information about the presentation as well as the 254 | information. For example, a government report in an archival 255 | format might mention the colors used in a bar chart 256 | in order to facilitate subsequent discussions.
257 |Where an image or diagram can be described adequately 262 | with a short piece of plain text that would easily fit 263 | in the space otherwise occupied by the image, 264 | that text should be used for the text alternative.
265 |If an image is purely decorative, it is not necessary to give
270 | it alt text; use an empty value for the
271 | alt attribute.
272 | If the image separates words of text an alternative text
273 | of a single space might be appropriate.
When multiple images are placed together, for 275 | example to make up a frame or border or when a 276 | complex image is split into smaller images, only 277 | the first image should normally have explanatory 278 | text, in order to avoid tedious repetition from 279 | a screen reader.
280 |Except where otherwise specified, the alt attribute MUST be specified and its value MUST NOT be empty. When specified, the value MUST be an appropriate functional replacement for the image. The specific requirements for the alt attribute content depend on the image's function in the page, as described in the following sections.
To determine an appropriate text alternative it is important to think about why an image is being included in a page. What is its purpose? Thinking like this will help you to understand what is important about the image for the intended audience. Every image has a reason for being on a page, because it provides useful information, performs a function, labels an interactive element, enhances aesthetics or is purely decorative. Therefore, knowing what the image is for makes writing an appropriate text alternative easier.
299 |When an a element that is a hyperlink, or a button element, has no text content but contains one or more images, include text in the alt attribute(s) that together convey the purpose of the link or button.
<ul> 308 | <li><button><img src="b.png" alt="Bold"></button></li> 309 | <li><button><img src="i.png" alt="Italics"></button></li> 310 | <li><button><img src="strike.png" alt="Strike through"></button></li> 311 | <li><button><img src="blist.png" alt="Bulleted list"></button></li> 312 | <li><button><img src="nlist.png" alt="Numbered list"></button></li> 313 | </ul> 314 |315 |
In this example, a link contains a logo. The link points to the W3C web site from an external site. The text alternative is a brief description of the link target.
317 |
<a href="http://w3.org"> 319 | <img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"> 320 | </a>321 |
This example is the same as the previous example, except that the link is on the W3C web site. The text alternative is a brief description of the link target.
324 |
<a href="http://w3.org"> 326 | <img src="images/w3c_home.png" width="72" height="48" alt="W3C home"> 327 | </a>328 |
Depending on the context in which an image of a logo is used it could be appropriate to provide an indication, as part of the text alternative, that the image is a logo. Refer to section on Logos, insignia, flags, or emblems.
329 |In this example, a link contains a print preview icon. The link points to a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target.
332 |
<a href="preview.html"> 334 | <img src="images/preview.png" width="32" height="30" alt="Print preview."> 335 | </a>336 |
In this example, a button contains a search icon. The button submits a search form. The text alternative is a brief description of what the button does.
339 |
<button> 341 | <img src="images/search.png" width="74" height="29" alt="Search"> 342 | </button>343 |
In this example, a company logo for the PIP Corporation has been split into the following two images, the first containing the word PIP and the second with the abbreviated word CO. The images are the sole content of a link to the PIPCO home page. In this case a brief description of the link target is provided. As the images are presented to the user as a single entity the text alternative PIP CO home is in the alt attribute of the first image.
<a href="pipco-home.html"> 348 | <img src="pip.gif" alt="PIP CO home"><img src="co.gif" alt=""> 349 | </a>350 |
Readers can benefit when content is presented in graphical form, for example as a flowchart, a diagram, a graph, or a map showing directions. 355 | People unable to see the image for any reason will 356 | need the information provided in another form.
357 |Diagrams often convey a lot of information. This means that
358 | a textual alternative may be quite lengthy. The content of the
359 | alt attribute is in general limited to the amount
360 | of text that will fit in the space normally occupied by
361 | the image. In addition, it may be tedious for someone
362 | listening to an audio rendition of a Web page to have to skip
363 | over a lengthy description each time they reach the diagram.
An appropriate technique, then, is to have a short description
365 | in the alt attribute, such as
366 | bar chart of product sales by region, and
367 | to link to a longer image description.
An image description in this context is text, 369 | whether embedded in the main document or elsewhere, that 370 | would enable a reader to have a good idea of what the image 371 | looks like. This is different from an 372 | alternate representation in that, for example, 373 | it might mention that a pie chart is circular or that the 374 | items in a bar chart are horizontal rows, and should mention 375 | any significant colors. Such a description can enable people 376 | to participate in conversations about the image, or to 377 | answer examination questions that might rely on the 378 | way the information is represented and not just the underlying 379 | data.
380 | 381 |An external image description is just another document, normally 383 | in HTML, that describes an image. 384 | You should consider using an external image description if 385 | one of more of the following applies:
386 |A text alternative presents the same essential information 397 | as a diagram or illustration but in a text format accessible 398 | in cases where the image is not seen or used. It is normally contained 399 | in the same document as the image. 400 | You should supply a text alternative in addition to the alt attribute 401 | in these circumstances:
402 |The following example is a diagram of a castle. 419 | The diagram is taken from a book of historical 420 | significance, and hence is a raster image rather than 421 | being represented in a vector graphic format such as SVG. 422 | As with many diagrams, there are two main parts to this example. 423 | The first is a picture, 424 | in this case a drawing of a castle. The second part is a set of 425 | labels, identifying some of the components of the castle so that they 426 | may more easily be described in the text. In this case the 427 | labels are numbers on the diagram itself, with a separate table 428 | giving a name corresponding to each number.
429 |
<img src="castle-diagram.jpg" 432 | alt="castle diagram" longdesc="castle-diagram-d.html>433 |
It is not appropriate to try to put descriptions of complex 434 | diagrams into alt images, so a short mnemonic label is used; 435 | the longer description is in a separate file. It might include 436 | text such as the following:
437 |Image description for castle diagram:
439 |The image is taken from an eighteenth-Century 440 | engraving in which the various parts 441 | of a castle are identified by numbers. Text in the 442 | engraving gives a name for each numbered part 443 | of the castle.
444 |The castle consists of a square central tower some 445 | four or five storeys high, with square turrets at 446 | each corner and in the middle of the wall visible in 447 | the picture. There is also a flagpole on top of this building, 448 | and there are battlements (castellation) around the top of 449 | the roof. The entire castle is drawn as if seen from a 450 | building slightly taller than this central tower and 451 | some distance away, although this is obviously a 452 | fictional vantage point. The castle itself is also 453 | probably fictional, not representing any specific 454 | location.
455 |Surrounding the square tower are three concentric stone 456 | walls, also with castellations or arrow-slits at the top 457 | of the walls. There are out-buildings in the space between 458 | the two smallest rings of wall and a complex gate with 459 | turrets on the outermost ring.
460 |The parts are labeled as follows:
461 |This is a gate with two turrets set entirely outside 464 | the main walls; it defends the bridge over 465 | moat leading to the outermost wall.
The ditch runs all the way round the outer 468 | stone wall.
This is the outermost wall. It appears to be 471 | a little over two meters (six feet) high and consists 472 | of straight segments perhaps twenty feet long joined 473 | at angles to make a large rough circle shape. There are 474 | towers at most of the corners, some square and some circular. 475 | The towers are of varying heights, 476 | perhaps between ten and twenty feet, 477 | with arrow-slits in the walls around the roof of each tower.
478 |The number 3 is engraved 479 | on the diagram 480 | just behind the barbican gate (number 1), where an 481 | arched entrance in the wall is protected by a 482 | circular turret rising up from that same wall, and 483 | connects the area inside the outer Ballium with a 484 | bridge over the moat leading to the inside of the 485 | main entrance, the Barbican.
The actual image description continues 490 | in the same manner until all of the parts of 491 | the castle picture are described. 492 | Depending on the context in 493 | which the illustration is used the description could also mention 494 | that the diagram is 495 | printed with dark brown ink on a yellowish-white paper, 496 | and even that the edges of the printing-block have left visible lines to 497 | the left and top of the picture.
498 |Information that is likely also to be of use (or interest) to people who are able 499 | to see the image should normally be in the 500 | main document; an example might be the names of the 501 | artist and engraver; for a photograph, technical 502 | information about the camera lens and exposure would 503 | similarly not be suitable for an external image description, 504 | because it is not provided as a substitute for the image 505 | but to give additional information. Information that is likely to 506 | be irrelevant or tedious for people who can see the image but 507 | that would be necessary for understanding concepts illustrated should 508 | be in the external image description.
509 | 510 | 511 |You should supply a text alternative in addition to the alt attribute 513 | in these circumstances:
514 |Although the alt attribute is essential to enable someone to understand 528 | which image was not rendered, it should not be relied on to convey 529 | detailed content.
530 | 531 |Here's an example of a flowchart image, with a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to a description, within the same document, of the process represented in the flowchart.
<a href="#desc"><img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp."></a> 535 | ... 536 | ... 537 | <div id="desc"> 538 | <h2>Dealing with a broken lamp</h2> 539 | <ol> 540 | <li>Check if it's plugged in, if not, plug it in.</li> 541 | <li>If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.</li> 542 | <li>If it still doesn't work; buy a new lamp.</li> 543 | </ol> 544 | </div>545 |
In this example, there is an image of a chart. It would be inappropriate to provide the information depicted in the chart as a plain text alternative in an alt attribute as the information is a data set. Instead a structured text alternative is provided below the image in the form of a data table using the data that is represented in the chart image.
Indications of the highest and lowest rainfall for each season have been included in the table, so trends easily identified in the chart are also available in the data table.
550 || 557 | | United Kingdom | 558 |Japan | 559 |Australia | 560 |
|---|---|---|---|
| Spring | 563 |5.3 (highest) | 564 |2.4 | 565 |2 (lowest) | 566 |
| Summer | 569 |4.5 (highest) | 570 |3.4 | 571 |2 (lowest) | 572 |
| Autumn | 575 |3.5 (highest) | 576 |1.8 | 577 |1.5 (lowest) | 578 |
| Winter | 581 |1.5 (highest) | 582 |1.2 | 583 |1 (lowest) | 584 |
588 | <figure role="group" aria-labelledby="caption"> 589 | <img src="rainchart.gif" alt="Bar chart: Average rainfall in millimeters by Country and Season."> 590 | <table> 591 | <caption id="caption">Rainfall in millimeters by Country and Season.</caption> 592 | <tr><td><th scope="col">UK <th scope="col">Japan<th scope="col">Australia</tr> 593 | <tr><th scope="row">Spring <td>5.5 (highest)<td>2.4 <td>2 (lowest)</tr> 594 | <tr><th scope="row">Summer <td>4.5 (highest)<td>3.4<td>2 (lowest)</tr> 595 | <tr><th scope="row">Autumn <td>3.5 (highest) <td>1.8 <td>1.5 (lowest)</tr> 596 | <tr><th scope="row">Winter <td>1.5 (highest) <td>1.2 <td>1 lowest</tr> 597 | </table> 598 | </figure>599 |
The table image and data table are grouped using a figure element
601 | with an [[!WAI-ARIA]] role="group". The
602 | figure is labelled by the table caption content using aria-labelledby.
603 |
605 | Once figure and figcaption are accessibility supported in browsers, the addition of ARIA attributes will not be required.
For any of the examples in this section the details and summary
606 | elements could be used so that the text descriptions for the images are only displayed on demand:
Default (closed) view:
610 |
Expanded view (after control activated):
612 |
614 | <figure> 615 | <img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp."> 616 | <details> 617 | <summary>Dealing with a broken lamp</summary> 618 | <ol> 619 | <li>Check if it's plugged in, if not, plug it in.</li> 620 | <li>If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.</li> 621 | <li>If it still doesn't work; buy a new lamp.</li> 622 | </ol> 623 | </details> 624 | </figure> 625 |626 |
The details and summary elements are not well supported by browsers, until such times they are supported, if used, you will need to use scripting to provide the functionality. There are a number of scripted polyfills available and also scripted custom controls are available, in popular JavaScript UI widget libraries, which provide similar functionality.
Sometimes, an image only contains text, and the purpose of the image is to display text using visual effects and /or fonts. It is strongly recommended that text styled using CSS be used, but if this is not possible, provide the same text in the alt attribute as is in the image.
630 |This example shows an image of the text "Get Happy!" written in a fancy multi colored freehand style. The image makes up the content of a heading. In this case the text alternative for the image is "Get Happy!".
632 |
<h1><img src="gethappy.gif" alt="Get Happy!"></h1>634 |
In this example we have an advertising image consisting of text, the phrase "The BIG sale" is repeated 3 times, each time the text gets smaller and fainter, the last line reads "...ends Friday" In the context of use, as an advertisement, it is recommended that the image's text alternative only include the text "The BIG sale" once as the repetition is for visual effect and the repetition of the text for users who cannot view the image is unnecessary and could be confusing.
637 |
<p><img src="sale.gif" alt="The BIG sale ...ends Friday."></p>639 |
In situations where there is also a photo or other graphic along with the image of text, ensure that the words in the image text are included in the text alternative, along with any other description of the image that conveys meaning to users who can view the image, so the information is also available to users who cannot view the image.
640 |When an image is used to represent a character that cannot otherwise be represented in Unicode, for example gaiji, itaiji, or new characters such as novel currency symbols, the text alternative should be a more conventional way of writing the same thing, e.g. using the phonetic hiragana or katakana to give the character's pronunciation.
642 |In this example from 1997, a new-fangled currency symbol that looks like a curly E with two bars in the middle instead of one is represented using an image. The alternative text gives the character's pronunciation.
644 |Only 
5.99!
<p>Only <img src="euro.png" alt="euro ">5.99!646 |
An image should not be used if Unicode characters would serve an identical purpose. Only when the text cannot be directly represented using Unicode, e.g. because of decorations or because the character is not in the Unicode character set (as in the case of gaiji), would an image be appropriate.
648 |If an author is tempted to use an image because their default system font does not support a given character, then Web Fonts are a better solution than images.
649 |An illuminated manuscript might use graphics for some of its letters. The text alternative in such a situation is just the character that the image represents.
651 |nce upon a time and a long long time ago...
<p><img src="initials/fancyO.png" alt="O">nce upon a time and a long long time ago...653 |
Sometimes, an image consists of a graphics such as a chart and associated text. In this case it is recommended that the text in the image is included in the text alternative.
658 |Consider an image containing a pie chart and associated text. It is recommended wherever possible to provide any associated text as text, not an image of text. If this is not possible include the text in the text alternative along with the pertinent information conveyed in the image.
660 |
<p><img src="figure1.gif" alt="Figure 1. Distribution of Articles by Journal Category. 662 | Pie chart: Language=68%, Education=14%, and Science=18%."></p>663 |
Here's another example of the same pie chart image, showing a short text alternative included in the alt attribute and a longer text alternative in text. The figure and figcaption elements are used to associate the longer text alternative with the image. The alt attribute is used to label the image.
<figure> 667 | <img src="figure1.gif" alt="Figure 1"> 668 | <figcaption><strong>Figure 1.</strong> Distribution of Articles by Journal Category. 669 | Pie chart: Language=68%, Education=14%, and Science=18%.</figcaption> 670 | </figure>671 |
The advantage of this method over the previous example is that the text alternative is available to all users at all times. It also allows structured mark up to be used in the text alternative, where as a text alternative provided using the alt attribute does not.
An image that isn't discussed directly by the surrounding text but still has some relevance can be included in a page using the img element. Such images are more than mere decoration, they may augment the themes or subject matter of the page content and so still form part of the content. In these cases, it is recommended that a text alternative be provided.
677 |Here is an example of an image closely related to the subject matter of the page content but not directly discussed. It is an image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows an example. The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. There is a short description of the content of the image in the alt attribute and a link below the image to a longer description located at the bottom of the document. At the end of the longer description there is also a link to further information about the painting.
679 |
<header> 681 | <h1>The Lady of Shalott</h1> 682 | <p>A poem by Alfred Lord Tennyson</p> 683 | </header> 684 | <img src="shalott.jpeg" alt="Painting of a young woman with long hair, sitting in a wooden boat. "> 685 | <p><a href="#des">Description of the painting</a>.</p> 686 | <!-- Full Recitation of Alfred, Lord Tennyson's Poem. --> 687 | ... 688 | ... 689 | ... 690 | <p id="des">The woman in the painting is wearing a flowing white dress. A large piece of intricately 691 | patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. 692 | Her expression is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. 693 | Two have blown out. <a href="http://bit.ly/5HJvVZ">Further information about the painting</a>.</p>694 |
This example illustrates the provision of a text alternative identifying an image as a photo of the main subject of a page.
697 |
698 | <img src="orateur_robin_berjon.png" alt="Portrait photo(black and white) of Robin."> 699 | <h1>Robin Berjon</h1> 700 | <p>What more needs to be said?</p>701 |
In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string.
706 |In general, an image falls into this category if removing the image doesn't make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.
707 |It is not always easy to write a useful text alternative for an image, another option is to provide a link to a description or further information about the image when one is available.
709 |In this example of the same image, there is a short text alternative included in the alt attribute, and there is a link after the image. The link points to a page containing information about the painting.
The Lady of Shalott
711 | A poem by Alfred Lord Tennyson.
Full recitation of Alfred, Lord Tennyson's poem.
715 |<header> 716 | <h1>The Lady of Shalott</h1> 717 | <p>A poem by Alfred Lord Tennyson</p> 718 | </header> 719 | <figure> 720 | <img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat."> 721 | <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p> 722 | </figure> 723 | 724 | <!-- Full Recitation of Alfred, Lord Tennyson's Poem. -->725 |
Purely decorative images are visual enhancements, decorations, or embellishments that provide no function or information beyond aesthetics to users who can view the images.
730 |Mark up purely decorative images so they can be ignored by assistive technology by using an empty alt attribute (alt="").
Here's an example of an image being used as a decorative banner for a person's blog. The image offers no information and so an empty alt attribute is used.
Clara's Blog
736 |Welcome to my blog...
737 |<header> 739 | <div><img src="border.gif" alt="" width="400" height="30"></div> 740 | <h1>Clara's Blog</h1> 741 | </header> 742 | 743 | <p>Welcome to my blog...</p>744 |
When images are used inline as part of the flow of text in a sentence, provide a word or phrase as a text alternative which makes sense in the context of the sentence it is a part of.
749 |I you.
I <img src="heart.png" alt="love"> you.752 |
My breaks.
My <img src="heart.png" alt="heart"> breaks.754 |
Unicode characters could be used as an alternative to inline images where appropriate. Modern browsers have support for characters like "♥" and "☺", and support the use of custom fonts to render those as colored image fonts, or an author can use image replacement techniques.
756 |When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, include a text alternative for one of the images using the alt attribute as per the relevant
760 | guidance for the picture as a whole, and then include an empty alt attribute on the other images.
In this example, a picture representing a company logo for the PIP Corporation has been split into two pieces, the first containing the letters "PIP" and the second with the word "CO". The text alternative PIP CO is in the alt attribute of the first image.
<img src="pip.gif" alt="PIP CO"><img src="co.gif" alt="">765 |
In the following example, a rating is shown as three filled stars and two empty stars. While the text alternative could have been "★★★☆☆", the author has instead decided to more helpfully give the rating in the form "3 out of 5". That is the text alternative of the first image, and the rest have empty alt attributes.
<p>Rating: <meter max=5 value=3> 770 | <img src="1" alt="3 out of 5"> 771 | <img src="1" alt=""> 772 | <img src="1" alt=""> 773 | <img src="0" alt=""> 774 | <img src="0" alt=""> 775 | </meter></p>776 |
alt attribute.
781 | Consider the following image which is a map of Katoomba, it has 2 interactive regions corresponding to the areas of North and South Katoomba:
783 |
The text alternative is a brief description of the image. The alt attribute on each of the area elements provides text describing the content of the target page of each linked region:
<p>View houses for sale in North Katoomba or South Katoomba:</p> 790 | <p><img src="imagemap.png" width="209" alt="Map of Katoomba" height="249" usemap="#Map"> 791 | 792 | <map name="Map"> 793 | <area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130" href="north.html" 794 | alt="Houses in North Katoomba"> 795 | <area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61" 796 | alt="Houses in South Katoomba" href="south.html"> 797 | </map>798 |
Generally, slicing an image for links should be used instead of image maps as fallback support for image maps is poorly supported.
801 |Sometimes, when you create a composite picture from multiple images, you may wish to link one or more of the images. Provide an alt attribute for each linked image to describe the purpose of the link.
804 |In the following example, a composite picture is used to represent a "crocoduck"; a fictional creature which defies evolutionary principles by being part crocodile and part duck. You are asked to interact with the crocoduck, but you need to exercise caution...
806 |
<h1>The crocoduck</h1> 808 | <p>You encounter a strange creature called a "crocoduck". The creature seems angry! 809 | Perhaps some friendly stroking will help to calm it, but be careful not to stroke 810 | any crocodile parts. This would just enrage the beast further.</p> 811 | <a href="?stroke=head"><img src="crocoduck1.png" alt="Stroke crocodile's angry, chomping head"></a> 812 | <a href="?stroke=body"><img src="crocoduck2.png" alt="Stroke duck's soft, feathery body"></a>813 |
Images of pictures or graphics include visual representations of objects, people, scenes, abstractions, etc. This non-text content can convey a significant amount of information visually or provide a specific sensory experience [[!WCAG20]] to a sighted person. Examples include photographs, paintings, drawings and artwork.
818 | 819 | 820 |An appropriate text alternative for a picture is a brief description, or name [[!WCAG20]]. As in all text alternative authoring decisions, writing suitable text alternatives for pictures requires human judgment. The text value is subjective to the context where the image is used and the page author's writing style. Therefore, there is no single 'right' or 'correct' piece of alt text for any particular image. In addition to providing a short text alternative that gives a brief description of the non-text content, also providing supplemental content through another means when appropriate may be useful.
821 |This first example shows an image uploaded to a photo-sharing site. The photo is of a cat, sitting in the bath. The image has a text alternative provided using the img element's alt attribute. It also has a caption provided by including the img element in a figure element and using a figcaption element to identify the caption text.
Lola prefers a bath to a shower.
825 |<figure> 826 | <img src="664aef.jpg" alt="Lola the cat sitting under an umbrella in the bath tub."> 827 | <figcaption>Lola prefers a bath to a shower.</figcaption> 828 | </figure>829 |
This example is of an image that defies a complete description, as the subject of the image is open to interpretation. The image has a text alternative in the alt attribute which gives users who cannot view the image a sense of what the image is. It also has a caption provided by including the img element in a figure element and using a figcaption element to identify the caption text.
The first of the ten cards in the Rorschach test.
834 |<figure> 835 | <img src="Rorschach1.jpg" 836 | alt="An abstract, freeform, vertically symmetrical, black inkblot on a light background."> 837 | <figcaption>The first of the ten cards in the Rorschach test.</figcaption> 838 | </figure>839 |
Webcam images are static images that are automatically updated periodically. Typically the images are from a fixed viewpoint, the images may update on the page automatically as each new image is uploaded from the camera or the user may be required to refresh the page to view an updated image. Examples include traffic and weather cameras.
844 |This example is fairly typical; the title and a time stamp are included in the image, automatically generated by the webcam software. It would be better if the text information was not included in the image, but as it is part of the image, include it as part of the text alternative. A caption is also provided using the figure and figcaption elements. As the image is provided to give a visual indication of the current weather near a building, a link to a local weather forecast is provided, as with automatically generated and uploaded webcam images it may be impractical to provide such information as a text alternative.
846 |The text of the alt attribute includes a prose version of the timestamp, designed to make the text more understandable when announced by text to speech software. The text alternative also includes a description of some aspects of what can be seen in the image which are unchanging, although weather conditions and time of day change.
View from the top of Sopwith house, looking towards North Kingston. This image is updated every hour.
849 |View the latest weather details for Kingston upon Thames.
850 |<figure> 851 | <img src="webcam1.jpg" alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds. 852 | In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial 853 | buildings, beyond are blocks of flats. In the distance there's a church steeple."> 854 | <figcaption>View from Sopwith house, looking towards north Kingston. 855 | This image is updated every hour.</figcaption> 856 | </figure> 857 | <p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> 858 | for Kingston upon Thames.</p>859 |
In some cases an image is included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum requirement is to provide a caption for the image using the figure and figcaption elements under the following conditions:
864 |In other words, the only content of the figure is an img element and a figcaption element, and the figcaption element must include (caption) content.
871 |Such cases are to be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.
872 |In this example, a person uploads a photo, as part of a bulk upload of many images, to a photo sharing site. The user has not provided a text alternative or a caption for the image. The site's authoring tool inserts a caption automatically using whatever useful information it has for the image. In this case it's the file name and date the photo was taken.
874 |The caption text in the example below is not a suitable text alternative and is not conforming to the Web Accessibility Guidelines 2.0. [[!WCAG20]]
875 |
clara.jpg, taken on 12/11/2010.
877 |<figure> 878 | <img src="clara.jpg"> 879 | <figcaption>clara.jpg, taken on 12/11/2010.</figcaption> 880 | </figure>881 |
Notice that even in this example, as much useful information as possible is still included in the figcaption element.
882 |In this second example, a person uploads a photo to a photo sharing site. She has provided a caption for the image but not a text alternative. This may be because the site does not provide users with the ability to add a text alternative in the alt attribute.
Eloisa with Princess Belle
887 |<figure> 888 | <img src="elo.jpg"> 889 | <figcaption>Eloisa with Princess Belle</figcaption> 890 | </figure>891 |
Sometimes the entire point of the image is that a textual description is not available, and the user is to provide the description. For example, software that displays images and asks for alternative text precisely for the purpose of then writing a page with correct alternative text. Such a page could have a table of images, like this:
894 |<table> 895 | <tr><tr> 896 | <th> Image 897 | <th> Description 898 | <tr> 899 | <td> 900 | <figure> 901 | <img src="2421.png"> 902 | <figcaption>Image 640 by 100, filename 'banner.gif'</figcaption> 903 | </figure> 904 | <td> <input name="alt2421"> 905 | <tr> 906 | <td> 907 | <figure> 908 | <img src="2422.png"> 909 | <figcaption>Image 200 by 480, filename 'ad3.gif'</figcaption> 910 | </figure> 911 | <td> <input name="alt2422"> 912 | </table>913 |
Since some users cannot use images at all (e.g. because they are blind) the alt attribute is only allowed to be omitted when no text alternative is available and none can be made available, as in the above examples.
915 |Generally authors should avoid using img elements for purposes other than showing images.
919 |If an img element is being used for purposes other than showing an image, e.g. as part of a service to count page views, use an empty alt attribute.
920 |An example of an img element used to collect web page statistics. The alt attribute is empty as the image has no meaning.
<img src="http://server3.stats.com/count.pl?NeonMeatDream.com" width="0" height="0" alt="">923 |
It is recommended for the example use above the width and height attributes be set to zero.
925 |Another example use is when an image such as a spacer.gif is used to aid positioning of content. The alt attribute is empty as the image has no meaning.
<img src="spacer.gif" width="10" height="10" alt="">928 |
It is recommended that that CSS be used to position content instead of img elements.
930 |An icon is usually a simple picture representing a program, action, data file or a concept. Icons are intended to help users of visual browsers to recognize features at a glance.
934 |Use an empty alt attribute when an icon is supplemental to text conveying the same meaning.
In this example, we have a link pointing to a site's home page, the link contains a house icon image and the text "home". The image has an empty alt text. Where images are used in this way, it would also be appropriate to add the image using CSS
<a href="home.html"><img src="home.gif" width="15" height="15" alt="">Home</a>
939 |
940 | #home:before { content: url(home.png);}
941 |
942 | <a href="home.html" id="home">Home</a>
943 | In this example, there is a warning message, with a warning icon. The word "Warning!" is in emphasized text next to the icon. As the information conveyed by the icon is redundant the img element is given in an empty alt attribute.
Warning! Your session is about to expire.
<p><img src="warning.png" width="15" height="15" alt=""> 948 | <strong>Warning!</strong> Your session is about to expire</p>949 |
When an icon conveys additional information not available in text, provide a text alternative.
951 |In this example, there is a warning message, with a warning icon. The icon emphasizes the importance of the message and identifies it as a particular type of content.
953 |Your session is about to expire.
<p><img src="warning.png" width="15" height="15" alt="Warning!"> 955 | Your session is about to expire</p>956 |
Many pages include logos, insignia, flags, or emblems, which stand for a company, organization, project, band, software package, country, or other entity. What can be considered as an appropriate text alternative depends upon, like all images, the context in which the image is being used and what function it serves in the given context.
961 |If a logo is the sole content of a link, provide a brief description of the link target in the alt attribute.
This example illustrates the use of the HTML5 logo as the sole content of a link to the HTML specification.
964 | 
<a href="http://dev.w3.org/html5/spec/spec.html"><img src="HTML5_Logo.png" alt="HTML 5.1 specification"></a>966 |
If a logo is being used to represent the entity, e.g. as a page heading, provide the name of the entity being represented by the logo as the text alternative.
968 |This example illustrates the use of the WebPlatform.org logo being used to represent itself.
970 |
and other developer resources
<h2><img src="images/webplatform.png" alt="WebPlatform.org"> and other developer resources<h2>972 |
The text alternative in the example above could also include the word "logo" to describe the type of image content. If so, it is suggested that square brackets be used to delineate this information: alt="[logo] WebPlatform.org".
If a logo is being used next to the name of the entity it represents, then the logo is supplemental. Include an empty alt attribute as the text alternative is already provided.
This example illustrates the use of a logo next to the name of the organization it represents.
977 |
WebPlatform.org
<img src="images/webplatform1.png" alt=""> WebPlatform.org979 |
If the logo is used alongside text discussing the subject or entity the logo represents, then provide a text alternative which describes the logo.
981 |This example illustrates the use of a logo next to text discussing the subject the logo represents.
983 |
HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.).
985 |<p><img src="HTML5_Logo.png" 986 | alt="HTML5 logo: Shaped like a shield with the text 'HTML' above and the numeral '5' 987 | prominent on the face of the shield."></p> 988 | 989 | Information about HTML5990 |
CAPTCHA stands for "Completely Automated Public Turing test to tell Computers and Humans Apart". CAPTCHA images are used for security purposes to confirm that content is being accessed by a person rather than a computer. This authentication is done through visual verification of an image. CAPTCHA typically presents an image with characters or words in it that the user is to re-type. The image is usually distorted and has some noise applied to it to make the characters difficult to read.
995 |To improve the accessibility of CAPTCHA provide text alternatives that identify and describe the purpose of the image, and provide alternative forms of the CAPTCHA using output modes for different types of sensory perception. For instance provide an audio alternative along with the visual image. Place the audio option right next to the visual one. This helps but is still problematic for people without sound cards, the deaf-blind, and some people with limited hearing. Another method is to include a form that asks a question along with the visual image. This helps but can be problematic for people with cognitive impairments.
996 |It is strongly recommended that alternatives to CAPTCHA be used, as all forms of CAPTCHA introduce unacceptable barriers to entry for users with disabilities. For further information, see [[TURINGTEST]].
997 |This example shows a CAPTCHA test which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content.
<img src="captcha.png" alt="If you cannot view this image an audio challenge is provided."> 1001 | <!-- audio CAPTCHA option that allows the user to listen and type the word --> 1002 | <!-- form that asks a question -->1003 |
alt attributeThe primary method for providing text alternatives for images is by including text in the img element alt attribute. In graphical browsers the content of the alt attribute is typically displayed along with an indication (bordered area and/or an image icon) of the presence of an image when the image is not displayed, because the user has disabled image display or the image source information is incorrect. Assistive technologies such as screen readers will typically announce the presence of an image followed by the alt attribute content. Text based browsers may display the alt attribute content in brackets or in different colored text or as the content of a link to the image or as text without any indication of the image or prefixed with an indication of the image.
<img src="example.jpg" alt="text alternative.">1015 |
alt attribute content does not impact upon the default visual display of content.alt attribute is not available to some users who may find it useful.alt attribute content is too long it may cause display issues in some browsers.alt attribute content is too long it may cause reading issues in some assistive technologies.alt attribute content.alt attribute content a replacement for an image?The answer to this question depends on the content of the image and the context the image is being used in:
1032 |alt attribute as a container for a text alternative, the alt attribute content can be a label for the image. This label may be a brief description that identifies the image. This should be accompanied by a more complete text alternative that is programmatically associated with the image.alt attribute as a container for a text alternative, the alt attribute content should be a label for the image. This label may be a brief description that identifies the image. This should be accompanied by a structured text alternative that is programmatically associated with the image. alt attribute content should be considered as a replacement for the image. alt attribute should be considered as an indication that the image can be safely ignored. alt attribute should be considered as an indication that the image can be safely ignored. Refer toalt attribute should be considered as an indication that the image can be safely ignored.alt attribute content should be a brief description of the link target. alt attribute content should be empty. alt attribute content may be empty or a text alternative for the image. If the text content is not a description of the link target, the alt attribute content should be a brief description of the link target.alt attribute alt=""Circumstances in which it is appropriate to use an empty or null alt attribute:
Circumstances in which it is not appropriate to use an empty or null alt attribute:
figure element and has an associated caption provided using the figcaption element. Using an empty alt attribute hides an image from some users. If an image has a caption the image needs to be discoverable by users, otherwise a caption is present that refers to nothing for some users.alt attribute hides an image from some users. In order to have the possibility of interrogating the image, the image must be discoverable.alt attribute hides an image from some users, which is incorrect. The image is not meaningless, it contains information which a range of users could interpret with the aid of the short text alternative and longer description. It also provides a text alternative for users who have images turned off in their browsers, so they can, if they wish, load and view the image. If an empty alt attribute is present there may be no indication that an image is present. Furthermore if a description of an image is provided in a document, a programmatic association between the image and the descriptive text is required. Using an empty alt attribute on the image effectively precludes the assigning of a programmatic association.A text alternative for an image should be as long as it needs to be to adequately convey the information in the image, in the context the image is being used.
1064 |alt text be?While there are no definitive right or wrong lengths for text alternatives provided using the img element's alt attribute, the general consensus is that if the text alternative is longer 30-50 words (2 to 3 sentences), it should not be considered a short text alternative and should not be presented using the alt attribute. Refer to the section - Graphical Representations: Charts, diagrams, graphs, maps, illustrations for example methods of providing longer text alternatives for images.
A text alternative provided using the alt attribute is exposed to screen reader users as a text string, generally announced as a chunk, and cannot be structured into paragraphs or have other markup added to aid comprehension.
figure and figcaption elementsThe figure and figcaption elements provide a method to explicitly associate a caption with a variety of content including images. Any content inside the figure element that is not contained within the figcaption element is labelled by the content of the figcaption element. The figcaption content may be an adjunct to the text alternative provided using the alt attribute:
The figcaption content may be a text alternative for the image, obviating the need for a text alternative provided using the alt attribute. This would only be the case if the figcaption content provides an adequate text alternative for the visual content in the image:
<img src="example.jpg" alt="Shadow like figures and a graffiti tag drawn on the walls of a partially 1078 | demolished building, illuminated by the light from a street lamp.">1079 |
Drawings on the walls of a partially demolished building (photo)
1082 |<figure>1085 |
<img src="shadows.jpg">
<figcaption>Drawings on the walls of a partially demolished building (photo). 1084 | </figcaption>
</figure>
figcaption will be explicitly associated with the image. figure and figcaption elements are not currently accessibility supported by all browsers. Until the figure and figcaption elements are widely accessibility supported by browsers and/or assistive technology it is recommended that role="group" be used on the figure element and in the case where the figcaption content is the text alternative, provide a label for the image in the alt attribute. These recommendations are illustrated in following example:
Shadow like figures and a graffiti tag drawn on the walls of a
1099 | partially demolished building, illuminated by the light from a street lamp (photo 1).
<figure role="group"> 1102 | <img src="shadows.jpg" alt="photo 1"> 1103 | <figcaption>]Shadow like figures and a graffiti tag drawn on the walls of a 1104 | partially demolished building, illuminated by the light from a street lamp (photo 1). 1105 | </figcaption> 1106 | </figure>1107 |
figure elements In cases where there is a group of related images each having an associated caption, it is recommended that nested figure and figcaption elements be used.
The castle through the ages: 1423, 1756, and 1966 respectively.
1113 |
Charcoal on wood. Anonymous, circa 1423
1115 |.
Oil-based paint on canvas. Eloisa Faulkner, 1756.
1117 |
Film photograph. Séraphin-Médéric Mieusement, 1936.
1119 | 1120 |<figure> 1121 | <figcaption>The castle through the ages: 1423, 1756, and 1966 respectively.</figcaption> 1122 | <figure> 1123 | <img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it."> 1124 | <figcaption>Charcoal on wood. Anonymous, circa 1423.</figcaption> 1125 | </figure> 1126 | <figure> 1127 | <img src="castle-painting.jpg" alt="The castle now has two towers and two walls."> 1128 | <figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption> 1129 | </figure> 1130 | <figure> 1131 | <img src="castle-fluro.jpg" 1132 | alt="The castle lies in ruins, the original tower all that remains in one piece."> 1133 | <figcaption>Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption> 1134 | </figure> 1135 | </figure>1136 |
The title attribute MUST NOT be used to provide a text alternative for an image. The title attribute MUST NOT be used to provide a caption for an image; use the figure and figcaption elements to provide a caption, as described above.
Gaiji is a term meaning "external characters". In general, this means characters that are not represented in existing Japanese 1147 | encoding systems such as [[UNICODE]].
1148 |Operating systems and other platforms provide a set of interfaces using an accessibility API that expose information about objects and events to assistive technologies. Assistive technologies use these interfaces to get information about and interact with those widgets. Examples of this are the Java Accessibility API [JAPI], Microsoft Active Accessibility [MSAA], the Mac OS X Accessibility Protocol [AXAPI], the Gnome Accessibility Toolkit (ATK) [ATK], and IAccessible2 [IA2].
1163 |The accessible name is the name of a user interface element. Each platform accessibility API provides the accessible name property. The value of the accessible name may be derived from a visible (e.g., the visible text on a button) or invisible (e.g., the text alternative that describes an icon) property of the user interface element.
1165 |Alt text is a colloquial term for a text alternative provided using the alt attribute of an img element.
An assistive technology is a hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents. A more detailed explanation of assistive technology is provided in the WCAG 2.0 glossary. [[!WCAG20]]
1169 |Information and sensory experience to be communicated to the user by means of a user agent such as a web browser, including code or markup that defines the content's structure, presentation, and interactions.
1171 |It must be possible for people using assistive technologies to find the text alternative for an image when they encounter the image that they cannot use. To accomplish this, the text must be "programmatically associated" with the image and is referenced as programmatic association. This means that the user must be able to use their assistive technology to find the alternative text (that they can use) when they land on the image (that they can't use).
1173 |A non-text content is any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language
1175 |Note: This includes ASCII Art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text.
1176 |alt attribute or null alt attribute.An alt attribute with no content:
1179 | <img src="null.gif" alt=""> 1180 |1181 |
Text that is programmatically associated with non-text content or referred to from text that is programmatically associated with non-text content. Programmatically associated text is text whose location can be programmatically determined from the non-text content. [[UNDERSTANDING-WCAG20]]
1183 |1187 | Incomplete and in no particular order - Heydon Pickering, David MacDonald, Laura Carlson, Josh O Connor, Gez Lemon, Anne van Kesteren, Ian Hickson, Mike Smith, Mike Paciello, Bim Egan, Gregory Rosmaita, Michael Cooper, Janina Sajka, Matt May, Bevi Chagnon, Jonathan Avila, Pat Rees, Charlie Pike, Andy Maseyk, Rich Clark.
1188 |