Добавление полезной информации с помощью атрибута title
Большинство браузеров будут выводить значение атрибута title элемента img как всплывающую подсказку, когда на изображение перемещается указатель мыши (см. рисунок 17.2). Это может помочь посетителю больше узнать об изображении, но нельзя полагаться на то, что все посетители будут иметь мышь. Атрибут title может быть очень полезным, но он не является безопасным способом предоставления критически важной информации. Вместо этого он предлагает хороший способ, например, описать настроение изображения, или, что оно означает в контексте (inlineimagewithtitle.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of an inline image with alternative text and title</title>
</head>
<body>
<img src="balconyview.jpg" alt="View from my balcony, showing a row of houses,
trees and a castle"
title="What I see when I look out of my window;
the castle was one reason to move there.">
</body>
</html>
Если загрузить этот код в браузер, то можно будет увидеть изображение, показанное на рисунке 17.2.
Рис. 17.2. Атрибут title выводится как всплывающая подсказка во многих браузерах.
Использование longdesc для описания сложных изображений
Если изображение является очень сложным, как, например, график, можно предложить более длинное его описание, используя атрибут longdesc, чтобы люди, использующие считыватель экрана или при отключенном выводе изображений могли, тем не менее, получить доступ к информации, содержащейся в изображении.
Этот атрибут содержит URL, который указывает на документ, содержащий эту же самую информацию. Например, если имеется график, показывающий множество данных, можно соединить его с таблицей данных с той же информацией с помощью longdesc (inlineimagelongdesc.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of an inline image with longdesc</title>
</head>
<body>
<img src="chart.png" width="450" height="150" alt="Chart showing the fruit consumption
amongst under 15 year olds. Most children ate Pineapples,
followed by Pears" longdesc="fruitconsumption.html">
</body>
</html>
Файл данных fruitconsumption.html содержит очень простую таблицу данных, которая представляет данные графика:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fruit consumption</title>
</head>
<body>
<table summary="Fruit Consumption of under 15 year olds, March 2007">
<caption>Fruit Consumption</caption>
<thead>
<tr><th scope="col">Fruit</th><th scope="col">Amount</th></tr>
</thead>
<tbody>
<tr><td>Apples</td><td>10</td></tr>
<tr><td>Oranges</td><td>58</td></tr>
<tr><td>Pineapples</td><td>95</td></tr>
<tr><td>Bananas</td><td>30</td></tr>
<tr><td>Raisins</td><td>8</td></tr>
<tr><td>Pears</td><td>63</td></tr>
</tbody>
</table>
<p><a href="inlineimagelongdesc.html">Back to article</a></p>
</body>
</html>
Два различных представления данных рядом выглядят как показано на рисунке 17.3.
Рис. 17.3. Можно соединить документ со сложными данными с изображением, используя атрибут longdesc
Отметим, что не существует визуального ключа, который говорит о том, что имеется файл длинного описания, соединенный с этим изображением. Вспомогательные технологии однако позволят своим пользователям узнать, что имеется доступное альтернативное представление.