Ссылки блочного уровня и доступность.

Перевод статьи:  Block level links and accessibility.
Автор:  Roger Johansson.

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

Одним из нововведений HTML5 можно назвать разрешение данным стандартом использования элементов блочного уровня в качестве содержимого ссылок. Ранее, в HTML4 это могли быть только внутристрочные элементы.

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

Тестирование блочных ссылок в программах чтения с экрана.

Дерик Физерстоун (Derek Featherstone) писал об этом в своей публикации "Accessibility and HTML5 Block Links" («Доступность и блочные ссылки в HTML5»), упомянув при этом о том, что на данный момент экранные дикторы не обрабатывают такие ссылки должным образом. За ним последовал Стив Фолкнер (Steve Faulkner) со своим постом "HTML5 Accessibility Chops: Block Links" («Блочные ссылки в HTML5 — удар по доступности»), в котором он более детально рассматривает некоторые прецеденты, имеющие место в различных комбинациях экранных дикторов и веб-браузеров.

Вот к каким выводам пришли Дерик и Стив в результате своих исследований:

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

Что именно происходит в конкретном случае, зависит от используемой программы чтения с экрана и разметки. Детали можно узнать, ознакомившись с тестами блочных ссылок, выполненными Стивом Фолкнером.

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

Однако даже в случае содержания в ссылке одного единственного элемента блочного уровня, после элемента p экранный диктор VoiceOver произносит "new line, new line", а после элемента div один раз "new line" (*«новая строка»). Такое поведение VoiceOver, плюс тенденция данного скринридера повторять текст ссылки, необходимо, по всей видимости, отнести к категории багов, на которые должна обратить внимание Apple и исправить их. Стоит также упомянуть и о том, что хотя эти баги на данный момент и могут доставить неудобства, по крайней мере, сам контент озвучивается, а не пропускается программой.

Проблема размера ссылок.

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

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

Используйте по необходимости.

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

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *