| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Додати до зображення альтернативний текст.
Рішення
Альтернативний текст показується на місці зображення в момент його завантаження або недоступність. Загалом, у ті моменти, коли картинка з якихось причин не видно. Зазвичай це трапляється, якщо користувач вимикає показ зображень в браузері або при повільному з'єднанні з сайтом. Альтернативний текст додається через атрибут alt тега <img> і є обов'язковим згідно специфікації HTML і XHTML. У прикладі 1 показано додавання альтернативного тексту до малюнка.
Приклад 1. Альтернативний текст
HTML5IECrOpSaFx
<!DOCTYPE html> <HTML> <head> <meta charset= "utf-8"> <title>Їжачки в нашому житті</title> </head> <body> <p><img src="images/igels.png" alt="Зображення їжачка"></p> </body> </html>
Деякі браузери, зокрема, Internet Explorer відображають альтернативний текст у вигляді спливаючої підказки. Для зображень, які виконують на сторінці дизайнерські або службові функції, це буває досить незручно, оскільки псує дизайн. В такому випадку можна вказати порожнє значення атрибута alt, як показано в прикладі 2.
Приклад 2. Порожнє значення alt
HTML5IECrOpSaFx
<!DOCTYPE html> <HTML> <head> <meta charset= "utf-8"> <title>Їжачки в нашому житті</title> </head> <body> <p><img src="images/igels.png" alt=""></p> </body> </html>
В даному випадку валідність документа зберігається, але при цьому альтернативний текст ніяк не проявляється.