Атрибут ALT
altАтрибут визначено в наборі тегів (а саме img, areaі , можливо , для inputі applet) , щоб дозволити вам надати текстовий еквівалент для об'єкта.
Текстовий еквівалент приносить наступні переваги вашому веб-сайту та його відвідувачам у таких поширених ситуаціях:
- В даний час веб-браузери доступні в дуже широкому спектрі платформ з дуже різними можливостями; деякі взагалі не можуть відображати зображення або лише обмежений набір типів зображень; деякі з них можна налаштувати не завантажувати зображення. Якщо у вашому коді на зображенні встановлений атрибут alt, більшість із цих браузерів відображатиме опис, який ви дали замість зображень
- деякі ваші відвідувачі не можуть бачити зображення, будь вони сліпі, кольорові, малозорі; атрибут alt допомагає тим людям, які можуть покластися на нього, щоб добре уявити, що на вашій сторінці
- боти пошукової системи належать до двох вищезазначених категорій: якщо ви хочете, щоб ваш веб-сайт був індексований так добре, як це заслуговує, використовуйте атрибут alt, щоб переконатися, що вони не пропустять важливих розділів ваших сторінок.
Атрибут заголовка
Завданням цієї методики є надання контекстно-чутливої допомоги користувачам під час введення даних у форми шляхом надання довідкової інформації в titleатрибуті. Довідка може включати інформацію про формат або приклади введення.
Приклад 1: Спадне меню, що обмежує сферу
пошуку Форма пошуку використовує спадне меню для обмеження обсягу пошуку. Спадне меню безпосередньо примикає до текстового поля, яке використовується для введення пошукового терміна. Зв’язок між полем пошуку та спадною меню зрозумілий користувачам, які бачать візуальний дизайн, у якому немає місця для видимої мітки. titleАтрибут використовується для визначення selectменю. titleАтрибут можна говорити читання з екрану або відображається в вигляді підказки для людей , що використовують екран збільшувачі.
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
...
</select>
Приклад 2: Поля введення телефонного номера
Веб-сторінка містить елементи керування введенням номера телефону в Сполучених Штатах із трьома полями коду міста, обміну та останніми чотирма цифрами.
<fieldset>
<legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset>
Приклад 3: Функція пошуку
Веб-сторінка містить текстове поле, де користувач може вводити пошукові терміни, та кнопку з написом «Пошук» для здійснення пошуку. titleАтрибут використовується для ідентифікації елемента управління форми і кнопка розташована відразу після текстового поля так , щоб було зрозуміло користувачеві , що текстове поле , де пошуку повинен бути введений.
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
Приклад 4: Таблиця даних елементів форми управління
Таблиця даних елементів форми управління повинна пов'язувати кожен елемент управління із заголовками стовпців та рядків для цієї комірки. Без заголовка (або позаекранного LABEL) невізуальним користувачам важко призупиняти та допитувати відповідні значення заголовка рядків / стовпців, використовуючи їх допоміжну технологію під час прокладки форми.
Наприклад, форма опитування містить чотири заголовки стовпців у першому рядку: Запитання, Погодьтесь, Не визначившись, Не погодившись. Кожен наступний рядок містить питання та перемикач у кожній комірці, що відповідає вибору відповіді у трьох стовпцях. Атрибут заголовка для кожної радіо кнопки - це з'єднання вибору відповіді (заголовок стовпця) та тексту питання (заголовок рядка) з дефісом або двокрапкою як роздільником.
Елемент зображення
Дозволені атрибути, згадані в MDN .
altcrossorigindecodingheightimportance (експериментальна api)intrinsicsize (експериментальна api)ismapreferrerpolicy (експериментальна api)srcsrcsetwidthusemap
Як бачите, titleатрибут не дозволений всередині imgелемента. Я використовував би altатрибут, а якщо вимагає, я використовував би CSS (Приклад: псевдоклас :hover) замість titleатрибута.