Товаров: 0 (0р.)

Html атрибут title: Атрибут title | htmlbook.ru

Содержание

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

От автора: атрибут 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 с нуля

Смотреть

html атрибут title не отображается в качестве всплывающей подсказки в Chrome



Недавно я обновил свой Google Chrome до версии 32.0.1700.76 m, и похоже, что всплывающие подсказки перестали появляться над элементами html с набором атрибутов ‘title’.

<span alt="Testing" title="Testing">hhh</span>

Вот пример jsFiddle:

http://jsfiddle.net/ricksuggs/cDhEL/

Я думал, что это стандарт HTML, он все еще работает в Firefox, кто-нибудь еще испытывает эту проблему?

html google-chrome
Поделиться Источник Rick Suggs     23 января 2014 в 17:03

2 ответа


5

Версия 32.0.1700.76 m отлично подходит для меня. Вы пробовали просто очистить кэш браузера Chrome, чтобы убедиться, что это не проблема с кэшированием?

Поделиться Chris     23 января 2014 в 17:18


-1

К сожалению, это старая ошибка, которая появилась с версией 32.0.1700 и все еще присутствует в v55 в некоторых системах, таких как моя.

Если вы столкнетесь с этой ошибкой. Пожалуйста, перейдите по адресу http://download1.srware.net/old/iron/win/portable , чтобы протестировать версию 31, а затем 32. Если вы обнаружите, что он работает с v31, но не с v32, пожалуйста, сообщите об этом в выпуске chromium bug tracker . Укажите свою настройку, используя ссылку, предоставленную DriversCloud.com , чтобы помочь разработчику исправить ее. Им нужна обратная связь и подробности.

Поделиться Fred Eric     24 декабря 2016 в 23:36

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


Получите данные DB и заполните атрибут title для всплывающей подсказки в Angularjs

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


Как использовать атрибут title для элемента html?

Как использовать атрибут title для элемента html? <div class=myDiv title=This is the title> Stuff </div> Предназначен ли он для использования в качестве всплывающей подсказки? Есть ли у…


Как отделить текст всплывающей подсказки от файла HTML

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


Могу ли я зависеть от атрибута title, отображаемого в виде всплывающей подсказки?

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


jQuery остановить отображение всплывающей подсказки плагина html

Я хочу, чтобы мои подсказки, чтобы прекратить отображение оказываемых HTML и Марк, вместо того чтобы. Я заметил, что для отображения данных в ретрансляторе отлично работает следующее. Использование…


Html alt вырезает слово с пробелом, показанным в виде всплывающей подсказки

У меня есть такое слово, как log out, которое отображается в виде всплывающей подсказки с помощью alt и title tags.when я наведу курсор мыши на изображение выхода из системы, только журнал…


Используйте атрибут data-* в качестве всплывающей подсказки для jQuery UI

Я не знаю, что я здесь делаю не так. Я хочу использовать некоторый атрибут data-* в качестве содержимого для всплывающей подсказки jQuery UI. Я рассмотрел несколько примеров в этих ответах: JQuery…


Динамическое изменение всплывающей подсказки кнопки в html

Я очень новичок в html, css, javascript, jQuery. Я хочу показать всплывающую подсказку в зависимости от кнопки. Кнопка при отображении значка воспроизведения должна показывать ‘Run’ в качестве…


Удалить задержку всплывающей подсказки для элемента HTML

@Mukyuu услужливо пометил дубликат вопроса, но он довольно старый и правильный ответ в 2019 году может быть совсем другим. Например, @Andy Хоффман предложил обходной путь, который был…


Используйте атрибут title= HTML с RMarkdown

Я пытаюсь понять, можно ли вставить атрибут HTML title= (не обязательно внутри тега <abbr> ) в документ RMarkdown (например, сообщение в блоге, написанное через blogdown ) From W3C: атрибут…

Как добавить атрибут title в навигационное меню WordPress

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

Зачем нужен Title в меню?

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

Данный атрибут отображает дополнительную информацию о ссылке или картинке:

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

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

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

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

Зайдите в раздел Appearance=> Menus (Внешний вид=>Меню) и перейдите на вкладку Screen Options (Настройки экрана), расположенную в правом верхнем углу:

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

Затем пролистайте страницу и нажмите на любой элемент меню для его открытия. В нем вы увидите поле для атрибута title:

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

Откройте сайт, наведите курсор мыши на ссылку в навигационном меню. Вы увидите текстовую подсказку:

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

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

Данная публикация является переводом статьи «How to Add Title Attribute in WordPress Navigation Menus» , подготовленная редакцией проекта.

seodon.ru | Общие атрибуты HTML

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут title используется для вывода «всплывающей» подсказки при наведении курсора мыши на HTML-элемент, что позволяет пользователю получить дополнительную информацию при просмотре веб-страницы. Например, title часто указывают для ссылок (тег <A>) или изображений (тег <IMG>).

Атрибут title появился в HTML довольно давно, но раньше он поддерживался ограниченным количеством тегов, а теперь он есть у всех. Поэтому, если на страницах описания каких-то тегов вы увидите логотип HTML 5 () напротив атрибута, то знайте, что этот тег начал поддерживать данный атрибут именно с версии HTML 5. C другой стороны, хоть в HTML 5 теперь все теги могут иметь этот атрибут — не факт, что браузеры его будут также понимать во всех случаях. Более того, в описаниях W3C также нет конкретики по данному вопросу, например о том, для чего использовать атрибут title в теге <META> или <TITLE>.

Значения

Значением атрибута title является любая строка текста, заключенная в двойные (» «) или одинарные (‘ ‘) кавычки. Причем, если используются двойные кавычки, то внутри текста можно использовать только одинарные и наоборот.

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

Синтаксис

<body title="текст">...</body>
<img src="URL" alt="текст" title="текст">
<a href="URL" title="текст">...</a>

Обязательный атрибут: нет.

Пример HTML: применение атрибута title

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - атрибут title</title>
 </head>
 <body>
  <p><a href="http://seodon.ru/" title="Переход на 'Главную' страницу">Главная</a></p>
  <address title="Автора не бить - пишет, как умеет!">
  Автором данного опуса является Бездарных Б.Б.<br>
  Все свои положительные эмоции по поводу его<br>
  творения вы можете высказать ему лично по<br>
  тел. +1 111-222-33-44.</address>
 </body>
</html>

Результат примера

Результат: Применение атрибута title.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Атрибуты ALT и TITLE тега IMG для оптимизации изображений

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

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

Однако, изображение с незаполненным атрибутом alt тега img и title, в поисковую выдачу не попадают, т.к. не содержат ключевых слов, по которым происходил бы поиск.

Атрибуты ALT и TITLE тега IMG

Несмотря на то, что использование при оптимизации изображений атрибутов title и alt — это простой способ поднять позиции сайта в поисковых системах, многие вебмастера не в полной мере применяют их, а то и вовсе игнорируют. Следует отметить, что часто title и alt по ошибке именуют тегами, хотя это атрибуты тега img (от слова “image”), а не отдельные теги.

HTML тег img применяют для отображения на страницах сайта изображений (картинок) в графическом формате GIF, JPEG или PNG. При необходимости, картинку можно сделать гиперссылкой, заключив тег img в контейнер . Атрибут alt передает описание изображения для браузеров при отключенной графике. Если данный атрибут не будет прописан, то пользователи увидят пустую икону вместо изображения, а если alt прописан, то будет показано его текстовое содержание. Атрибут alt в большей степени влияет на ранжирование изображений поисковиками.

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

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

Поисковые системы учитывают не весь текст, заключенный в атрибут alt: Google, к примеру, показывает только первые 15-17 слов, а Яндекс чуть больше – до 28 слов. В любом случае, этого количества слов вполне достаточно, чтобы составить вразумительный контекст.

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

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

Как прописать атрибуты alt и title у изображений (картинок)

Прописать атрибуты alt и title у картинок можно следующим образом:

В том случае, если на изображение назначена ссылка, то title лучше прописать к ссылке:

Советы поисковой системы Яндекс по оптимизации картинок:
  • Важен текст ссылки на ту же картинку с других сайтов или других страниц этого же сайта.
  • Обратите внимание на текст, расположенной в непосредственной близости от размещенного на сайте изображения. Он тоже должен соответствовать изображению.
  • Тексты и заголовки коротких документов, обрамляющих одиночную картинку.
  • Имена файлов и скриптов, в том числе с учётом транслитерации и упрощённого подстрочного перевода.
Рекомендации от Google по оптимизации изображений
  • Информацию о изображениях передает атрибут “alt”
  • Изображения часто кажутся одним из самых простых элементов сайта, но их использование также можно оптимизировать. Каждому изображению соответствует имя файла и атрибут “alt”. Оба эти элемента полезны. Атрибут “alt” позволяет ввести текст, который будет отображаться, если изображение по какой-либо причине невозможно показать (1).
  • Зачем используется этот атрибут? Если пользователь просматривает ваш сайт через браузер с отключенными картинками или использует программу чтения текста с экрана, alt-текст будет служить описанием изображения.
  • Alt-текст также используется в графических ссылках. В таком случае он обрабатывается поисковыми системами как анкорный текст ссылки. Несмотря на это, мы не советуем использовать большое количество графических ссылок для навигации по вашему сайту, так как текстовые ссылки справляются с этой ролью не хуже.
  • Ну и, наконец, грамотное описание изображения в теге alt вместе с информативным именем файла помогают системам поиска картинок, таким как Поиск Картинок Google, проиндексировать изображения с вашего сайта.
  • Файлы следует хранить в отдельных директориях, и сохранять их в общедоступных форматах
  • Вместо того, чтобы хранить файлы изображений по разным директориям и субдиректориям на домене, следует собрать их все в одну папку(например, имя-сайта.ru/images/). Это упрощает путь к графическим файлам.
  • Используйте широко поддерживаемые типы файлов. Большинство браузеров поддерживают графику в формате JPEG, GIF, PNG, и BMP. Также неплохо если расширение файла совпадает с его типом.

title | Yocton

Описание

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

Часто применяется для:

  • Подсказки элементов <iframe>, использующих вспомогательные технологии;
  • Предоставление связанной метки для элементов <input> дополнении к <label>;
  • Маркировка элементов управления в таблицах данных;
  • Добавление семантического смысла к элементам <link>, <abbr>, <input> и <menuitem>.

    Синтаксис

    <element title="текст">

    Например,

    <abbr title="Союз Советских Социалистических Республик">СССР</abbr>

    СССР

    Многострочные подсказки

    Атрибут title может содержать несколько строк. Каждый символ U+000A (LF — перевод строки) представляет собой разрыв строки. Необходимо соблюдать определенную осторожность, поскольку это означает, что в двух строках отображается следующее:

    Наследование подсказки

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

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

Проблемы доступности подсказки

Использование атрибута title очень проблематично для:

  • Использующих сенсорные устройства;
  • Перемещающихся с помощью клавиши Tab;
  • Использующих вспомогательные технологии, такие как программы чтения с экрана;
  • Испытывающие мелкие нарушения моторики;
  • Люди с когнитивными проблемами. Это связано с противоречивой поддержкой браузера, которая усугубляется дополнительным вспомогательным технологическим парсингом страницы, отображаемой браузером. Если требуется эффект всплывающей подсказки, лучше использовать более доступную технологию, к которой можно получить доступ с помощью вышеуказанных методов просмотра.

    Совместимость браузеров

    Настольные браузеры

    Базовая поддержка1121441

    Мобильные браузеры

    Базовая поддержка11да1дадада

    См. также:

Как добавить атрибут title в навигационное меню WordPress

👍 Научим создавать сайты на WordPress бесплатно за 11 уроков. Подробнее →

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

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

Как добавить атрибут title в навигационное меню WordPress?

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

Что касается WordPress, то разработчики, начиная с версии 4.2, исключили атрибут title из окна добавления ссылки. Но все же есть возможность добавить всплывающую подсказку для пунктов меню. Для этого, во-первых, нужно перейти в админ-раздел Внешний вид -> Меню.

Если посмотреть внимательно, то у каждого добавленного пункта меню есть возможность изменить только текст ссылки. Чтобы добавить атрибут title, следует в самом верху окна нажать кнопку Настройки экрана и задействовать настройку Атрибут title.

В итоге все пункты меню будут включать этот параметр.

Добавив к каждому пункту меню HTML-атрибут title, подсказка будет теперь отображаться.

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

Мне нравитсяНе нравится

Если Вам понравилась статья — поделитесь с друзьями

Какая польза от атрибута title в элементе html?

Какая польза от атрибута title в элементе html? — Переполнение стека

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 405 раз

Какая польза от атрибута title в элементе html?

  
 Разное

Он предназначен для использования в качестве всплывающей подсказки? Есть ли в нем дальнейшее применение?

Создан 16 сен.

ДафтДафт

8,5801212 золотых знаков5252 серебряных знака9494 бронзовых знака

2

Довольно много.В спецификации HTML это называется рекомендательным текстом, но также используется слово «всплывающая подсказка», потому что оно обычно представлено так:

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

Его роль по отношению к контенту полностью зависит от контекста, заданного контентом, но в целом он служит необязательной дополнительной информацией для этого контента.