Перевод статьи: HTML5 Accessibility Chops: Block Links.
Автор: Steve Faulkner.
Теперь включение элементов блочного уровня (подобных заголовкам и параграфам) в ссылки, является вполне соответствующим HTML5 стандарту приемом, который был запрещен предыдущими версиями HTML. Судя по выводам, сделанным отдельными авторами, присутствие в ссылках блочных элементов может привести к нестандартному поведению отдельных средств, реализующих технологии обеспечения доступности (AT — Assistive Technologies).
Блочные ссылки из HTML5.
В спецификации HTML5 говориться:
Чтение статьи "HTML5 bolck link tests" («Тестирование блочных ссылок HTML5») подтолкнуло меня на более глубокое изучение данной проблемы.
Анализ результатов тестирований.
Я создал несколько контрольных примеров с целью выборки различных вариантов поведения, которые я обнаружил в ходе тестовых комбинаций примера из статьи Дерика Физерстоуна (Derek Featherstone).
-
В случае применения пользователем клавиш управления курсором при навигации, такие экранные дикторы как JAWS, NVDA и Window Eyes обрабатывают текст, находящийся внутри и снаружи блочного элемента, помещенного в рамки элемента-ссылки, как отдельные ссылки.
<a href="#"><p>link one</p> link 2 </a> -
При активации пользователем «горячих» клавиш применительно к такой ссылке, скринридер JAWS опускает ее содержимое, находящееся за пределами блочного элемента (имеет место только в IE).
<a href="#"><p>link one</p> link 2 </a> - NVDA произносит слово "link" (*«ссылка») для каждой строки текста, находящегося в ссылке, содержащей разрывы строк.
У VoiceOver есть баги, приводящие к повторному озвучиванию текста ссылки в нескольких ситуациях, две из которых не имеют никакого отношения к вводимым в HTML5 изменениям, касающимся корректного использования элемента a:
-
ссылка содержит текст в элементе блочного уровня и в самой ссылке;
<a href="#"><p>элемент параграф</p> и какой-то текст</a> -
в ссылке находится текст и изображение с непустым атрибутом alt;
<a href="#">текст ссылки и <img src="tick.png" alt="image"></a> -
ссылка содержит разрыв строки.
<a href="#">текст до <br> и после разрыва строки.</a>
Выводы.
Ссылка должна наделяться кратким описанием целевого объекта, а сама возможность ссылок содержать текстовые абзацы является потенциальной проблемой, вынуждающей пользователей заявлять об этом. Что здесь можно посоветовать? Главное — включайте в начало ссылки ключевую информацию о ней. На данный момент соответствующее поведение экранных дикторов Windows не нарушено и не выглядит проблематичным. Что касается VoiceOver, то здесь проблема заключается не в самом включении блочных элементов в ссылку, а имеют место симптомы бага более общего характера, который должен быть устранен.