Понятные имена ссылок и кнопок

В предыдущем уроке кнопка «Разделы сайта» раскрывала навигацию. Её назначение было понятно из текста, а состояние сообщалось отдельно через aria-expanded. Теперь рассмотрим названия управления подробнее. Читателю необходимо выбрать действие до его выполнения. Если ссылки называются «Здесь», а кнопки представлены безымянными значками, приходится искать назначение в окружающем тексте или угадывать по форме.

Продолжим a11y-lab, сохраняя обычные ссылки и встроенные кнопки. Результат урока — согласованные имена для нескольких вариантов: текстового перехода, значка рядом с текстом и управления только со значком. Мы не добавляем новые действия в рабочий ProfessorWeb; отдельные фрагменты служат учебными прототипами, которые можно оценить вместе с оболочкой.

Видимый текст как исходное имя

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

<a href="/catalog/">Каталог</a>

Не нужно добавлять aria-label="Нажмите, чтобы открыть список разделов" только потому, что ARIA кажется обязательной частью доступности. Такое имя заменит исходное и усложнит его сопоставление с видимой подписью. Слова о способе активации обычно также лишние: элемент уже имеет роль ссылки. Название должно прежде всего объяснить назначение, а не повторить очевидное действие.

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

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

Видимая подпись и ARIA должны совпадать по смыслу

Рассмотрим ошибочный учебный вариант. Видимый текст — «Каталог», а программное имя назначено как «Все темы». По смыслу они похожи, но человек, который видит надпись и управляет голосом, может произнести именно видимые слова:

<!-- Учебный пример несогласованных названий. -->
<a href="/catalog/" aria-label="Все темы">Каталог</a>

Лучшее исправление для нашего случая — убрать избыточный атрибут. Если действительно нужно расширить название, видимую подпись следует сохранить внутри имени, например «Каталог: все темы». Критерий Label in Name связывает доступное имя с видимой текстовой подписью. Это помогает согласовать разные способы выбора элемента.

При этом имя и описание — разные сведения. Название отвечает на вопрос «что это за действие», описание может объяснить последствия или ограничение. Большую инструкцию не нужно помещать в aria-label кнопки: человек будет встречать её как имя при каждом возвращении к управлению. Для дополнительного текста существуют отдельные связи, которые рассмотрим на примере формы.

Состояние также не обязательно включать в название вручную. Кнопка «Разделы сайта» может сохранять стабильное имя, а aria-expanded сообщит открытие. Если менять подпись, значение должно оставаться понятным и согласованным. Не стоит одновременно записывать в текст «закрыто» и оставлять ARIA-состояние «раскрыто»: два слоя будут противоречить друг другу.

Значок рядом с подписью

В уроке об изображениях мы добавили стрелку к тексту «Прежние уроки». Её пустой alt сохраняет короткое имя ссылки. Для inline-SVG применяется похожая идея: если видимый текст уже сообщает назначение, декоративную графику можно исключить из доступного представления. Ниже полный вариант одной ссылки:

<a href="/catalog/legacy/">
  Прежние уроки
  <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true">
    <path d="M3 10H16M10 4L16 10L10 16"
          fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
</a>

aria-hidden относится к декоративной картинке, а не к ссылке. Если назначить его самому интерактивному элементу, управление может остаться визуально и в клавиатурной последовательности, но исчезнуть из представления вспомогательной технологии. Это не способ убрать лишнюю озвучку имени. Нужно исправить источник имени, сохранив сам элемент доступным.

Значок не обязан иметь отдельную роль изображения, если не добавляет информацию. Несколько вложенных названий способны превратить короткую ссылку в повтор: «Прежние уроки, изображение, Прежние уроки». Такое дублирование часто возникает, когда одинаковый текст одновременно записан видимо, в альтернативе и в ARIA. Начните с минимальной разметки и добавляйте только отсутствующий смысл.

Управление только со значком

Иногда компактная кнопка закрывает дополнительную область. Для этого прототипа видимая форма крестика понятна не всем и не создаёт достаточного текстового названия. Можно сохранить текст для вспомогательной технологии, скрыв его только визуально:

<button type="button">
  <span aria-hidden="true">×</span>
  <span class="visually-hidden">Закрыть описание изображения</span>
</button>

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

Скрытый текст не должен получать display: none или hidden, иначе он перестанет выполнять задачу имени. Альтернативный вариант — содержательный aria-label у самой кнопки. Для нашей серии полезно видеть источник текста в HTML и проверять его согласованность с контекстом. Атрибут title не стоит считать единственным надёжным способом сообщить назначение: доступность подсказки зависит от способа взаимодействия.

Редакторская сверка назначения

Составьте маленькую таблицу существующих элементов: видимая подпись, доступное имя, действие и результат. Для «Разделы сайта» результатом является раскрытие области, для «Каталог» — переход к странице, для прототипа закрытия — пока только описанное намерение. Эта сверка обнаруживает расхождения раньше полноценного наблюдения и отделяет отсутствующее поведение от отсутствующего названия.

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