Блочные ссылки в HTML5 — удар по доступности.

Перевод статьи:  HTML5 Accessibility Chops: Block Links.
Автор:  Steve Faulkner.

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

Теперь включение элементов блочного уровня (подобных заголовкам и параграфам) в ссылки, является вполне соответствующим HTML5 стандарту приемом, который был запрещен предыдущими версиями HTML. Судя по выводам, сделанным отдельными авторами, присутствие в ссылках блочных элементов может привести к нестандартному поведению отдельных средств, реализующих технологии обеспечения доступности (AT — Assistive Technologies).

Блочные ссылки из HTML5.

В спецификации HTML5 говориться:

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

Чтение статьи "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:

  1. ссылка содержит текст в элементе блочного уровня и в самой ссылке;

    <a href="#"><p>элемент параграф</p> и какой-то текст</a>
  2. в ссылке находится текст и изображение с непустым атрибутом alt;

    <a href="#">текст ссылки и <img src="tick.png" alt="image"></a>
  3. ссылка содержит разрыв строки.

    <a href="#">текст до <br> и после разрыва строки.</a>
Также обнаружено, что в Firefox применительно к тексту внутри содержащегося в ссылке блочного элемента не соблюдается дефолтная стилизация ссылок в виде их подчеркивания.

Выводы.

Ссылка должна наделяться кратким описанием целевого объекта, а сама возможность ссылок содержать текстовые абзацы является потенциальной проблемой, вынуждающей пользователей заявлять об этом. Что здесь можно посоветовать? Главное — включайте в начало ссылки ключевую информацию о ней. На данный момент соответствующее поведение экранных дикторов Windows не нарушено и не выглядит проблематичным. Что касается VoiceOver, то здесь проблема заключается не в самом включении блочных элементов в ссылку, а имеют место симптомы бага более общего характера, который должен быть устранен.

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

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

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