Аккордион (скрываемые секции)

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

Определения:

Заголовок аккордеона (Accordion Header)
Метка или миниатюра, представляющая контент, которая также служит в качестве элемента управления для показа или скрытия контента.
Панель аккордеона (Accordion Panel)
Контент, связанный с заголовком аккордеона.

Пример

Пример аккордеона

HTML разметка
<dl id="accordionGroup" role="presentation" class="Accordion">
  <dt role="heading" aria-level="3">
    <button aria-expanded="true"
            class="Accordion-trigger"
            aria-controls="sect1"
            id="accordion1id"
            type="button"
            aria-disabled="true">
      <span class="Accordion-title">Personal Information</span>
      <span class="Accordion-icon"></span>
    </button>
  </dt>
  <dd id="sect1" role="region"
      aria-labelledby="accordion1id"
      class="Accordion-panel">
    <div>
      <fieldset>
        <p>
          <label for="cufc1">Name<span aria-hidden="true">*</span>:</label>
          <input type="text" value="" name="Name" id="cufc1" class="required" aria-required="true">
        </p>
        <p>
          <label for="cufc2">Email<span aria-hidden="true">*</span>:</label>
          <input type="text" value="" name="Email" id="cufc2" aria-required="true">
        </p>
        <p>
          <label for="cufc3">Phone:</label>
          <input type="text" value="" name="Phone" id="cufc3">
        </p>
        <p>
          <label for="cufc4">Extension:</label>
          <input type="text" value="" name="Ext" id="cufc4">
        </p>
        <p>
          <label for="cufc5">Country:</label>
          <input type="text" value="" name="Country" id="cufc5">
        </p>
        <p>
          <label for="cufc6">City/Province:</label>
          <input type="text" value="" name="City_Province" id="cufc6">
        </p>
      </fieldset>
    </div>
  </dd>
  <dt role="heading" aria-level="3">
    <button aria-expanded="false"
            class="Accordion-trigger"
            aria-controls="sect2"
            id="accordion2id"
            type="button">
      <span class="Accordion-title">Billing Address</span>
      <span class="Accordion-icon"></span>
    </button>
  </dt>
  <dd id="sect2" role="region"
      aria-labelledby="accordion2id"
      class="Accordion-panel" hidden="">
    <div>
      <fieldset>
        <p>
          <label for="b-add1">Address 1:</label>
          <input type="text" name="b-add1" id="b-add1">
        </p>
        <p>
          <label for="b-add2">Address 2:</label>
          <input type="text" name="b-add2" id="b-add2">
        </p>
        <p>
          <label for="b-city">City:</label>
          <input type="text" name="b-city" id="b-city">
        </p>
        <p>
          <label for="b-state">State:</label>
          <input type="text" name="b-state" id="b-state">
        </p>
        <p>
          <label for="b-zip">Zip Code:</label>
          <input type="text" name="b-zip" id="b-zip">
        </p>
      </fieldset>
    </div>
  </dd>
  <dt role="heading" aria-level="3">
    <button aria-expanded="false"
            class="Accordion-trigger"
            aria-controls="sect3"
            id="accordion3id"
            type="button">
      <span class="Accordion-title">Shipping Address</span>
      <span class="Accordion-icon"></span>
    </button>
  </dt>
  <dd id="sect3" role="region"
      aria-labelledby="accordion3id"
      class="Accordion-panel" hidden="">
    <div>
      <fieldset>
        <p>
          <label for="m-add1">Address 1:</label>
          <input type="text" name="m-add1" id="m-add1">
        </p>
        <p>
          <label for="m-add2">Address 2:</label>
          <input type="text" name="m-add2" id="m-add2">
        </p>
        <p>
          <label for="m-city">City:</label>
          <input type="text" name="m-city" id="m-city">
        </p>
        <p>
          <label for="m-state">State:</label>
          <input type="text" name="m-state" id="m-state">
        </p>
        <p>
          <label for="m-zip">Zip Code:</label>
          <input type="text" name="m-zip" id="m-zip">
        </p>
      </fieldset>
    </div>
  </dd>
</dl>

Взаимодействие с клавиатурой

  • Ввод (Enter) или Пробел (Space):
    • Когда фокус находится на заголовке свернутой панели, она разворачивается. Если реализация допускает только одну развернутую панель, то предыдущая развернутая панель сворачивается.
    • Когда фокус находится на заголовке развернутой панели, то панель сворачивается. Некоторые реализации требуют, чтобы одна и только одна панель была развернута всегда; в этом случае панель не сворачивается.
  • Стрелка вниз (Down Arrow), необязательно: Если фокус находится на заголовке аккордеона, перемещает фокус на следующий заголовок аккордеона. Если фокус находится на последнем заголовке, то перемещает фокус на первый заголовок аккордеона.
  • Стрелка вверх (Up Arrow), необязательно: Если фокус находится на заголовке аккордеона, перемещает фокус на предыдущий заголовок аккордеона. Если фокус находится на первом заголовке, то перемещает фокус на последний заголовок аккордеона.
  • Home, необязательно: Если фокус на заголовке аккордеона, то перемещает его на первый заголовок аккордеона.
  • End, необязательно: Если фокус на заголовке аккордеона, то перемещает его на последний заголовок аккордеона.
  • Ctrl + Page Down, необязательно: Если фокус внутри панели или на заголовке аккордеона, то перемещает фокус на следующий заголовок. Если фокус внутри последней панели или на последнем заголовке аккордеона, то переводит фокус на первый заголовок или ничего не делает.
  • Ctrl + Page Up, необязательно: Если фокус внутри панели аккордеона, то перемещает фокус на заголовок этой панели. Если фокус на заголовке аккордеона, то перемещает его на предыдущий заголовок. Если фокус на первом заголовке аккордеона, то либо ничего не делает, либо перемещает фокус на последний заголовок аккордеона.

Роли, состояния и свойства

  • Каждый заголовок аккордеона находится в элементе с ролью button
  • Каждая кнопка с заголовком аккордеона обернута элементом с ролью heading и атрибутом aria-level, в котором указан уровень вложенности заголовка относительно всей страницы. Элемент button должен быть единственным внутри heading, поэтому если у заголовка аккордеона есть другие визуальные элементы, они должны размещаться за пределами heading.
  • Каждый элемент button заголовка аккордеона имеет атрибут aria-expanded: если соответствующая заголовку панель аккордеона видна, то атрибут имеет значение true, если не видна - false.
  • Каждый элемент button заголовка аккордеона имеет атрибут aria-controls с идентификатором id соответствующей панели аккордеона.
  • Если панель аккордеона раскрыта и не допускает сворачивания, то соответствующая кнопка заголовка имеет атрибут aria-disabled равный true.