Интерфейсы с вкладками без JavaScript

Все больше и больше хитрых интерфейсных функций опираются на JavaScript, из-за чего создают проблемы доступности. Даже с учетом того, что на сегодняшний день JS им больше не требуется. CSS3 принес нам, как разработчикам, много интересных возможностей, позволив реализовать модальные диалоги, мобильные меню “гамбургеры” и даже интерфейсы с вкладками без единой строчки JavaScript-кода.

Что плохого в JavaScript?

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

Если базовая функциональность не работает, когда JS-скрипты заблокированы, отключены или иным образом не задействованы, ваша страница не соответствует требованиям WCAG, и поэтому вы рискуете подвергнуться судебному преследованию или гражданскому разбирательству в соответствии с такими законами, как ADA в США или EQA в Великобритании. Программное обеспечение, которое читает страницу вслух, программы для чтения шрифта Брайля, поисковые системы и другие невизуальные юзер-агенты испытывают трудности, если им прямо не закрыт доступ, со страницами, где для всего применяется JavaScript. Многие пользователи также блокируют JS из-за недоверия или работают в местах, где он намеренно отключен. JavaScript не должен быть постоянной технологией для решения каждой мимолетной проблемы на стороне клиента!

Опять же, я не утверждаю, что надо полностью отказаться от JavaScript, но он должен улучшать пользовательский опыт, а не предоставлять его в одиночку.

Как же реализовать вкладки по-другому?

Это, на самом деле, довольно просто  —  спасибо CSS3 и таким “новинкам” (если то, чему в 2020 году уже исполнилось десять лет, можно считать новинкой), как :checked, :nth-child и общий комбинатор смежных селекторов. В основном для достижения нашей цели мы “злоупотребляем” <input type=”radio”>.

Настоящая магия здесь в том, что если нажать на <label>, где атрибут for=”” указывает на поле ввода input, то получится то же самое, если бы вы нажали в это поле напрямую! Таким образом, для правильной семантики можно поместить ярлыки в список отдельно, после ввода.

Все будет размещаться в <div class=”tabset”>, так что находить нужные цели, не разбрасывая классы по всей разметке, будет легко.

Разметка

Во-первых, входные данные:

<div class="tabset">
  <input
   type="radio"
   name="tabset_1"
   id="tabset_1_description"
   hidden
   aria-hidden="true"
   checked
  >
  <input
   type="radio"
   name="tabset_1"
   id="tabset_1_statistics"
   hidden
   aria-hidden="true"
  >
  <input
   type="radio"
   name="tabset_1"
   id="tabset_1_reviews"
   hidden
   aria-hidden="true"
  >
  <input
   type="radio"
   name="tabset_1"
   id="tabset_1_contact"
   hidden
   aria-hidden="true"
  >

Все они получают одно и то же имя и функционально аналогичны сочетанию радио-кнопок с уникальными идентификаторами для каждой. Мне нравится использовать имя в качестве префикса к идентификатору.

Они “скрыты” (hidden), так что когда наш экранный медиа-запрос CSS неприменим/не имеет смысла для UA, они игнорируются. Более того, я установил aria-hidden=”true”, так что если CSS медиа-запрос будет применен к озвучиванию/распознаванию текста (так не должно быть, но некоторые UserAgent’ы способны на всякое), то все равно будет проигнорирован. Помните: такие вещи, как вкладки, предназначены только для восприятия на экране.

Вот список меток, которые станут нашими “вкладками”:

<ul hidden aria-hidden="true">
   <li><label for="tabset_1_description">Description</label></li>
   <li><label for="tabset_1_statistics">Statistics</label></li>
   <li><label for="tabset_1_reviews">Reviews</label></li>
   <li><label for="tabset_1_contact">Contact</label></li>
</ul>

Они тоже “скрыты” как с помощью атрибута, так и через aria-hidden. Простой список вариантов с правильной семантикой (если вы опустите ul/li, некоторые UA могут показать вывод, что это просто бессмысленный набор символов). Опять же, магия в том, что клик по этим меткам  —  то же самое, что клик по полю ввода, для которого они предназначены.

Затем содержимое нашей вкладки можно рассматривать как <section> внутри <div>:

<div>
   <section>
    <h2>Description</h2>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elementum neque, ac pharetra tortor. Vivamus ac vehicula augue. Curabitur pretium commodo nisi id pellentesque.
    </p>
   </section><section>
    <h2>Statistics</h2>
    <p>
     Sed ut leo in turpis efficitur convallis at bibendum erat. Curabitur in egestas ex. Etiam efficitur sagittis molestie. Praesent condimentum elementum ipsum sit amet euismod. Sed vestibulum, leo ac iaculis fringilla, felis nulla placerat turpis, eu aliquam elit risus vel tellus.
    </p>
   </section><section>
    <h2>Reviews</h2>
    <p>
     Donec non nunc ac augue ornare aliquam. Aenean sed volutpat arcu. Sed molestie lacus placerat nisl gravida condimentum.
    </p>
   </section><section>
    <h2>Contact</h2>
    <p>
     Nullam nec condimentum lacus. Integer dapibus velit nec ipsum varius, a pharetra arcu imperdiet. Donec pretium libero a tincidunt vulputate. Mauris feugiat tempor lectus, quis placerat mi congue sit amet.
    </p>
   </section>
  </div>
 <!-- .tabset --></div>

Каждый из них получает тэг <h2>, содержащий описание раздела для невизуальных UA. При желании эти заголовки в таблице стилей экранных медиа можно скрыть.

Стили

Весь этот код также предполагает, что используется некоторая форма “сброса”. Во-первых, нам нужно нацелить поле ввода так, чтобы ввод больше не был “скрыт” атрибутом, чтобы сохранить возможность навигации с помощью клавиатуры, при этом оставив его невидимым. Заодно это исправляет ошибку, при которой IE не может изменять состояние поля ввода, имеющего атрибут hidden, если не установить его видимым через команду display:

.tabset > input {
  display:block; /* "включает" скрытые элементы в IE/Edge */
  position:absolute; /* а потом скрывает их за пределом экрана */
  left:-100%;
}

Далее идет наш неупорядоченный список:

.tabset > ul {
  position:relative;
  z-index:999;
  list-style:none;
  display:flex;
  margin-bottom:-1px;
}

position:relative; и z-index:999;  —  это трюк, которым можно воспользоваться, чтобы нижние границы вкладок перекрывались с рамкой вкладки. Для помещения всех меток в одну строку мы могли бы применить inline-block или float, но в наши дни есть флекс-верстка, и она намного проще!

Поскольку все наши <label> и рамка <div> вокруг вкладок содержимого имеют одну и ту же границу, нетрудно сразу же объявить их вместе:

.tabset > ul label,
.tabset > div {
  border:1px solid hsl(220, 100%, 60%);
}

С помощью HSL проще переключить всю цветовую схему, ведь можно просто найти/заменить “hsl(220” как вам будет угодно… или использовать переменные CSS для его назначения.

Метки:

.tabset > ul label {
  display:inline-block;
  padding:0.25em 1em;
  background:hsl(220, 100%, 90%);
  border-right-width:0;
}

Они настроены как inline-block, поэтому подчиняются отступам top/bottom. Взамен можно установить display:block, но так как они находятся на одной линии, inline-block представляется мне удобнее. Обратите внимание, что граница по правому краю таким образом будет удалена. Мы скоро к этому вернемся.

.tabset > ul li:first-child label {
  border-radius:0.5em 0 0 0;
}

Закруглим угол первого:

.tabset > ul li:last-child label {
  border-right-width:1px;
  border-radius:0 0.5em 0 0;
}

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

.tabset > div {
  position:relative;
  background:hsl(220, 100%, 98%);
  border-radius:0 0.5em 0.5em 0.5em;
}

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

Теперь начинается “сложная” часть. Во-первых, нам нужен стиль, применяемый к метке, когда используется навигация с клавиатуры. Простое подчеркивание на :focus может сработать. Это покажется сложным, но на самом деле все очень просто:

.tabset > input:nth-child(1):focus ~ ul li:nth-child(1) label,
.tabset > input:nth-child(2):focus ~ ul li:nth-child(2) label,
.tabset > input:nth-child(3):focus ~ ul li:nth-child(3) label,
.tabset > input:nth-child(4):focus ~ ul li:nth-child(4) label,
.tabset > input:nth-child(5):focus ~ ul li:nth-child(5) label,
.tabset > input:nth-child(6):focus ~ ul li:nth-child(6) label,
.tabset > input:nth-child(7):focus ~ ul li:nth-child(7) label,
.tabset > input:nth-child(8):focus ~ ul li:nth-child(8) label,
.tabset > input:nth-child(9):focus ~ ul li:nth-child(9) label {
  text-decoration:underline;
}

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

Логика на самом деле проще, чем кажется. Рассмотрим только один селектор:

.tabset > input:nth-child(1):focus ~ ul li:nth-child(1) label,

Внутри .tabset, когда первое поле ввода в фокусе, метка внутри первого li любого соседнего неупорядоченного списка получит наш стиль. И это буквально всё. Это означает, что когда вы устанавливаете фокус на поле ввода (с помощью клавиатуры или кликнув по нему), связанная метка становится подчеркнутой. И то же самое для любого количества вкладок, которые нам нужно поддерживать, вплоть до максимума.

Затем этот же шаблон можно повторить для проверки входных данных:

.tabset > input:nth-child(1):checked ~ ul li:nth-child(1) label,
.tabset > input:nth-child(2):checked ~ ul li:nth-child(2) label,
.tabset > input:nth-child(3):checked ~ ul li:nth-child(3) label,
.tabset > input:nth-child(4):checked ~ ul li:nth-child(4) label,
.tabset > input:nth-child(5):checked ~ ul li:nth-child(5) label,
.tabset > input:nth-child(6):checked ~ ul li:nth-child(6) label,
.tabset > input:nth-child(7):checked ~ ul li:nth-child(7) label,
.tabset > input:nth-child(8):checked ~ ul li:nth-child(8) label,
.tabset > input:nth-child(9):checked ~ ul li:nth-child(9) label {
  background:hsl(220, 100%, 98%);
  border-bottom-color:hsl(220, 100%, 98%);
}

Если сделать их того же цвета и нижней границы, что и содержимое <div>, то получится, что вкладка будет сверху. Вот тут-то и вступает в игру наш нижний отступ -1px.

А что же насчет отображения/скрытия содержимого <section>? Сначала спрячем секции:

.tabset > div > section,
.tabset > div > section h2 {
  position:absolute;
  top:-999em;
  left:-999em;
}

Тот же код я использую, чтобы скрыть h2 за пределами экрана. Большая проблема с программами для чтения с экрана и некоторыми другими UA для незрячих состоит в том, что зачастую они не будут читать контент, если вы настроите их на display:none; или visibility:hidden;. В частности поисковые системы часто будут подчиняться поведению экранных медиа-запросов, когда этого не стоило бы делать при поиске недобросовестных SEO-мошенников, пытающихся использовать маскировку контента. Сдвинув этот тэг с экрана, мы в лучшем случае полностью избегаем описанной выше проблемы, в худшем  —  получаем отметку для проверки вручную, во время которой любой компетентный человек в Google скажет, что все в порядке.

При любой возможности старайтесь не использовать display:none в основных разделах, будь он заскриптован или осуществлен через CSS! Вы рискуете тем, что контент останется незамеченным поиском и другими невизуальными юзер-агентами.

Затем я установил отступы для <section> везде, кроме нижней части. Я предпочитаю внутренние отступы (padding) вместо внешних (margin), чтобы избежать проблем со “слипанием”. Если вы ставите отступ на нижнюю часть элементов контента, то ставьте и на все направления элемента-родителя, с этим просто легче иметь дело:

.tabset > div > section {
  padding:1em 1em 0;
}

Следом мы используем ту же логику селектора, что и с ul, чтобы переключиться с <section> на display:static;:

.tabset > input:nth-child(1):checked ~ div > section:nth-child(1),
.tabset > input:nth-child(2):checked ~ div > section:nth-child(2),
.tabset > input:nth-child(3):checked ~ div > section:nth-child(3),
.tabset > input:nth-child(4):checked ~ div > section:nth-child(4),
.tabset > input:nth-child(5):checked ~ div > section:nth-child(5),
.tabset > input:nth-child(6):checked ~ div > section:nth-child(6),
.tabset > input:nth-child(7):checked ~ div > section:nth-child(7),
.tabset > input:nth-child(8):checked ~ div > section:nth-child(8),
.tabset > input:nth-child(9):checked ~ div > section:nth-child(9) {
  position:Static;
}

О display:static; нужно помнить то, что он по сути игнорирует все правила позиционирования, а значит текущий выбранный раздел появится в поле зрения без необходимости изменять какие-либо другие свойства.

И это подходит для быстрой и не слишком тщательной реализации. Можно пойти путем посложнее, например, воспользоваться display:flex; на <div> и position:relative, чтобы сдвинуть их все на место, открывая дорогу для изощренных анимаций и тому подобного.

Наконец, поскольку всё это управляется метками и вы нажимаете на метки, возникает проблема: быстрый клик или случайное перетаскивание во время клика могут неправильно выделить текст. Кроме того, если кто-то соберется копировать/вставлять что-нибудь со страницы, вы можете не захотеть, чтобы в копии содержались метки, поскольку они избыточны для h2, который и будут копировать. Следовательно:

.tabset > ul label {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

Так мы запрещаем выделять метки. Может показаться, что применение всех версий префиксов браузера бессмысленно, но если вы проверите “Can I use”, то увидите  —  таблица совместимости говорит, что все версии IE нуждаются в -ms-, все версии Safari по-прежнему нуждаются в -webkit-, версия -moz- была удалена только недавно и вместе с этим была удалена поддержка новой сборки для некоторых старых ОС, о которой нам все еще нужно беспокоиться, и т. д.

Но на самом деле кроме этого, больше ничего и не надо.

Наглядная демонстрация

Вот рабочий пример: https://cutcodedown.com/for_others/medium_articles/tabsWithoutJS/tabs.html

Каталог файлов:
https://cutcodedown.com/for_others/medium_articles/tabsWithoutJS/

Он открыт для легкого доступа к разным частям. Я поместил туда файл разметки .txt для тех, кто стесняется “view-source”, и там есть также файл tabs.rar, содержащий полный код для легкой загрузки.

Обратите внимание на функциональность для клавиатуры. Нажимайте [tab], пока не увидите подчеркивание на одной из вкладок, или нажмите на одну, чтобы установить на ней фокус, а затем попробуйте нажимать клавиши со стрелками. Когда на какой-либо из радио-кнопок устанавливается фокус, вы можете переключаться между ними с помощью стрелок.

За и против

Недостатки

1. Вы полагаетесь на более современные браузеры, чтобы всё работало. Предложенный метод должен хорошо функционировать во всех браузерах новее IE 10. Сейчас я привык просто блокировать CSS в устаревших браузерах и позволять страницам спокойно деградировать до семантической разметки.
2. Для каждой дополнительной вкладки приходится добавить по три строки CSS, чтобы она поддерживалась в трех разных окружениях. Это может быть громоздко, но если вам на самом деле нужно больше девяти вкладок, то, вероятно, именно такой способ вам не подходит.
3. Эта реализация не создает в разметке бесконечные классы просто так. Это может расстроить некоторых разработчиков, которые не могут справиться с селекторами и верят в наглую ложь вроде того, что бесконечные бессмысленные классы, которые увеличивают необходимую разметку в два раза, а то и в двенадцать, каким-то волшебным образом делают рендеринг “быстрее”. Подождите, разве это недостаток? К сожалению, для многих это так.

Преимущества

1. Основная структура раздела <section>  —  правильная семантическая разметка контента, что означает большее удобство использования для невизуальных UA и альтернативной навигации.
2. Функциональность не основывается целиком на JavaScript, поэтому, в отличие от других методов, этот не нарушает WCAG.
3. В любом современном браузере с выключенным CSS все наши элементы управления на UI исчезают, оставляя правильную доступную структуру.
4. Поскольку эта структура на 100% управляется CSS, вы можете расширить ее с помощью CSS-переходов, анимации или любых других эффектов, которые только придут в голову.
5. Разметка не захламляется выдуманными сказочными несемантическими тегами, бесконечными бессмысленными классами и другими глупостями разработчиков.
6. Применение атрибута hidden HTML 5 и aria-hidden=”true” приводит к тому, что программы для чтения с экрана, программы для чтения шрифта Брайля, пользователи, просматривающие без CSS, и так далее, игнорируют всю избыточную разметку, используемую для создания вкладок, и просматривают страницу, как если бы это были просто обычные разделы с заголовками.
7. Так получается гораздо меньше кода, чем если бы вы применили любой из памятников невежеству, некомпетентности и неумелости разработчиков, которые называются интерфейсными фреймворками.

Вывод

“Злоупотребление” <input type=”checkbox”> с помощью CSS-свойства :checked и общего комбинатора смежных селекторов поможет вам избежать многих заскриптованных глупостей и большинства проблем доступности. Решения проблем с помощью одного только JavaScript следует избегать, и у нас наконец-то есть для этого инструменты!

Я надеюсь, что это вам пригодилось, и серьезно, ребята: уделите больше внимания доступности ваших сайтов, особенно в том, что происходит, когда нет JavaScript. Можно было бы подумать, что Бейонсе и Domino’s, которых таскают по судам как раз по таким вопросам, послужат тревожным звонком для разработчиков, работающих на реальный бизнес, но нет. Слишком многие разработчики прячут головы в песок, отрицая ошибки, и продолжают действовать, руководствуясь лишь апатией, невежеством и принятием желаемого за действительное.

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

Читайте также:

• Темная сторона Javascript: избегайте данных трех функций
• JavaScript: 5 нововведений 2021 года
• 10 хитрых приемов в JavaScript, о которых должен знать каждый разработчик

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Jason Knight: “Tabbed Interfaces Without JavaScript”