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

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

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

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

Решил обновить разметку. Вот что у меня было раньше:

<button aria-controls="content">Reveal</button>
<div id="content"></div>

Вот что у меня есть сейчас:

<a href="#content" aria-controls="content">Reveal</a>
<div id="content"></div>

Логика в JavaScript остается неизменной:

  1. Найдите любые элементы, у которых есть атрибут aria-controls (это были кнопки, теперь они ссылки).
  2. Возьмите значение этого атрибута aria-controls (идентификатор).
  3. Скройте элемент с этим идентификатором, применив aria-hidden = ”true”, и сделайте этот элемент доступным для фокусировки, добавив tabindex = ”- 1.
  4. Установите aria-extended = "false" для связанной ссылки (этот атрибут может немного сбивать с толку - это не означает, что этот элемент не раскрывается; это означает, что элемент, которым он управляет, не раскрывается).
  5. Слушайте события щелчка по этим ссылкам.
  6. Переключайте арию-скрытую и расширенную арию, когда есть событие щелчка.
  7. Когда для элемента aria-hidden установлено значение false (тем самым раскрывая его), сфокусируйте этот элемент.

Вы можете увидеть это в действии на CodePen.

См. Перо Доступный переключатель (ссылка) Джереми Кейта (@adactio) на CodePen.

Изначально это было размещено на моем собственном сайте.