Атрибут title что это: Атрибут title | HTML | WebReference

alexxlab

Содержание

Атрибут title | HTML | WebReference

Добавляет всплывающую подсказку с текстом, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменён напрямую с помощью HTML-кода или стилей.

Значения

Произвольная текстовая строка.

Значение по умолчанию

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Атрибут title</title> </head> <body> <p title=»А вот и я!»>Пример всплывающей подсказки</p> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид всплывающей подсказки

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 19.03.2018

Редакторы: Влад Мержевич

Атрибут title | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+1.0+1.0+1.0+

Описание

Описывает содержимое элемента в виде всплывающей подсказки, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.

Синтаксис

title="текст"

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo><bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут title</title>
 </head>
 <body>
  <p title="А вот и я!">Пример всплывающей подсказки</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид всплывающей подсказки

настройка работы со ссылками, изображениями и другими элементами

От автора: атрибут title всегда окружен шумихой. И понятно, почему презрение к атрибуту в значительной степени оправдано. В июне 1993 года, двадцать четыре с половиной года назад, title был предложен в рамках проекта HTML 1.2. В основном он отображается как всплывающая подсказка в настольных браузерах, или, когда пользовательская мышь наводится на элементы разметки, где установлен данный атрибут. Из-за этого с момента его создания он стал универсальной задачей обеспечения удобства использования, так как не все пользователи постоянно могли взаимодействовать с ним.

Ошибочные и устаревшие методы SEO наряду с общими недоразумениями в правильном использовании превратили title в парию для многих разработчиков и укрепили его слабую репутацию.

Если бы этого было недостаточно, руководство по спецификации HTML W3C довольно сложное: В настоящее время полагаться на title не рекомендуется, так как многие пользовательские агенты не предоставляют атрибут доступным образом, как этого требует спецификация (например, требуется, чтобы указывающее устройство, такое как мышь, вызывало всплывающую подсказку, что исключает пользователей keyboard-only и touch-only, или, например, любого, у кого есть современный телефон или планшет).

Поддержка доступности для различных программ чтения экрана поступает в dribs и drabs в течение многих лет жизни title. На самом деле, это намного проще, чем вы думаете.

Хотя большая поддержка должна быть хорошей, на самом деле это одна из самых больших проблем, с которой я сталкиваюсь при работе с атрибутом. Из-за неправильного использования поддержки чтения экрана опыт, который получают пользователи, может быть печальным.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Даже несмотря на то, что были написаны статьи , излагающие dosи dont для title, время и многие вещи изменились. Имея это в виду, я написал статью, которая не направленна на содействие использованию атрибута, поскольку я полностью согласен с заявлением, сделанным здесь:

Так что, если вы собираетесь остановиться на TLDR , тогда я прошу вас помочь исполнить желание Карла.

Но если вас в целом интересует текущее состояние поддержки доступности title, вы хотите узнать несколько примеров, где атрибут действительно может быть полезным, и понять, почему этой встроенной подсказке HTML никогда не удается оправдать ожидания, есть еще много, чего почитать.

Настройка уровня

Когда кто-то думает о title атрибуте, то, вероятно, в контексте ссылок. Если вы знакомы с управлением носителями в WordPress, вы также можете связать их с изображениями. Но знали ли вы о поддержке доступности title для полей формы? Знаете ли вы, что при выпуске спецификации HTML5 title он стал глобальным атрибутом и может использоваться для любого элемента HTML?

Что все это означает с точки зрения title «полезности»? И самое главное, что из этого действительно доступно?

Если бы title был просто :focus!

В течение всего времени большинство браузеров до сих пор не реализовали никакой поддержки title, чтобы выявить ценность атрибута для зрячих пользователей, не использующих мышь.

Это означает, что зрячие пользователи, использующие клавиатуру в качестве основного средства навигации по сети, скорее всего, не столкнутся со всплывающими подсказками title. Пользователи, которые полагаются на другие средства, такие как программное обеспечение для распознавания голоса, тоже не получат много пользы от title. По сути, если зависание не вариант, вы никогда не узнаете, что всплывающая подсказка существует.

Тем не менее, есть множество пользователей, которые могут получить доступ к некоторым файлам title в своем браузере на рабочем столе без мыши. До тех пор, пока они просматриваются с помощью Internet Explorer 10, 11 или Microsoft Edge.

Правильно, потребовалось девятнадцать лет, но начиная с Internet Explorer 10, выпущенного в 2012 году, сфокусированные элементы с titles отображают свои подсказки после короткой паузы, как если бы они были под зависшим курсором мыши.

Тем не менее, ни один поставщик браузеров, осуществляющий поддержку фокуса, не обеспечивает надежного доступа для всех. И никто не делает ничего, чтобы выявить неактивные элементы title, вроде изображений. И если вы думаете: «Ну, мы могли бы добавить tabindex=»0″к этим элементам, чтобы они реагировали на фокус клавиатуры», остановитесь. Просто остановись прямо сейчас.

Добавление tabindex к не-фокусируемым элементам приводит к дополнительным остановкам фокуса. Это создает плохое впечатление пользователей, нарушая ожидания того, что должно быть ориентируемо, и приводит к тому, что требуется больше времени для навигации по клавиатуре.

Теперь отодвинем tabindex в сторону, давайте не будем забывать о title на сенсорных устройствах. Если вы не используете устройство чтения экрана (немного подробнее об этом), title атрибуты почти полностью бесполезны, за исключением одного элемента: изображений.

Снимок экрана iOS 11 показывает, что title изображение будет отображаться в popover-меню, которое загружается, когда пользователь выполняет длительное нажатие на изображение. Это работает в мобильных Safari и Chrome на iOS и Chrome на Android. Но это не является неотъемлемой функцией всех мобильных браузеров. Например, используя Brave браузер iOS, title изображение не отображается при выполнении такого же длительного нажатия.

Опять же, один элемент, раскрывающий таким образом ценность title, который не является дискуссивно простым или хорошим пользовательским интерфейсом (UX), не универсален ни в коем случае.

Таким образом, с точки зрения полезности для зрячих пользователей, помимо нескольких примеров дополнительной поддержки, здесь и там, если не полагаться на использование мыши, title все еще довольно плох, особенно если они используется для не-фокусируемых элементов.

Что насчет экранных считывателей?

Хотя поддержка не идеальна, она может быть намного лучше, чем вы думаете. Понятно, что, если кто-то знает о проблемах доступности title для зрячих пользователей, почему бы не предположить, что пользователи с экрана читают лучше?

Вот где предположения и устаревшая информация о поддержке title омрачили некоторые из достижений атрибута.

Хотя он title может использоваться для любого элемента HTML, в отношении считывателей экрана он в первую очередь остается полезным (более или менее) только для некоторых элементов.

Глобальные элементы

Хотя атрибут title может использоваться для любого элемента HTML, он по существу растрачивается на большинство встроенных элементов текстового уровня. Поскольку эти элементы обычно не включены в дерево доступности , нет никаких оснований для того, чтобы считыватель экрана искал информацию об этих элементах для объявления.

Элементы обтекания блока могут получить некоторое использование из title. JAWS, NVDA и VoiceOver будут все объявлять title об элементах как ориентиры (header, footer, main и т.д.), но поддержка может варьироваться в зависимости от других элементов и в зависимости от вашего браузера. Например, JAWS не будет анонсировать title на div без дополнительных role обновлений.

Другие элементы упаковки, такие как списки и абзацы, объявляются в JAWS и VoiceOver, но NVDA игнорирует атрибут этих элементов. Честно говоря, использование title подсказок на этих элементах очень подозрительно. Почему вы хотите, чтобы всплывающая подсказка постоянно появлялась на большом фрагменте контента? Если вы целенаправленно не пытаетесь скрыть контент, то, не думаю, что нужно использовать title.

Изображения, поля формы и привязки — это элементы, которые, скорее всего, будут ассоциироваться с title атрибутом. Что касается считывателей экрана, атрибут title по существу получает оценку «B» при просмотре общедоступных графиков поддержки чтения экрана от powermapper.com.

Атрибуты title предназначены для описания дескриптивного текста. И в основном только в ситуациях, когда нет доступного имени для изображения, поля формы или элемента привязки, заголовок будет повышен до доступного имени. Например:

<img src=»my-image.jpg» title=»The 3 little pigs build their houses»> <input type=»text» title=»First Name»> <a href=»/» title=»home» ></a>

<img src=»my-image.jpg» title=»The 3 little pigs build their houses»>

 

<input type=»text» title=»First Name»>

 

<a href=»/»

  title=»home»

  style=»

    display: inline-block;

    height: 20px;

    width: 20px;

    background: url(home-icon.png) no-repeat;

  «></a>

В значительной степени по всему экрану считыватели экрана объявят title как доступное имя элемента в примере кода. (проверьте, пожалуйста, с этой демонстрацией CodePen).

Но поддержка со стороны, это еще не самый лучший выбор, как последовательное средство для передачи доступной информации. Потому что, хотя title обеспечивает доступное имя элементам в отсутствие других источников, он всё же считается резервным. За исключением некоторых заметных исключений (подробнее об этом позже), другие механизмы всегда будут предпочтительнее.

Изображения

При использовании title вместо изображения alt, как уже упоминалось, title будет использоваться как доступное имя для изображения. Но, немного отступлю, с этим есть некоторые проблемы. Во-первых, валидаторы все равно будут выдавать ошибку, если alt отсутствует в изображении.

Валидатор Nu HTML по-прежнему будет возвращать ошибку, поскольку отсутствует alt, даже если был установлен title.

Кроме того, если изображение должно сломаться или быть целенаправленно подавлено, большинство браузеров не будут печатать значение title на своем месте.

Хром разбивает пресс-форму так, как будто нет alt, title отображается на экране. Однако, поскольку мы должны искать надежность согласованности, поддержка браузера по-прежнему неадекватна.

Если кто-то хочет предоставить изображение с дополнительным контекстом, то title это плохой выбор из-за всех тех вещей, которые мы уже рассмотрели, а также того факта, что ценность title должна быть строго написана, чтобы не вызывать ненужной многословности пользователей экранного чтения. Например:

<img src=»banana.jpg» alt=»A yellow banana» title=»a yellow banana»>

<img src=»banana.jpg» alt=»A yellow banana» title=»a yellow banana»>

Вышеприведенное img имеет alt и title с тем же значением, за исключением того, что alt начинается с заглавной «А».

Эта, казалось бы, незначительная разница заставляет VoiceOver + Safari читать оба значения. Если изображение сломано, JAWS18 + Firefox также прочитают оба значения. В сценариях, где отображается изображение, title игнорируется в пользу alt, даже когда значение alt и title очень разные. NVDA также никогда не читает title, если существует alt.

Имея соответствие alt и title могут показаться глупостью для большинства, но это, к сожалению, намного более распространено, чем можно подумать. Как отмечалось ранее, казалось бы, незначительные детали, такие как капитализация, могут вызывать повторяющиеся объявления, которые, к сожалению, также не уникальны для анонсов изображений.

Вместо этого используются шаблоны figure и figcaption, если дополнительный контекст должен быть передан всем пользователям:

<figure> <img src=»banana.jpg» alt=»a banana»> <figcaption> <p>Outside of knowing this is an image of a banana, here is context, useful to all users, as to why said banana image was included here. Now you know.</p> </figcaption> </figure>

<figure>

  <img src=»banana.jpg» alt=»a banana»>

  <figcaption>

    <p>Outside of knowing this is an image of a banana, here is context,

    useful to all users, as to why said banana image was included here.

    Now you know.</p>

  </figcaption>

</figure>

Якорные ссылки и поля формы

Давайте посмотрим, title как тарифы со ссылками и полями формы (в частности, текстовые входы в этом примере):

Чтобы быстро обобщить некоторые выводы:

В зависимости от взаимодействия браузера и экрана, результаты могут быть не такими, как ожидалось. Результаты зависят от метода навигации по документу.

Например, при использовании клавиш arrow для навигации по контенту обычно игнорирует title атрибут.

Однако при использовании клавиш tab (или быстрых клавиш чтения с экрана) обычно объявляются как доступное имя, так и значение.

Как упоминалось в изображениях, разные комбинации браузеров и скринсейверов будут иметь избыточные объявления, если title и доступные значения имени имеют незначительные различия в капитализации. В некоторых случаях одинаковые значения могут по-прежнему выдавать индивидуальные объявления в зависимости от режима чтения с экрана + браузера.

Это распространенное злоупотребление title атрибутом:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

<a href=»/» title=»home»>Home</a>

<a href=»/» title=»home»>Home</a>

Там, где разработчики могут подумать, что они «помогают» в доступности ссылок, это фактически делает ссылку раздражающей для разбора, поскольку «home» объявляется дважды.

В контексте inputs title можно считать полезным, чтобы помочь передать контекстуальную помощь для ввода данных. То есть, если бы не тот факт, что за пределами браузеров Microsoft наблюдаемые пользователи клавиатуры не будут иметь доступ к подсказке при начальном фокусе ввода.

Кроме того, атрибуты title и aria-describedby плохо работают вместе. Что имеет смысл: title это aria-describedby, как label есть aria-label.

Примите во внимание следующее:

<label for=»un»> Set Username </label> <input type=»text» title=»these special characters (!, *, $, %) are not allowed» aria-describedby=»error_msg»> <span></span>

<label for=»un»>

  Set Username

</label>

<input type=»text»

  title=»these special characters (!, *, $, %) are not allowed»

  aria-describedby=»error_msg»>

<span></span>

В приведенном выше примере показано, что input с title информирующие пользователей специальными символами запрещены. Опять же, эта информация недоступна для знакомых нам пользователей клавиатуры за пределами браузеров Microsoft, но давайте отложим это на минутку.

Считыватели экрана будут сообщать информацию о специальных символах, и это хорошо. Однако возникает проблема, если там пробирается специальный символ. Сообщение об ошибке обновляется и говорит: «Вы использовали специальный символ! Прекратите!». Примечание. Мне не разрешено писать копию ошибки.

Теперь текст title был заменен aria-describedby текстом ошибки, поэтому инструкции исчезли, и пользователь не может вспомнить, какие специальные символы не были разрешены. Бу.

Хотя я не являюсь частью первоначальных тестов, Стив Фолкнер отметил, что, если использовать валидацию формы HTML5 по умолчанию для браузера, то title можно использовать при отображении сообщения об ошибке для input.

Пример Chrome, отображающий сообщение об ошибке, используя сообщение обозревателя запаса и включая значение заголовка с отображаемой подсказкой всплывающей подсказки.

Ознакомьтесь со строкой валидации и title демо.

Краткое резюме результатов:

На Mac Safari не использует сообщение об ошибке title в строке. Chrome использует, но сообщение о валидации не объявляется с помощью VoiceOver.

В Windows, Firefox, IE11, Edge и Chrome все они используют title с собственным неверным сообщением об ошибке, которое появится при попытке отправить форму.

С NVDA, Chrome, Firefox и Edge объявят сообщение об ошибке title и значение в строке.

С JAWS18 только при использовании Firefox будет выдано неверное сообщение об ошибке и title будет объявлено.

В конечном счете, видимая метка с четкими инструкциями намного лучше для всех пользователей, включая тех, кто перемещается с помощью вспомогательных технологий, чем title, применяемый только для небольшого количества неизвестных пользователей. Например:

<div> <label for=»password»> Create password </label> <p> Use at least one special character, so as to better ensure you’ll consistently forget your password and throw your keyboard out a window. </p> </div>

<div>

  <label for=»password»> Create password </label>

  <p>

    Use at least one special character, so as to better

    ensure you’ll consistently forget your password and

    throw your keyboard out a window.

  </p>

</div>

Использование углового случая Title с входами

Несмотря на то, что рекомендация должна состоять в том, чтобы просто держаться подальше от title атрибута для ввода данных, на самом деле существует пара примеров, когда использование title как доступного имени будет правильном решением.

Поиск inputs или inputs в таблицах

Вы, вероятно, встречали эти шаблоны много раз. Поиск в заголовке документа, где нет видимого ярлыка. Или как inputs (флажки или текстовые входы) в таблицах, где флажок может использоваться для маркировки строки для редактирования или удаления. Или текстовый ввод, поэтому отдельные данные ячеек могут быть изменены.

В случае ввода поиска обычно есть увеличительное стекло в виде значка на входе. Шаблон настолько распространен, что местоположение и значок обычно являются единственными ссылками, цели ввода которых пользователь должен понимать. Вместо того, чтобы создавать визуально скрытую метку или использовать aria-label, чтобы объявить доступное имя input, используйте title=»Search site/app». Вы получите бесплатную подсказку для пользователей и доступное имя, которое вам нужно для чтения экрана.

Что касается inputs в таблицах, часто недостаточно места, чтобы выделить видимую метку для ввода. Однако, если таблица настроена соответствующим образом с четко определенными заголовками столбцов и/или строк, то потенциальные пользователи могут, вероятно, объединить цель этих входов. Опять же, вместо использования скрытого текста или ARIA, попробуйте использовать собственный title атрибут, чтобы дать этим входам уникальные доступные имена.

Другие варианты использования title

Вне потенциальных возможностей использования input элементов присутствуют заметные случаи, когда рекомендуемый атрибут для доступа пользователей с точки зрения доступности это title.

Использование title на abbr элементах

Сокращения, аббревиатуры и числонимы (например, «a11y» ) весьма полезны для уплотнения длинного слова или слов в единый сокращенный объект. Но они могут быть неприятными для тех, кто не знаком с стенографией.

Хотя всегда лучше написать полную версию слова (ов) и сделать прямую связь с их сокращением или аббревиатурой, элемент, используя title атрибут, может помочь сделать эти сокращения более понятными для некоторых пользователей. Например, введите термин, используя его в полном объеме, со ссылкой на стенографию:

<p> The World Wide Web Consortium (W3C)… </p>

<p>

  The World Wide Web Consortium (W3C)…

</p>

Затем, когда этот термин используется снова, оберните его abbr элементом и установите полное значение title.

<p> Again, the <abbr title=»World Wide Web Consortium»>W3C</abbr>… </p>

<p>

  Again, the <abbr title=»World Wide Web Consortium»>W3C</abbr>…

</p>

Поскольку abbrэлемент не является и не должен быть неотъемлемо ориентируемым, всплывающая подсказка title не будет доступна через стандартную навигацию по клавиатуре. Но люди, использующие определенные программы чтения экрана и браузеры, будут объявлены им title, вместо видимой стенографии.

Если вы попробуете это сделать и не слышите объявленные title, вам может потребоваться изменить настройки экрана. Например, чтобы включить эту функцию с JAWS, откройте Центр настроек и разверните группу Web / HTML / PDFs . Затем разверните группу чтения и включите аббревиатуру Blamo. Вместо аббревиатуры объявляется title.

Очевидно, что не доступное для всех пользователей, использование title с abbr будет считаться улучшением доступности для тех, у кого есть правильные настройки чтения экрана, и пользователям мыши. Несмотря на это, по — прежнему будут пользователи, как увидели клавиатуры пользователи, кто не в состоянии получить доступ к abbr title, использование которых не будет иметь пагубные последствия для их пользователей. Это до тех пор, пока полный термин используется полностью и последовательно до его сокращения.

Использование title на iframe

В отличие от усиления символа title на abbr, использование title на iframe действительно важно для соответствия критериям успеха WCAG , так как это рекомендуемый способ предоставить доступное имя для фреймов, используя только собственный язык HTML. Например:

<iframe src=»//scottohara.me» title=»Scott’s website»></iframe>

<iframe src=»//scottohara.me» title=»Scott’s website»></iframe>

title служит для того, чтобы предоставить пользователям программы чтения экрана понимание содержимого iframe. Понимание title iframe даст им контекст для контента, с которым они собираются взаимодействовать, и поставит любой контент, который пользователь встретит в нем в перспективе.

Например: «Почему тон автора изменяется так сильно? О, подождите, это потому, что это совсем другой сайт. Фантастика. Вытащи меня отсюда…»

Использование title на link и style

В последнем примере использования title атрибута документы, которые предоставляют альтернативные темы (разные таблицы стилей или style в head), title могут использоваться для обозначения каждой из таблиц стилей для выбора пользователя в браузере Chrome. Например:

<link rel=»stylesheet» href=»normalize.css»> <link rel=»stylesheet» href=»app.css» title=»Default Theme»> <link rel=»alternate stylesheet» href=»app.dark.css» title=»Dark Theme»> <style title=»Dark Theme»> /* dark styles go here */ </style>

<link rel=»stylesheet» href=»normalize.css»>

<link rel=»stylesheet» href=»app.css» title=»Default Theme»>

<link rel=»alternate stylesheet» href=»app.dark.css» title=»Dark Theme»>

<style title=»Dark Theme»>

    /* dark styles go here */

</style>

В фрагменте кода стандартная таблица normalize.css и app.css будут загружаться по умолчанию, так как normalize.css не имеет title атрибута, а таблица стилей app.css не имеет rel=»alternate».

CSS в app.dark.css и <style title=»Dark Theme»> не должен отображаться в браузерах, которые уважают использование title атрибута для style элементов. Если вы соберётесь пробовать, я настоятельно рекомендую проверить все браузеры, просто чтобы быть в безопасности.

Если вы используете Firefox, перейдите в меню «View menu», выберите «Page Style», а затем выберите «No Style», «Default Theme» или «Dark Theme».

Поскольку это использование title атрибута не имеет широкой поддержки от других браузеров, это хороший пример атрибута, надевающего одежду в спортзал, который делает растяжку, а затем смотрит Netflix с выпивкой.

Это позор, потому что предлагая альтернативные таблицы стилей должен быть идеальный способ, обеспечивающий пользователям выбор наилучшего способа просмотра веб-сайта или приложения. Например, хотите поддерживать браузеры, которые не поддерживают запрос с уменьшенным движением ? Что ж, слишком жаль, что они также, вероятно, не поддерживают альтернативную таблицу стилей, которая могла бы пересмотреть дизайн, без необходимости полагаться на режим чтения или собственную таблицу стилей.

Для получения дополнительной информации и рабочей демо (с Firefox!), Смотрите MDN’s документацию по Alternate Style Sheets.

Заключение

Атрибут title предоставил проблески его потенциальной полезности. Но из-за некоторых плохих практик и непоследовательной поддержки многие случаи использования атрибутов заголовков вредны в лучшем случае для тех, кто имеет к ним доступ.

Постоянное отсутствие поддержки со стороны всех поставщиков браузеров для выявления пользователей title, не являющихся пользователями мыши, а также тот факт, что всплывающие подсказки в целом вызывают неадекватность пользовательских интерфейсов, должны сдерживать их использование для более простого и всегда доступного контента.

Автор: Scott O’Hara

Источник: //www.24a11y.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Атрибут title — Примеры

Атрибут

title в HTML

Атрибут title создаёт всплывающую подсказку при наведении курсора мышки на элемент. Внешний вид подсказки изменить нельзя.

<mark title="всплывающая подсказка">содержимое</mark>
Значением атрибута может быть только текст. Но возможен его перенос на другую строку: навести на меня
<mark title="строка 1
строка 2
строка 3">содержимое</mark>
Для того, чтобы внутри title сделать кавычки, их следует заменить на специальные символы.
<a href="#" title="&quot;какой-то текст&quot;">специальные символы</a>

title в ссылках | SEO

Атрибут title не индексируется (не будет найдена страница, на которой он располагается) и не передаёт динамический вес (не будет найдена страница-акцептор): Яндекс, Google. Иначе говоря, для SEO абсолютно бесполезен. Но он удобен для пояснения второстепенных деталей посетителям, например, как это сделано на shpargalkablog.ru в верхнем меню.

title в изображениях | SEO

Атрибут title в картинках не индексируется, но в Гугл передаёт анкорный вес странице-акцептору. В Google атрибут alt индексируется и передаёт анкорный вес: title в ссылке: Яндекс, Google
title в картинке: Яндекс, Google
alt в картинке: Яндекс, Google

Вывод:

  1. меню из ссылок-картинок или логотип веб-проекта сможет «прочитать» и оценить только Google,
  2. только Гугл будет учитывать атрибут alt у изображения внутри тега h в структуре заголовков страницы сайта (подробнее).

По результатам эксперимента Devaka от 2011 года (нужна перепроверка) [devaka.ru] title в теге img индексируют только Яндекс.Изображения. Сервис учитывает 275-280 символов текста, который берётся в равных частях из alt и из title. Для Картинок.Google нужен только alt.

Также следует обязательно ознакомиться с support.google.com и help.yandex.ru.

Атрибуты alt и title

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Что такое альт-теги?

Альт-теги — это текстовое описание содержимого графического изображения на странице, позволяющего получить более полную информацию о нём и улучшить навигацию на сайте. Для тех пользователей, которые выключают графические изображения в браузере, удобно будет по тегу alt определить, что должно было быть на картинке. А title содержит в себе подсказку для изображения, всплывающую при наведении курсора.

Все мы уже знаем, как важно разбивать текст на блоки, добавлять картинки, визуально делающие текст привлекательным и более лёгким для восприятия. Если представить SEO как скачки на ипподроме, то к финишу первой всегда придёт лошадь, которая выложилась на полную. Где надо ускорилась или прошла по внутреннему кругу, да и жокей был максимально лёгким в облегающем костюме. Так и здесь — нужно выжать из продвижения по максимуму. Поисковый робот, который пробежит по вашей странице и увидит оптимизированное изображение, прекрасно поймёт, что там изображено, когда прочтёт тег alt. Он внесёт эту информацию в индекс, и вы получите SEO-плюс для своей странички и преимущества в выдаче.

 

Атрибут alt (alternative text) — это атрибут тега <img>, позволяющий поисковому роботу «увидеть» изображение и проиндексировать его. По сути, краткое описание того, что изображено на картинке

Атрибут title — это атрибут <img>, выполняющий роль заголовка для изображения. Он формирует всплывающие подсказки для картинки.

 

Так выглядят теги альт и тайтл в коде страницы:

<img itemprop=»image»/upload/iblock/61f/pg_600g_pervyy_prikorm.jpg» alt=»Фото Pedigree — сухой корм первый прикорм с курицей и рисом педигри для щенков всех пород от 3 недель» title=»купить pedigree первый прикорм с курицей и рисом для щенков с 3 недель» data-giftd-block-id-product=»11″>

 

Правила написания текста в атрибутах alt и title

  • Описание должно полностью соответствовать содержимому картинки.
  • Должны содержать ключевое слово.
  • На одной и той же странице должны быть разные alt теги. Если использовать одни и те же ключи для всех изображений, эта страница будет плохо ранжироваться, и есть шанс попасть под фильтр АГС
  • Оптимальный объём — от 3-ех до 10-ти слов для alt. Title должен быть длиннее, более развёрнутым.
  • Тексты для alt и title должны отличаться

 

Задаём alt для изображений

В большинстве CMS задать такой атрибут довольно просто. Например, в Wordpress кликаем правой кнопкой на картинку -> «Редактировать» -> добавляем описание атрибута alt.

Во множестве CMS функционал похожий. В некоторых есть даже плагины для шаблонной постановки этих тегов. Для того, чтобы вручную прописать атрибут alt — ориентируйтесь на синтаксис тега <img>, представленный выше.

Если хотите развёрнутой информации, то она есть в статье нашего блога.

 

Допустим, посещаемость вашего сайта растёт на глазах, но даже в этом случае не нужно пренебрегать оптимизацией изображений. Это возможность получать больше трафика, на уже вложенные ресурсы. Ключи вписаны в тексты идеально, техническая сторона сайта на высоте, посетителей немало, но может быть ещё больше. В этом поможет оптимизация изображений на сайте, ведь в ранжировании поисковых запросов так же участвуют и фото. А ещё, есть шанс собирать дополнительный трафик с запросов «+ фото».

Атрибуты alt и title для картинок: что это и для чего используется

SEO

Атрибут Alt (Альт) – это элемент тега img языка html, позволяющий установить альтернативный текст для изображения. Свое название этот атрибут получил как сокращение от английского «alternative».

В языке html синтаксис атрибута alt выглядит следующим образом:

<img src="images/yellow-sports-car.jpg" alt="спортивный автомобиль желтого цвета"></a>

В панели администрирования различных платформ предусмотрены отдельные поля для ввода альтернативного текста. Например, в WordPress окно заполнения атрибутов картинки выглядит так:

Для чего заполнять alt

  • Текстовая информация введенная в alt будет отображаться на странице вместо рисунка. В случае возникновения любых проблем с загрузкой изображений (удаленные изображения, отключение или низкая скорость загрузки) отобразится альтернативный текст. Значение атрибута позволяет понять посетителю, что должно находится на картинке.
  • Данные из атрибутов используются в сервисах озвучивания текста.
  • Поисковые системы, такие как Yandex или Google, индексируют на страницах сайта не только текст, но и графическую информацию. Для того чтобы показать в поисковой выдаче более релевантные картинки, поисковые системы могут ориентироваться на информацию введенную в Alt.
  • Улучшение оптимизации страницы.

Атрибут Title для картинок

Вместе с атрибутом Alt можно прописать атрибут Title. Title является универсальным атрибутом и описывает содержимое картинки при наведении указателя мышки на изображение.

Синтаксис title для картинок

В языке html синтаксис выглядит так:

<img src="images/yellow-sports-car.jpg" alt="спортивный автомобиль желтого цвета" title=”Заголовок картинки с желтой машиной”></a>

Правила заполнения Alt

При заполнении атрибута alt для картинок следует придерживаться нескольких простых правил:

  • Не стоит использовать длинные тексты. Фраз до 5-6 слов более чем достаточно.
  • Альтернативный текст должен точно описывать то, что изображено на картинке. Нет смысла добавлять описание животного к фотографии велосипеда.
  • В описании изображений (если изображения соответствуют смыслу страницы) стоит использовать основные ключевые слова страницы.
  • Не допускайте переспам ключевых слов в атрибутах.
  • Для картинок, которые формируют дизайн сайта или не несут смысловую нагрузку можно не заполнять Alt.

Правила заполнения Title

  • Title должен отражать то, что изображено на рисунке.
  • Желательно использовать небольшой по длине заголовок.
  • Наличие основных ключевых слов в title.
  • Не желательно использовать общие слова, такие как «изображение», «фото» и т.д

Возможные проблемы при заполнении атрибутов

  • Большинство интернет магазинов стараются представить свои товары максимально детально. В каждой карточке товара могут быть 3-5 картинок. Главное правило – не выдумывать какие-то сложные названия. Просто к описанию добавьте номер изображения, например: «Стиральная машина ZANUSSI ZWSO – изображение 1», «Стиральная машина ZANUSSI ZWSO — изображение 2». Допускается использование одинакового значения атрибута для всех изображений товара.
  • Разные цвета товара. В этом случае в шаблонный текст атрибута вставляем значение цвета. Например: «желтый диван», «синий диван» или «вечернее платье синего цвета», «вечернее платье темно зеленого цвета».
  • Большое количество товаров. Если в интернет магазине десятки тысяч товаров, то заполнить для всех изображений Alt вручную не представляется возможным. Тогда можно сгенерировать описания следующим образом: «Заголовок Н1» + «Артикул товара» + «Номер изображения». По такой формуле программисты смогут быстро сгенерировать описания для всех изображений.

Все перечисленные моменты однозначно дадут положительный результат при продвижении сайта в поисковых системах. Главное правильно заполнить всю необходимую информацию.

Статья написана Михаилом Шешуковым — бывшим сотрудником Smenik Agency.

Поделиться этой записью

Основатель Smenik Agency, Oboi-Store.ru. Серийный предприниматель.

Навигация по записям

Получи бесплатный аудит своего сайта

от команды профессионалов

Вам будет интересно

Атрибут Alt или title для тега i



Я использую font-awesome и показываю их шрифты вот так:

<i></i>

На экране появится симпатичный маленький символ замка. Чтобы пользователь знал, что именно это означает, я попытался добавить такие атрибуты, как title и alt, но безрезультатно.

Есть ли какой-нибудь атрибут, который я могу использовать для тега <i> , выполняющего ту же задачу, что и alt для изображений и title для ссылок?

html tags font-awesome
Поделиться Источник weltschmerz     31 июля 2012 в 18:25

5 ответов

  • Атрибут Alt или title для кроссбраузерной подсказки HTML?

    Я ищу кроссбраузерное решение для отображения информации при «hovering» на элементе, я знаю, что это можно сделать с помощью JS динамически, но в данном конкретном случае я бы предпочел базовое статическое решение HTML. Согласно веб-сайту разработчиков mozilla ( здесь ), использование…

  • Является ли атрибут ‘title’ релевантным в теге <img> ?

    Я хотел знать, является ли добавление атрибута ‘title’ семантически релевантным для тега ‘img’. Я уже всегда использую атрибут ‘alt’, чтобы соответствовать спецификации W3C. И если да, то должно ли содержимое атрибута ‘title’ отличаться от атрибута ‘alt’ ?


156

Вы можете использовать атрибут title для элемента i , как и любой другой элемент, например

<i title="This symbolizes your being locked inside"></i>

Помогает ли это-более сложный вопрос. Браузеры обычно показывают значение атрибута title как “tooltip” при наведении курсора мыши, но зачем пользователю наводить курсор мыши на значок? И такие подсказки имеют плохое удобство использования; так называемые подсказки CSS часто работают лучше.

Программы чтения с экрана могут предоставить пользователю дополнительный доступ к атрибутам title , но я не уверен, что они делают с элементами с пустым содержимым.

Поделиться Jukka K. Korpela     31 июля 2012 в 18:45


13

С появлением WAI-ARIA при использовании значков шрифтов вам , вероятно, следует использовать комбинацию следующих действий для улучшения доступности:

  • Представление роли для удаления неявной собственной семантики роли элемента. Это особенно важно, если вы (ab)используете элемент с собственной семантикой для предоставления значков, как это имеет место в вашем примере с использованием элемента i (который, согласно спецификациям, «представляет собой фрагмент текста в альтернативном голосе или настроении […]» ).
  • Aria-метка для предоставления строкового значения, которое помечает элемент -или — собственный атрибут заголовка HTML, если вы OK с браузером, отображающим всплывающую подсказку при наведении курсора.
  • Атрибут aria-hidden для скрытия сгенерированного контента от вспомогательных технологий (поскольку вы используете семейство шрифтов значков, существует сгенерированный символ :до :после). Согласно спецификациям:

Авторы MAY с осторожностью используют aria-hidden для скрытия явно отображаемого контента от вспомогательных технологий только в том случае, если акт сокрытия этого контент предназначен для улучшения работы пользователей вспомогательных технологий путем удаления избыточного или постороннего контента. Авторы , использующие aria-hidden для скрытия видимого контента от читателей экрана MUST убедитесь, что вспомогательные технологии предоставляют идентичный или эквивалентный смысл и функциональность .

Я не знаю вашего точного варианта использования, поэтому беру на себя смелость использовать более простой случай предоставления номера телефона. В порядке убывания предпочтений я бы использовал:

<span aria-label="Our phone number">
  <span aria-hidden="true"></span>
  +33 7 1234576
</span>

(or any variation implying:
  - an `i` element with a `role` presentation attribute
    instead of the inner `span` element
  - a `title` attribute instead of an `aria-label` attribute)

<span 
  aria-label="Our phone number">+33 7 1234576</span>

(or any variation using `title` instead of `aria-label`)

<i role="presentation" 
  aria-label="Our phone number">+33 7 1234576</i>

(or any variation using `title` instead of `aria-label`)

Обратите внимание, что атрибуты aria-label и title должны описывать содержимое элемента. Не следующий элемент-брат. Поэтому я чувствую, что следующее решение не соответствует спецификациям (даже если большинство инструментов специальных возможностей на самом деле будут иметь такое же наблюдаемое поведение, как если бы номер телефона на самом деле находился внутри элемента span ) :

<span 
  title="Our phone number"></span>+33 7 1234576

Поделиться Sylvain Leroux     29 января 2016 в 16:39


7

Вместо этого вы должны использовать <span> или что-то в этом роде. Вы можете использовать атрибут title="" , чтобы дать некоторый текст при наведении курсора, если это то, что вы ищете. Что касается обеспечения доступности для чтения с экрана или значения SEO, вы можете добавить следующее CSS:

.icon-lock{
    text-indent:-99999px;
}

А затем напишите свой markup вот так:

<span>What I want the screen reader to say</span>

Поделиться Chris Sobolewski     31 июля 2012 в 18:30


3

<i> теги предназначены для разметки текста. Вы меняете семантическое значение этого тега на то, что не имеет никакого отношения к использованию курсива (и даже курсивный тег-плохая идея). Вместо этого вы должны использовать SPAN .

Элементы курсива не поддерживают атрибуты alt , элементы IMG поддерживают. Если вам нужен атрибут ALT , используйте изображение.

Поделиться Diodeus — James MacFarlane     31 июля 2012 в 18:32


2

Я думаю, что роль шрифтов, которые действуют как изображения, должна быть зарезервирована для role=»img». Затем это можно использовать с aria-label=»alt-text». Это работает из-за алгоритма доступных имен ARIA. См.: Методы Aria С использованием Роли Img .

Поделиться NoseToThePage     27 августа 2018 в 19:19

Похожие вопросы:


Об атрибутах Title/Alt;

Надеюсь, я смогу это опубликовать. Я понимаю назначение атрибутов title и alt, но просто не понимаю, как лучше их использовать или можно ли использовать один и тот же title/alt более одного раза….


атрибут «title» для тега <html:options> struts

В обычном поле выбора вы можете показать полный заголовок при наведении курсора мыши, используя атрибут title в поле option. В Apache Struts вы делаете поле выбора с тегом html:options. Я не думаю,…


Атрибут Title/Alt не отображается

У меня есть скрипт, который берет alt из span и использует его как src для изображения. Берет класс этого промежутка и переносит его в img, и, наконец, берет текст промежутка и использует его в…


Атрибут Alt или title для кроссбраузерной подсказки HTML?

Я ищу кроссбраузерное решение для отображения информации при «hovering» на элементе, я знаю, что это можно сделать с помощью JS динамически, но в данном конкретном случае я бы предпочел…


Является ли атрибут ‘title’ релевантным в теге <img> ?

Я хотел знать, является ли добавление атрибута ‘title’ семантически релевантным для тега ‘img’. Я уже всегда использую атрибут ‘alt’, чтобы соответствовать спецификации W3C. И если да, то должно ли…


допустимо regex для обнаружения тега <title> , который может иметь идентификатор или атрибут класса

REGEX /<title( *)((id|class)(=\)(.*)(\))?>(.*)<\/title>/i вышеприведенный regex предназначен для обнаружения нижеприведенных форм тега заголовка <title…


Добавить атрибут alt в заголовок слайд-шоу light box?

Я использую плагин Nivo Lightbox. Я также использую CMS сюрреалистический. Я хочу, чтобы клиенты могли изменить название изображений в слайд-шоу Nivo Lightbox. Заголовки слайд-шоу задаются в теге…


Свойство Image «alt» или «title» не отображается. Появляется пустой белый цвет

Я отключил опцию изображения в настройках браузера и визуализировал изображение. При начальной загрузке изображение не отображает атрибут alt или title и показывает пустой белый цвет. После ctrl+R…


Как всегда отображать атрибут alt тега привязки

Как всегда отображать атрибут alt якорного тега в HTML? Вот ситуация, когда у меня есть несколько повторяющихся сеток, и я хочу идентифицировать себя с датой. Поэтому я хочу всегда показывать…


Отображение текста из тега alt тега from title на кнопке с CSS

Как отобразить текст из тега alt тега from title на кнопке с CSS или с JavaScript? Что-то вроде этого document.getElementById(myBtn).value=MyNewValue; Но как мне получить ID-Е для этой кнопки? Эти…

title — HTML: язык разметки гипертекста

Глобальный атрибут title содержит текст, представляющий консультативную информацию, относящуюся к элементу, которому он принадлежит.

Некоторые типичные применения:

  • Маркировка

    Подписаться на WPBeginner

    Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте читать.

    Добавление атрибута заголовка в элементы меню навигации WordPress

    Сначала вам нужно посетить страницу Внешний вид »Меню и щелкнуть вкладку« Параметры экрана »в правом верхнем углу экрана.

    Появится меню, в котором нужно установить флажок рядом с параметром «Атрибут заголовка».

    После этого просто прокрутите вниз и щелкните любой пункт меню в существующем меню, чтобы развернуть его. Теперь вы увидите поле атрибута заголовка.

    Теперь вы можете добавить текст, который хотите использовать в качестве заголовка, а затем повторить его для всех пунктов меню в меню навигации.

    Не забудьте нажать кнопку меню «Сохранить», чтобы сохранить изменения.

    Теперь вы можете посетить свой веб-сайт и навести указатель мыши на ссылку в меню навигации. Вы увидите, что атрибут заголовка отображается как всплывающая подсказка.

    Вы можете еще больше расширить атрибуты заголовка с помощью jQuery, добавив необычные всплывающие подсказки при наведении курсора мыши.

    Мы надеемся, что эта статья помогла вам научиться добавлять атрибут заголовка в меню навигации WordPress. Вы также можете увидеть наш список из 15 лучших руководств по освоению меню навигации WordPress.

    Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

    Использование атрибута заголовка HTML — Обновлено в марте 2020 г.

    Примечание: Этот пост имеет то же содержание, что и наш пост 2013 года.Каждый из них изначально рассматривал разные аспекты атрибута title, но теперь они совпадают. Мы сохраняем их обоих, чтобы учитывать входящие ссылки, указывающие на каждый из них, а также потому, что у каждого сообщения есть разные вопросы и ответы в комментариях.

    вынос

    Если вы хотите скрыть контент от пользователей мобильных устройств и планшетов, а также от пользователей вспомогательных технологий и пользователей, использующих только клавиатуру, используйте атрибут title .

    Детали

    Атрибут заголовка HTML является проблематичным.Это проблематично, потому что в некоторых важных аспектах он не поддерживается должным образом, даже несмотря на то, что он был у нас в течение 23 лет . С появлением интерфейсов с сенсорным экраном полезность этого атрибута снизилась. Доступность атрибута title стала жертвой неудачного сочетания плохой поддержки браузера, плохой поддержки программы чтения с экрана и плохой авторской практики.

    Ситуации, в которых атрибут

    title бесполезен из-за отсутствия поддержки:
    • Отображение информации о веб-содержимом, просматриваемом в браузерах мобильных телефонов.Обычно в настольных браузерах заголовок содержимое атрибута отображается как всплывающая подсказка. Из того, что я смог найти, отображение всплывающей подсказки не поддерживается ни в одном мобильном браузере, а альтернативные визуальные методы доступа к содержимому атрибута title не поддерживаются.
    • Предоставление информации для людей, которые не умеют пользоваться мышью. Обычно в настольных браузерах содержимое атрибута title отображается как всплывающая подсказка. Хотя поведение всплывающей подсказки поддерживается в течение 20+ лет , ни один текущий браузер не имеет реализованного практического метода для отображения содержимого атрибута title с помощью клавиатуры.
    • Использование его на большинстве HTML-элементов для предоставления информации пользователям различных вспомогательных технологий. Доступ к информации об атрибутах title не поддерживается единообразно программами чтения с экрана

    Группы пользователей

    плохо обслуживаются с использованием заголовка атрибут
    • Пользователи мобильных телефонов.
    • Только клавиатура для пользователей.
    • Пользователи экранной лупы.
    • Пользователи программы чтения с экрана.
    • Пользователи с нарушением мелкой моторики.
    • Пользователи с когнитивными нарушениями

    Примеры использования атрибута

    title , которые ПОЛЕЗНЫ:
    • Обозначение frame или iframe элементов:
      • title = "navigation" >
    • Предоставление программно связанной метки для элемента управления в ситуациях, когда видимая текстовая метка будет избыточной:
      • В 2010 году title = "search" >
      • Теперь, в 2020 , лучший способ сделать это — использовать атрибут aria-label .
        • aria-label = "search" >
      • В 2010 году элементов управления маркировкой в ​​таблицах данных

        • title = "количество ручек" >
      • Теперь, в 2020 , лучший способ сделать это — использовать атрибут aria-label или aria-labelledby .

        • aria-label = "количество ручек" >

    Примеры использования атрибута

    title , которые не являются ПОЛЕЗНЫМ или имеют ОГРАНИЧЕННОЕ ИСПОЛЬЗОВАНИЕ:
    • Для получения дополнительной информации, не представленной в виде текста в ссылке или окружающем содержании:
    • Предоставляет ту же информацию, что и текст ссылки:
      • title="newsletter" > информационный бюллетень
      • Рекомендовать не дублировать содержимое ссылки в атрибуте title . Он ничего не делает и снижает вероятность того, что люди смогут получить доступ к содержимому атрибута title , что они это сделают.
    • Для подписи к изображению:
      • title =" Холст, масляная краска. Мария Тауле, 1858. "
        alt =" В замке теперь две башни и две стены. ">
      • Предположительно, информация о заголовках — это важная информация, которая по умолчанию должна быть доступна всем пользователям. В таком случае представьте это содержимое как текст рядом с изображением.
    • Для метки в элементе управления, не имеющей видимой текстовой метки:
      • title = "name" >
      • Пользователи программ чтения с экрана будут иметь доступ к метке управления, так как атрибут title сопоставлен со свойством доступного имени в API специальных возможностей (когда текстовая метка, использующая элемент метки, не предоставляется).Многие другие пользователи этого не сделают. По возможности рекомендуется использовать видимую текстовую метку.
    • Предоставляет ту же информацию, что и видимая явно связанная текстовая метка для элемента управления:
      • title = "name" >
      • Повторение видимого текста метки ничего не делает, кроме, возможно, добавления когнитивного шума для ряда пользователей. Не делай этого.
    • Предоставление дополнительных инструкций для элемента управления:
      • title = "Используйте заглавные буквы.">
      • Если инструкции важны для правильного использования элемента управления, укажите их в тексте рядом с элементом управления, чтобы их мог прочитать любой.
    • Расширение аббревиатуры:
      • title = "консорциум всемирной паутины" > W3C
      • Заголовок в элементе abbr хорошо поддерживается программным обеспечением для чтения с экрана, но его использование по-прежнему проблематично, поскольку другие группы пользователей не могут получить доступ к расширению.Рекомендуется, чтобы расширенная форма аббревиатуры предоставлялась в виде обычного текста, когда она впервые используется в документе, и / или предоставлялся глоссарий терминов, который обеспечивает расширенную форму. Это не означает, что расширение не может быть предоставлено с использованием атрибута title , только то, что из-за его ограничений также может быть предоставлено расширение в виде обычного текста.

    HTML содержит общие рекомендации по использованию атрибута

    title :

    Использование атрибута title — это , в настоящее время не рекомендуется , поскольку многие пользовательские агенты не раскрывают атрибут доступным способом, как того требует эта спецификация (например,грамм. требуется указывающее устройство, такое как мышь, для отображения всплывающей подсказки, что исключает пользователей, использующих только клавиатуру, и пользователей, использующих только сенсорный ввод, таких как любой, у кого есть современный телефон или планшет).

    источник: HTML — атрибут title

    Дополнительная литература

    О Стиве Фолкнере

    Стив — технический директор TPGi. Он присоединился к TPGi в 2006 году и ранее был старшим консультантом по веб-доступности в Vision australia .Он является создателем и ведущим разработчиком инструмента тестирования доступности панели инструментов веб-доступности. Стив является членом нескольких групп, включая рабочую группу W3C по веб-платформам и рабочую группу W3C ARIA.

    Использование атрибута заголовка HTML — обновлено в марте 2020 г.

    Примечание: Этот пост имеет то же содержание, что и наш пост 2010 года. Каждый из них изначально рассматривал разные аспекты атрибута title, но теперь они совпадают. Мы сохраняем их обоих, чтобы учитывать входящие ссылки, указывающие на каждый из них, а также потому, что у каждого сообщения есть разные вопросы и ответы в комментариях.

    вынос

    Если вы хотите скрыть контент от пользователей мобильных устройств и планшетов, а также от пользователей вспомогательных технологий и пользователей, использующих только клавиатуру, используйте атрибут title .

    Детали

    Атрибут заголовка HTML является проблематичным. Это проблематично, потому что в некоторых важных аспектах он не поддерживается должным образом, даже несмотря на то, что он был у нас в течение 23 лет . С появлением интерфейсов с сенсорным экраном полезность этого атрибута снизилась.Доступность атрибута title стала жертвой неудачного сочетания плохой поддержки браузера, плохой поддержки программы чтения с экрана и плохой авторской практики.

    Ситуации, в которых атрибут

    title бесполезен из-за отсутствия поддержки:
    • Отображение информации о веб-содержимом, просматриваемом в браузерах мобильных телефонов. Обычно в настольных браузерах заголовок содержимое атрибута отображается как всплывающая подсказка. Из того, что я смог найти, отображение всплывающей подсказки не поддерживается ни в одном мобильном браузере, а альтернативные визуальные методы доступа к содержимому атрибута title не поддерживаются.
    • Предоставление информации для людей, которые не умеют пользоваться мышью. Обычно в настольных браузерах содержимое атрибута title отображается как всплывающая подсказка. Хотя поведение всплывающей подсказки поддерживается в течение 20+ лет , ни один текущий браузер не имеет реализованного практического метода для отображения содержимого атрибута title с помощью клавиатуры.
    • Использование его на большинстве HTML-элементов для предоставления информации пользователям различных вспомогательных технологий.Доступ к информации об атрибутах title не поддерживается единообразно программами чтения с экрана

    Группы пользователей

    плохо обслуживаются с использованием заголовка атрибут
    • Пользователи мобильных телефонов.
    • Только клавиатура для пользователей.
    • Пользователи экранной лупы.
    • Пользователи программы чтения с экрана.
    • Пользователи с нарушением мелкой моторики.
    • Пользователи с когнитивными нарушениями

    Примеры использования атрибута

    title , которые ПОЛЕЗНЫ:
    • Обозначение frame или iframe элементов:
      • title = "navigation" >
    • Предоставление программно связанной метки для элемента управления в ситуациях, когда видимая текстовая метка будет избыточной:
      • В 2010 году title = "search" >
      • Теперь, в 2020 , лучший способ сделать это — использовать атрибут aria-label .
        • aria-label = "search" >
      • В 2010 году элементов управления маркировкой в ​​таблицах данных

        • title = "количество ручек" >
      • Теперь, в 2020 , лучший способ сделать это — использовать атрибут aria-label или aria-labelledby .

        • aria-label = "количество ручек" >

    Примеры использования атрибута

    title , которые не являются ПОЛЕЗНЫМ или имеют ОГРАНИЧЕННОЕ ИСПОЛЬЗОВАНИЕ:
    • Для получения дополнительной информации, не представленной в виде текста в ссылке или окружающем содержании:
    • Предоставляет ту же информацию, что и текст ссылки:
      • title="newsletter" > информационный бюллетень
      • Рекомендовать не дублировать содержимое ссылки в атрибуте title . Он ничего не делает и снижает вероятность того, что люди смогут получить доступ к содержимому атрибута title , что они это сделают.
    • Для подписи к изображению:
      • title =" Холст, масляная краска. Мария Тауле, 1858. "
        alt =" В замке теперь две башни и две стены. ">
      • Предположительно, информация о заголовках — это важная информация, которая по умолчанию должна быть доступна всем пользователям. В таком случае представьте это содержимое как текст рядом с изображением.
    • Для метки в элементе управления, не имеющей видимой текстовой метки:
      • title = "name" >
      • Пользователи программ чтения с экрана будут иметь доступ к метке управления, так как атрибут title сопоставлен со свойством доступного имени в API специальных возможностей (когда текстовая метка, использующая элемент метки, не предоставляется).Многие другие пользователи этого не сделают. По возможности рекомендуется использовать видимую текстовую метку.
    • Предоставляет ту же информацию, что и видимая явно связанная текстовая метка для элемента управления:
      • title = "name" >
      • Повторение видимого текста метки ничего не делает, кроме, возможно, добавления когнитивного шума для ряда пользователей. Не делай этого.
    • Предоставление дополнительных инструкций для элемента управления:
      • title = "Используйте заглавные буквы.">
      • Если инструкции важны для правильного использования элемента управления, укажите их в тексте рядом с элементом управления, чтобы их мог прочитать любой.
    • Расширение аббревиатуры:
      • title = "консорциум всемирной паутины" > W3C
      • Заголовок в элементе abbr хорошо поддерживается программным обеспечением для чтения с экрана, но его использование по-прежнему проблематично, поскольку другие группы пользователей не могут получить доступ к расширению.Рекомендуется, чтобы расширенная форма аббревиатуры предоставлялась в виде обычного текста, когда она впервые используется в документе, и / или предоставлялся глоссарий терминов, который обеспечивает расширенную форму. Это не означает, что расширение не может быть предоставлено с использованием атрибута title , только то, что из-за его ограничений также может быть предоставлено расширение в виде обычного текста.

    HTML содержит общие рекомендации по использованию атрибута

    title :

    Использование атрибута title — это , в настоящее время не рекомендуется , поскольку многие пользовательские агенты не раскрывают атрибут доступным способом, как того требует эта спецификация (например,грамм. требуется указывающее устройство, такое как мышь, для отображения всплывающей подсказки, что исключает пользователей, использующих только клавиатуру, и пользователей, использующих только сенсорный ввод, таких как любой, у кого есть современный телефон или планшет).

    источник: HTML — атрибут title

    Дополнительная литература

    О Стиве Фолкнере

    Стив — технический директор TPGi. Он присоединился к TPGi в 2006 году и ранее был старшим консультантом по веб-доступности в Vision australia .Он является создателем и ведущим разработчиком инструмента тестирования доступности панели инструментов веб-доступности. Стив является членом нескольких групп, включая рабочую группу W3C по веб-платформам и рабочую группу W3C ARIA.

    Испытания и невзгоды титульного атрибута

    Атрибут title получил много шума. И во многом пренебрежение к атрибуту вполне оправдано.

    В июне 1993 года, двадцать четыре с половиной года назад, заголовок был предложен как часть HTML 1.2 черновик. В основном он отображается как встроенная всплывающая подсказка в настольных браузерах и открывается, когда пользователь наводит указатель мыши на элементы разметки, для которых задан заголовок . Из-за этого с самого начала это было универсальной проблемой юзабилити, поскольку не все пользователи могли постоянно взаимодействовать с ним.

    Неправильные и устаревшие методы SEO вместе с общим неправильным пониманием правильного использования сделали title изгоем для многих разработчиков и укрепили его плохую репутацию.

    Если всего этого было недостаточно, то руководство из спецификации HTML W3C выглядит довольно убедительно:

    Использование атрибута title в настоящее время не рекомендуется, поскольку многие пользовательские агенты не раскрывают атрибут доступным способом, как того требует эта спецификация (например, требуя, чтобы указывающее устройство, такое как мышь, отображало всплывающую подсказку, что исключает пользователи, использующие только клавиатуру, и пользователи, работающие только с сенсорным экраном, например, любой, у кого есть современный телефон или планшет).

    Поддержка специальных возможностей для различных программ чтения с экрана за долгие годы существования title неуклонно развивалась. На самом деле, у него может быть больше поддержки, чем вы думаете.

    Хотя дополнительная поддержка должна быть хорошей вещью для , на самом деле это одна из самых больших проблем, с которыми я сталкиваюсь с этим атрибутом. Из-за неправильного использования, чем лучше будет поддержка программ чтения с экрана, тем хуже будет опыт этих пользователей.

    Несмотря на то, что были написаны статьи с изложением того, что можно и чего нельзя делать для title , время идет, и некоторые вещи меняются.Имея это в виду, эта статья не будет направлена ​​на продвижение использования атрибута, поскольку я полностью согласен с заявлением, сделанным здесь:

    Если бы я нашел джинна, и он дал бы мне одно желание, это было бы, чтобы веб-разработчики перестали использовать атрибут title.

    — Karl Groves 🇺🇸 (@karlgroves) 15 декабря 2017 г.

    Итак, если вы приближаетесь к точке остановки TLDR , то я только прошу вас помочь исполнить желание Карла.

    Но если вас вообще интересует текущее состояние поддержки специальных возможностей title , вы хотите знать о нескольких случаях, когда это действительно может быть полезно, и, как правило, хотите лучше понять, почему этот собственный HTML всплывающая подсказка постоянно не оправдывает ожиданий, что ж, есть еще много чего прочитать.

    Настройка уровня

    Когда кто-то думает об атрибуте title , он скорее всего в контексте ссылок. Если вы знакомы с управлением мультимедиа в WordPress, вы также можете связать его с изображениями. Но знали ли вы о поддержке специальных возможностей title для полей формы? Знаете ли вы, что после выпуска спецификации HTML5 заголовок стал глобальным атрибутом и может использоваться в любом элементе HTML?

    Что все это означает с точки зрения полезности title ? И самое главное, действительно ли это доступно?

    Если бы

    заголовок мог только только : фокус !

    За все время существования названия большинство браузеров до сих пор не реализовали какую-либо поддержку для раскрытия значения атрибута зрячим пользователям, которые не используют мышь.

    Это означает, что зрячие пользователи, использующие клавиатуру в качестве основного средства навигации по сети, скорее всего, не встретят всплывающих подсказок title . Пользователи, которые полагаются на другие средства, такие как программное обеспечение для распознавания голоса, также не получат много пользы от title s. По сути, если наведение не предусмотрено, вы можете никогда не узнать о существовании всплывающей подсказки.

    Однако есть подмножество этих пользователей, которые могут получить доступ к некоторым title s в своем браузере рабочего стола без мыши.Это до тех пор, пока они просматривают Internet Explorer 10, 11 или Microsoft Edge.

    Верно, на это ушло девятнадцать лет, но начиная с Internet Explorer 10, выпущенного в 2012 году, фокусируемые элементы с заголовком отображают всплывающие подсказки после короткой паузы, как если бы они зависали от мыши.

    Пример всплывающей подсказки title , которая отображается при фокусе ввода текста в Internet Explorer 11, в Windows 10.

    Однако один поставщик браузера, реализующий поддержку фокуса, не обеспечивает надежную доступность для всех.И это по-прежнему ничего не дает, чтобы раскрыть title s на несфокусируемых элементах, таких как изображения. И если вы думаете: «Ну что ж, мы могли бы добавить к этим элементам tabindex =" 0 ", чтобы они получали фокус клавиатуры», остановитесь. Просто остановись прямо здесь.

    Добавление tabindex es к нефокусируемым элементам вызывает дополнительные остановки фокуса для пользователей клавиатуры. Это создает неудобства для пользователя, нарушая ожидания пользователей относительно того, что должно быть фокусируемым, и приводит к тому, что по документу требуется больше времени для навигации с помощью клавиатуры.

    А теперь, отбросив ненужные tabindex , давайте не будем забывать про title s на сенсорных устройствах. Если вы не используете программу чтения с экрана (подробнее об этом чуть позже) title атрибутов практически бесполезны, за исключением одного элемента: изображений.

    На снимке экрана iOS 11 показано, что заголовок изображения будет отображаться в всплывающем меню, которое загружается, когда пользователь выполняет долгое нажатие на изображение. Это работает в мобильных Safari и Chrome на iOS и Chrome на Android.Но, судя по дополнительному тестированию, это может быть не всем мобильным браузерам. Например, при использовании браузера Brave на iOS заголовок изображения не отображается при выполнении того же действия при длительном нажатии.

    Опять же, единственный элемент, раскрывающий его значение title способом, который, по мнению споров, непростой или даже нехороший для пользователя (UX), никоим образом не универсален.

    Итак, с точки зрения полезности для зрячих пользователей, за исключением нескольких экземпляров дополнительной поддержки, здесь и там, если только нельзя полагаться на использование мыши, title s по-прежнему довольно дерьмо, особенно если использовать на несфокусируемых элементы.

    А как же программы чтения с экрана?

    Хотя поддержка не идеальна, она может быть намного лучше, чем вы могли подозревать. Понятно, что если кто-то знает о проблемах доступности title для зрячих пользователей, почему можно предположить, что пользователям программ чтения с экрана будет лучше?

    Вот где предположения и старая информация о поддержке названия затуманили некоторые из достижений атрибута.

    В то время как заголовок может использоваться в любом элементе HTML, что касается программ чтения с экрана, в первую очередь остается (мягко) полезным только для определенных элементов .

    Глобальные элементы

    Хотя атрибут title можно использовать в любом элементе HTML, он по существу тратится на большинство встроенных элементов текстового уровня. Поскольку эти элементы обычно не включаются в дерево специальных возможностей, программе чтения с экрана нет причин искать на этих элементах заголовок для объявления.

    Элементы оболочки на уровне блоков могут получить некоторое использование из атрибута title . JAWS, NVDA и VoiceOver объявят заголовок для таких элементов, как ориентиры ( заголовок , нижний колонтитул , основной и т. Д.), но поддержка может отличаться для других элементов в зависимости от пары вашего браузера. Например, JAWS не будет объявлять заголовок в div без дополнительных обновлений роли .

    Другие элементы оболочки, такие как списки и абзацы, объявляются в JAWS и VoiceOver, но NVDA игнорирует атрибут этих элементов. Но, честно говоря, использование всплывающих подсказок title для этих элементов вызывает большие подозрения. Почему вы хотите, чтобы всплывающая подсказка постоянно появлялась над большим фрагментом контента? Если вы намеренно не пытаетесь скрыть контент, который бесполезен, нет необходимости использовать title таким образом.

    Изображения, поля формы и якорные ссылки — это элементы, которые, скорее всего, будут ассоциироваться с атрибутом title . Что касается программ чтения с экрана, атрибут title по существу получает оценку «B» при просмотре общедоступных диаграмм поддержки программ чтения с экрана на powermapper.com.

    title s предназначены для использования в качестве описательного текста. И в основном только в ситуациях, когда нет доступного имени для изображения, поля формы или элемента привязки, заголовок будет повышен до доступного имени.

    Например:

    Практически повсеместно программы чтения с экрана объявляют заголовок как доступное имя для элемента в примере кода. (проверьте сами с помощью этой демонстрации CodePen.)

    Но если оставить в стороне поддержку, это все еще не особенно хороший выбор в качестве постоянного средства передачи доступной информации.Поскольку, хотя заголовок действительно предоставляет доступное имя для элементов при отсутствии других источников, он считается резервным . За исключением некоторых заметных исключений (подробнее об этом позже), всегда будут предпочтительнее другие механизмы.

    Изображения

    При использовании заголовка вместо изображения или , как упоминалось, заголовок будет использоваться в качестве доступного имени для изображения.

    Но в качестве запасного варианта с этим есть проблемы.

    Во-первых, валидаторы все равно выдадут ошибку, если в изображении отсутствует alt .

    Валидатор Nu HTML по-прежнему будет возвращать ошибку из-за отсутствия alt , даже если был установлен заголовок .

    Кроме того, если изображение сломается или будет намеренно подавлено, большинство браузеров не будут печатать вместо него значение заголовка .

    Chrome ломает стереотипы здесь, как будто нет alt , на экране отображается название .Однако, поскольку мы должны стремиться к надежности согласованности, поддержка одного браузера по-прежнему неадекватна.

    Если кто-то хочет снабдить изображение дополнительным контекстом, заголовок — плохой выбор из-за всех вещей, которые мы уже рассмотрели, а также того факта, что значение заголовка должно быть строго записано, поэтому чтобы не вызывать ненужного многословия у пользователей программ чтения с экрана. Например:

      Желтый банан

    Вышеупомянутый img имеет alt и заголовок с одинаковым значением, за исключением того, что alt начинается с заглавной буквы «A».

    Это, казалось бы, незначительное различие заставляет VoiceOver + Safari считывать оба значения. Если изображение повреждено, JAWS18 + Firefox также прочитает оба значения. В сценариях рендеринга изображения заголовок полностью игнорируется в пользу alt , даже если значения alt и title сильно различаются. NVDA не прочитает заголовок , если существует alt . Хотя это не всегда так…

    Ян Гамильтон отметил в Twitter, что NVDA ведет себя иначе, если изображение с alt и заголовком заключено в ссылку.

    В следующем примере будет объявлено «Франция» три раза при использовании NVDA + Chrome и дважды при использовании NVDA + Firefox.

      
  france

    Наличие совпадающего названия alt и может показаться большинству глупым, но, к сожалению, встречается гораздо чаще, чем можно было бы подумать. Как отмечалось ранее, кажущиеся незначительными детали, такие как использование заглавных букв, могут вызывать дублирование объявлений, что, к сожалению, также не является уникальным для объявлений с изображениями.

    Вместо этого следует использовать шаблон figure и figcaption , если дополнительный контекст должен быть передан всем пользователям:

      <рисунок>
  банан
  
    
    
     Если не знать, что это изображение банана, вот контекст,
    полезно для всех пользователей, потому что это изображение банана было включено сюда.
    Теперь вы знаете.
    Якорные ссылки и поля формы

    Затем давайте посмотрим, как title работает со ссылками и полями формы (в частности, с текстовыми полями в этом примере):

    См. Тесты на заглавие ручки Скотта (@scottohara) на CodePen.0

    Чтобы быстро резюмировать некоторые выводы:

    В зависимости от сочетания браузера и программы чтения с экрана результаты могут отличаться от ожидаемых, и результаты могут отличаться в зависимости от метода навигации по документу.

    Например, при использовании клавиш со стрелками для навигации по содержимому обычно игнорируется атрибут title .

    Однако при использовании клавиши вкладки (или быстрых клавиш программы чтения с экрана) обычно объявляются и доступное имя, и значение заголовка .

    Как упоминалось с изображениями, различные комбинации браузера и программы чтения с экрана будут иметь повторяющиеся объявления, если title и доступные значения имени имеют незначительные различия в капитализации. В некоторых случаях идентичные значения могут по-прежнему приводить к отдельным объявлениям в зависимости от сочетания программы чтения с экрана и браузера.

    Это обычное неправильное использование атрибута title :

       Главная страница

    Там, где разработчики могут подумать, что они «помогают» сделать ссылку доступной, на самом деле это раздражает анализ ссылки, так как слово «главная» объявляется дважды.

    В контексте входов заголовок может считаться полезным, чтобы помочь передать контекстную помощь для ввода данных. Это было бы, если бы не тот факт, что за пределами браузеров Microsoft зрячие пользователи клавиатуры не будут иметь доступа к всплывающей подсказке при начальном фокусе ввода.

    Кроме того, названия и арии, описанные , не очень хорошо сочетаются друг с другом. Что имеет смысл: title соответствует aria, описывается как label соответствует aria-label .

    Примите во внимание следующее:

    В приведенном выше примере показан ввод с заголовком , информирующий пользователей о том, что использование специальных символов запрещено. Опять же, эта информация недоступна для зрячих пользователей клавиатуры вне браузеров Microsoft, но давайте отложим это на минутку.

    Программы чтения с экрана сообщают информацию о специальных символах, и это хорошо. Однако проблема возникает, если туда пробирается специальный персонаж. Сообщение об ошибке обновляется и говорит: «Вы использовали специальный символ! Прекрати! ». Примечание: мне не разрешено писать копию ошибки.

    Теперь заголовок был перезаписан текстом ошибки aria, описанный , поэтому инструкции пропали, и пользователь может не вспомнить, какие специальные символы были запрещены.Бу.

    Хотя это и не входит в мои первоначальные тесты, Стив Фолкнер указал, что при использовании проверки формы HTML5 браузера по умолчанию, заголовок может использоваться при отображении сообщения об ошибке для ввода .

    Пример отображения сообщения об ошибке в Chrome с использованием стандартного сообщения браузера и включения значения заголовка с отображаемой подсказкой об ошибке.

    Ознакомьтесь с действующей проверкой и демонстрацией title здесь.

    Краткое изложение выводов:

    • На Mac Safari не использует заголовок во встроенном сообщении проверки.Chrome делает это, но сообщение о проверке не объявляется с помощью VoiceOver.
    • В Windows, Firefox, IE11, Edge и Chrome все используют заголовок с встроенным недопустимым сообщением об ошибке, которое появляется при попытке отправить форму.
    • При использовании NVDA Chrome, Firefox и Edge сообщают о встроенном сообщении об ошибке и значении заголовка .
    • С JAWS18, только при использовании Firefox будет объявлено недопустимое сообщение об ошибке и заголовок .

    В конечном счете, видимая этикетка с четкими инструкциями намного лучше для всех пользователей, включая тех, кто использует вспомогательные технологии, чем заголовок , применяемый только для небольшой группы неизвестных пользователей.Например:

    См. Арию Пена, описанную Скоттом (@scottohara) на CodePen.6437

    Уголок
    название использование с вводами

    Несмотря на то, что рекомендуется просто держаться подальше от атрибута title для входных данных, на самом деле есть несколько случаев, когда использование title в качестве доступного имени было бы приемлемым.

    Поиск входов или входов в таблицах

    Скорее всего, вы сталкивались с этими шаблонами множество раз.Поле для поиска в заголовке документа, где нет места для видимой метки. Или как насчет входов (флажков или текстовых полей) в таблицах, где флажок можно использовать для пометки строки для редактирования или удаления. Или текстовый ввод, позволяющий изменять данные отдельных ячеек.

    В случае ввода для поиска, как правило, в поле ввода есть увеличительное стекло в виде значка. Шаблон настолько распространен, что местоположение и значок обычно являются единственными ссылками, которые необходимы зрячему пользователю для понимания цели ввода.Вместо того, чтобы заставлять визуально скрытую метку или использовать aria-label для объявления доступного имени входа , используйте вместо этого title = "Search site / app" . Вы получите бесплатную подсказку для зрячих пользователей и доступное имя, необходимое для программ чтения с экрана.

    Что касается входных данных в таблицах, часто не хватает места, чтобы обеспечить видимую метку для входных данных. Однако, если таблица настроена надлежащим образом с четко определенными заголовками столбцов и / или строк, то зрячие пользователи, вероятно, смогут собрать воедино цель этих входных данных.Опять же, вместо использования скрытого текста или ARIA, попробуйте использовать собственный атрибут title , чтобы дать этим входам уникальные доступные имена.

    Другое
    название сценарии использования

    Помимо потенциального использования входных элементов , есть известные случаи, когда заголовок является рекомендуемым атрибутом для обеспечения доступности для пользователей.

    Использование заголовка
    на элементах abbr

    Аббревиатуры, акронимы и нумеронимы (например, «a11y») весьма полезны для сжатия длинного слова или слов в единую сокращенную форму.Но они могут быть неприятными для тех, кто не знаком со стенографией.

    Хотя всегда лучше записывать полную версию слова (слов) и устанавливать прямую связь с их сокращением или акронимом, элемент , использование атрибута title может помочь упростить эти сокращения. понять для некоторых пользователей. Например, введите термин, используя его полностью, со ссылкой на сокращение:

      
    
  Консорциум World Wide Web (W3C)...

    Затем, когда термин используется снова, оберните его элементом abbr и установите значение title на полный термин.

      
    
  Опять же,  W3C  ...

    Поскольку элемент abbr не является и не должен быть по сути фокусируемым, всплывающая подсказка title не будет доступна через стандартную навигацию с клавиатуры.Но людям, использующим определенные программы чтения с экрана и комбинации браузеров, будет объявлено название , , вместо видимого сокращения.

    Если вы примете решение и не слышите объявления , название , возможно, вам придется изменить настройки программы чтения с экрана. Например, чтобы включить эту функцию в JAWS, откройте Центр настроек и разверните группу Web / HTML / PDFs . Затем разверните группу Чтение и включите параметры аббревиатуры и акронима.Бламо. Название объявляется вместо аббревиатуры.

    Очевидно, что недоступен для всех пользователей, использование title с abbr будет считаться расширением специальных возможностей для тех, у кого есть правильные настройки программы чтения с экрана и пользователей мыши. Несмотря на то, что некоторые пользователи — например, зрячие клавиатуры — могут не иметь доступа к abbr , заголовок , его использование не повредит их пользовательскому опыту. Это при условии, что полный термин последовательно используется полностью до его сокращения.

    Использование заголовка
    в iframe с

    В отличие от улучшающего характера заголовка на abbr , использование заголовка на iframe на самом деле важно для соответствия критериям успеха WCAG, так как это рекомендуемый способ дать доступное имя фреймам , используя только собственный язык HTML.

    Например: