Простые вкладки

Создать простые вкладки для содержания сайта с использованием новых технологий WAI-ARIA без библиотек JavaScript. Применяя общею роль элементов которую они играют в документе HTML.

Оглавление:
  1. WAI-ARIA для вкладок
  2. Роли WAI-ARIA для вкладок
  3. Состояние WAI-ARIA для вкладок
  4. Атрибут tabindex
  5. Свойства WAI-ARIA для вкладок
  6. Разметка HTML для вкладок
  7. Заключение

В интернете много различных способов создать вкладки (табы) для сайта с использованием тяжелых библиотек и плагинов jQuery, которые только усложняют загрузку веб-страниц на мобильных устройствах. Так же есть много вариантов вкладок на свойствах, селекторах CSS3 с анимацией не поддерживаемые старыми браузерами.

На самом деле, чтобы создать простые вкладки для сайта достаточно было написать разметку HTML, и CSS который будет понятен всем существующим браузерам, такой способ опытными веб-разработчиками практикуется и сейчас.

Демо

Вкладки построенные только на HTML имеют четыре ссылки для двух вкладок, что не хорошо.

Всё что нужно для закладок на сайте, чтобы JavaScript менял бы стиль для активной вкладки и открытого содержания после нажатия курсором на вкладку.

Демо

После того как группа W3C рекомендовала использовать для разметки HTML технологию WAI-ARIA, два способа выше для создания вкладок на сайте устарели, из-за отсутствия семантики и управления с клавиатуры. 27 июня 2015 года на сайте W3C опубликован проект WAI-ARIA 1.1 где можно узнать о всех спецификациях или скачать документ о WAI-ARIA на GitHub.

WAI-ARIA для вкладок

Все роли, атрибуты, состояние WAI-ARIA используемые в скрипте вкладок для содержания.

к меню ↑

Роли WAI-ARIA для вкладок

  • role="tablist" роль для списка элементов tab с ссылками на содержание tabpanel.
  • role="presentation" роль для презентации списка связанного с содержанием aria-labelledby или aria-describedby.
  • role="tab" роль для вкладок ссылающихся на содержание.
  • role="region" роль для раздела веб-страницы или документа.
  • role="tabpanel" роль для контейнера с содержанием связанного с tab, где каждый tab в списке tablist.
к меню ↑

Состояние WAI-ARIA для вкладок

Состояние при переключении между вкладками.

  • aria-hidden="true" — содержание скрыто.
  • aria-hidden="false" — содержание не скрыто.
к меню ↑

Атрибут tabindex

Возможность переключаться между вкладками и содержанием на клавиатуре.

tabindex — переходы между областями после нажатия на клавиатуре кнопки Tab.

к меню ↑

Свойства WAI-ARIA для вкладок

Список свойств WAI-ARIA используемых в скрипте для вкладок.

  • aria-controls применяется для контроля ссылающихся элементов, выполняет связь элементов с ассоциированной группой.
    значение aria-controls должно обязательно совпадать с ссылкой.
  • aria-live="polite" применяется для области содержания которая будет меняться.
  • aria-labelledby применяется для определения открытого элемента,
    значение aria-labelledby должно обязательно совпадать с идентификатором элемента на который ссылается aria-controls.

Для дополнительных пользовательских возможностей управления вкладками, например, запомнить на какой вкладке был последний раз пользователь можно использовать «Атрибуты данных HTML5» data-toggle="tab".

к меню ↑

Разметка HTML для вкладок

Разметка HTML для закладок обычная; список с ссылками (якорь) на содержание которое принадлежит к нажатой вкладке.

<!-- Сами вкладки -->
<ul id="pixel-tabs">
  <li><a href="#content-one" id="one-tab">Первый</a></li>
  <li><a href="#content-two" id="two-tab">Второй</a></li>
</ul>

<!-- Содержание -->
<div id="content-region">

<!-- Первая вкладка -->
<div id="content-one">
  <h2>Содержание первой вкладки</h2>
  <p>Текст</p>
</div>

<!-- Вторая вкладка -->
<div id="content-two">
  <h2>Содержание второй вкладки</h2>
  <p>Текст</p>
</div>

</div> <!-- #content-region -->

Авторы блогов и сайтов, работающие в CMS знают, что разработчики визуальных редакторов WYSIWYG не стремятся сделать поддержку технологии WAI-ARIA. Поэтому для скрипта закладок применяется метод DOM setAttribut. Это простой JavaScript для вкладок который должен быть понятен начинающему программисту. В CSS для активной и не активной вкладки используется селектор.

Демо

Конечно, код JavaScript для вкладок можно написать короче, но тогда мало кому будет понятно, что к чему. Когда визуальные текстовые редакторы будут полностью поддерживать технологию WAI-ARIA, все роли и свойства можно будет добавить в содержание. Или нет, зависит сколько страниц будет с вкладками, такой способ DOM делает содержание чище.

Если вы сделали правильно, HTML вкладок должен иметь такой вид:

<ul role="tablist" id="pixel-tabs">
  <li role="presentation">
    <a tabindex="1" aria-controls="content-one" aria-selected="true" role="tab" href="#content-one" id="one-tab">Первый</a>
  </li>
  <li role="presentation">
    <a tabindex="2" aria-controls="content-two" aria-selected="false" role="tab" href="#content-two" id="two-tab">Второй</a>
  </li>
</ul>

<div id="content-region" aria-live="polite" role="region">

<div aria-labelledby="content-one" tabindex="0" aria-hidden="false" role="tabpanel" id="content-one">
  <h2>Содержание первой вкладки</h2>
  <p>Текст</p>
</div>

<div aria-labelledby="content-two" tabindex="0" aria-hidden="true" role="tabpanel" id="content-two">
  <h2>Содержание второй вкладки</h2>
  <p>Текст</p>
</div>

</div>

если у вас ничего не получилось, попробуйте для вкладок с ролями WAI-ARIA использовать библиотеку Bootstrap, с.м страницу «Введение в WAI-ARIA».

к меню ↑

Заключение

Используйте для своих веб-проектов вкладки с технологией WAI-ARIA. Это не только увеличит количество пользователей на вашем сайте, но и улучшит рейтинг содержания ваших веб-страниц.