Разметка бокового фильтра: итоги

Не так давно я делал опрос, какой элемент использовать для разметки области с фильтром в интернет-магазине.

Самым популярным выбором, предсказуемо, стал <aside>. Он закрепился в массовом сознании как элемент для боковых колонок. Фильтр в интернет-магазинах чаще всего отображён в виде боковой панели, поэтому <aside>. Семантика элемента, в принципе, подходит для фильтра, но об этом в отдельном посте.

Вариант <div role="group"> я бы исключил. Во-первых, есть встроенные элементы <fieldset> и <legend>, которые создают именованную группу для набора полей. Во-вторых — это группировка без семантической нагрузки и ориентира. На мой взгляд фильтр достаточно важен и его стоит выделить в ориентир.

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

Если рассматривать фильтр как способ навигации по каталогу, может подойти <nav>. Но в классическом понимании навигация — это набор ссылок на другие страницы, а не набор элементов управления. Поэтому <nav> я бы тоже исключил из списка вариантов.

Фильтр обычно состоит из групп флажков, радио-кнопок, ползунков и полей ввода для цен. Мне подсознательно хочется использовать для этого <form>. Плюсом Form API и прогрессивное улучшение от классической отправки формы с перезагрузкой до AJAX.

Сам по себе элемент <form> не ориентир, пока у него нет имени. Это легко исправляется атрибутами aria-labelledby или aria-label. Формы, как мне кажется, уже достаточно и оборачивать фильтр чем-то ещё будет избыточно.

Есть элемент <search>, который по описанию прямо предназначен для разметки поиска или фильтрации. Кажется, на нём и нужно остановить выбор. Но если фильтр уже размечен через <form> с именем?

Я пришёл к двум решениям. Первое — совместить форму с семантикой <search>. У элемента <form> согласно спецификации ARIA in HTML можно указывать роль search. Второе — не добавлять форме имя и не превращать её в ориентир, а обернуть элементом <search>.

<!-- 1 -->
<form
  action="/catalog"
  method="get"
  autocomplete="off"
  novalidate
  role="search"
  aria-label="Фильтр"
>
  <!-- элементы фильтра -->
</form>

<!-- 2 -->
<search aria-label="Фильтр">
  <form
    action="/catalog"
    method="get"
    autocomplete="off"
    novalidate
  >
    <!-- элементы фильтра -->
  </form>
</search>

Одним из этих двух способов я бы разметил фильтр в интернет-магазине. Причём не важно, находится он сбоку, сверху или где-то ещё. Склоняюсь к первому варианту, так как нет лишнего элемента и форма совмещает свои функции с ориентиром search.

#html #a11y