Вы добавляете описательный атрибут title к своим ссылкам? Знаете ли вы, что вы можете сделать свой сайт еще менее доступным? Все, что я думал об атрибуте title, оказалось неверным, когда я начал использовать программу чтения с экрана. 
То, что я думал, было правдой
Наличие атрибута для описания ссылки было бы полезно для программ чтения с экрана и для целей SEO, поэтому я всегда предполагал, что для этого нужен атрибут title. Я думал, что программы чтения с экрана читают вслух, чтобы решить проблему слабого текста ссылки, такого как «читать дальше» и «нажмите здесь», добавление текста заголовка будет читаться вслух, или, по крайней мере, как дополнительный текст, к которому можно получить доступ, нажав специальная горячая клавиша Именно по этой причине я тщательно добавил полезный текст в атрибут title, который будет полезен для слепых пользователей.
Я не мог быть более неправильным.
Несколько недель назад я провел некоторое время, используя программы чтения с экрана, как слепой человек. Я использовал самый популярный коммерческий скринридер JAWS и самую популярную бесплатную альтернативу NVDA. Это был невероятно познавательный опыт, и я многому научился ( вот список того, что я узнал ). Одна из главных вещей, которые я заметил, это то, что атрибут title не читается вслух, ВСЕ.
В JAWS есть опция, позволяющая читать текст заголовка вместо обычного текста привязки, но по умолчанию она не включена. Единственное очень маленькое исключение, при котором атрибут заголовка будет прочитан, - это если абсолютно нет текста привязки ссылки, и это редко. Даже если ссылка переносит изображение, программа чтения с экрана выберет чтение альтернативного текста изображения вместо атрибута title.
Так что, если вы добавляли описательный текст в атрибут title, не делайте этого. Слепые пользователи этого не услышат. Это почти бесполезно. Это распространенное заблуждение может привести к тому, что важная информация будет полностью недоступна для людей, для которых она предназначена.
Если вам нужны доказательства, вот видео о том, как JAWS и NVDA читают текст ссылки в Firefox и Internet Explorer.
Я спросил эксперта HTML Джеффри Зельдман должны ли мы использовать текст заголовка в ссылках, вот его ответ.
Я также спросил Брюса Лоусона, эксперта по веб-доступности из Opera, и автора HTML5 доктор , Его совет был ясен: нам не следует использовать атрибут title:
Он указал нам на статью, объясняющую, что атрибут title может принести больше вреда, чем пользы. Вот статья на сайте RNIB.
Решение W3C
Поэтому лучший способ сделать ссылку доступной - сделать текст привязки релевантным и описательным. Это было лучшей практикой в течение некоторого времени, и наши инструменты тестирования веб-сайтов Sitebeam а также Зубастик уже проверьте, что мы называем «слабый текст», как «читать дальше» и «нажмите здесь». Причина, по которой это плохо, заключается в том, что пользователи программы чтения с экрана часто используют горячие клавиши для навигации по странице, переходя к следующему заголовку или ссылке. Если они переходят по ссылке с надписью «читать дальше», неясно, на какую страницу они перейдут при нажатии.
Но иногда для нас, зрячих пользователей, ссылка «читать дальше» совершенно уместна. Мы не можем написать невероятно длинное и уникальное описание в якорном тексте каждой из наших ссылок. так что нам делать?
У W3C есть рекомендации, но они немного странные. Они рекомендуют писать весь текст в привязке, но если вам нужно предоставить дополнительную информацию для программ чтения с экрана, оберните ее в промежуток, который вы скрываете с помощью CSS. Это означает, что уникальный текст доступен для всех, но если вам действительно нужны слова «читать дальше», вы можете показать это и скрыть все остальное.
Вот пример:
<a href="#"> <span> Вашингтон стимулирует экономический рост </ span> Подробнее </a>
Что я нахожу наиболее странным в этой рекомендации, так это то, как они предлагают скрыть текст. Использование display: ни один не сделает текст скрытым в программах чтения с экрана, поэтому мы вынуждены вытеснить текст из отображаемой области.
span {height: 1px; ширина: 1px; положение: абсолютное; переполнение: скрытое; верх: -10px; }
Зрячие пользователи просто увидят слова «Читать дальше», а читатели экрана услышат «Ссылка: Вашингтон стимулирует экономический рост. Прочитайте больше"
Этот метод объясняется более подробно здесь, в статье W3C об использовании CSS, чтобы скрыть часть текста ссылки.
Здесь есть еще несколько примеров того, как сделать невидимый контент для пользователей программы чтения с экрана. ,
Ак что нам делать?
