Давайте поговорим о вкладках HTML

Open UI — это сообщество, поэтому мы технически не можем создавать HTML (по юридическим причинам), но мы можем представить исследования рабочим группам W3C. Я рассматриваю Open UI как специальное исследовательское подразделение для W3C, имеющее определенный опыт работы с системами дизайна и общими веб-компонентами.

«Tabvengers», как нас называют, уже подготовили несколько исследовательских документов и экспериментов:

Исследование, документирующее множество общих частей и функций вкладок; перечень интерфейсов по матрице систем проектирования и их реализации;

Исследование, документирующее общие шаблоны разметки для вкладок; решение сильно варьируется от количества элементов;

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Пользовательский элемент, заключенный в веб-компонент; экспериментальный прототип и стартер для обсуждения.

Наше исследование показало, что существует множество вариантов управления вкладками. Также существует множество вариаций шаблонов разметки. Существуют вариации, написанные для операционных систем, видеоигр, компонентов jQuery, React и веб-компонентов.

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

Когда мы проанализировали проблему и рассмотрели удобство подхода и адаптивного дизайна, мы поняли, что HTML нуждается в решении, которое является более чем 1:1 отображением того, что указано в руководстве по методам разработки ARIA. Это приводит к тому, что у вас будет один элемент на каждую роль ARIA. Что неплохо, если не рассматривать некоторые реальные приложения.

С точки зрения доступности <accordion> семантически ничем не отличается от элемента <tabs>. Оба они представляют одну секцию контента. Фактически, с точки зрения адаптивного дизайна, переключение между Tabs и Accordion в разных окнах просмотра является обычным паттерном. Часто вам нужен непрерывный поток контента, а затем, если есть свободное место, подключение вкладок. Итак … что, если бы один элемент мог решить эту проблему?

Существует не так много существующих HTML-элементов, которые можно преобразовать в другой элемент. Нам нужен был язык, чтобы описать концепцию, и мы пришли к идее, которую Брайан Карделл назвал «дизайн возможностей». «Возможности» — это уникальное звуковое и визуальное представление фрагмента контента. И один и тот же контент может иметь разные возможности. В некоторой степени я сравниваю их с <input type=»”>, изменение type иногда приводит к изменению визуального и слухового восприятия ввода, но функционально выполняется одна и та же работа: получение входных данных. Другим примером может быть полоса прокрутки, в HTML нет элемента <scroller>, мы используем CSS, чтобы предложить этот элемент управления.

Чтобы в дальнейшем протестировать идею возможностей, мы перешли на стадию разработки прототипа и создали веб-компонент <spicy-sections>.

Встречайте — <spicy-sections>

Посмотреть код на Github

Пример CodePen

Spicy Sections — это наша попытка экспериментировать с идеей дизайна. Суть идеи в том, что вокруг разделов контента есть элемент-оболочка. Мы начинаем с обычного блока контента со структурированной разметкой <heading> + <content>. Содержимое внутри постепенно превращается в нечто интерактивное. Заголовки корневого уровня преобразуются в вкладки, а содержимое между заголовками размещается в панелях вкладок.

<spicy-sections> <h2>My cool section</h2> <div>Tab content goes here</div> <h2>My other collapsible section</h2> <div>More content goes here</div> </spicy-sections>

123456

<spicy-sections>  <h2>My cool section</h2>  <div>Tab content goes here</div>  <h2>My other collapsible section</h2>  <div>More content goes here</div></spicy-sections>

Затем в CSS вы определяете, какие использовать возможности и где:

CSS spicy-sections { –const-mq-affordances: [screen and (max-width: 40em) ] collapse | [screen and (min-width: 60em) ] tab-bar ; }

123456

spicy-sections {  –const-mq-affordances:    [screen and (max-width: 40em) ] collapse |    [screen and (min-width: 60em) ] tab-bar  ;}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Этот синтаксис не окончательный, но, надеюсь, вы видите, как медиа-запрос (или контейнерный запрос?) может определять возможности. При значении меньше чем 40em содержимое сворачивается в «гармошку». При значении больше 60em содержимое отображается в виде вкладок. Между 40em и 60em вы должны увидеть нормальный структурированный контент.

Вы можете стилизовать части, например tabbar, используя Shadow Parts. Это может сбивать с толку, если вы впервые пытаетесь стилизовать веб-компонент, но я могу заверить, что это довольно универсально.

Для экспериментов я вырезал «краткую» версию своей книжной полки, которая каждый год трансформируется в отдельную панель вкладок. На мобильном телефоне годы сворачиваются в Accodrion. Вы можете просмотреть исходный код и понять, как работают разметка и стили.

Посмотреть мою книжную полку

Примечание о структуре содержания

Многие решения с вкладками включают разметку в стиле «оглавление»:

<tablist> <tab>Tab 1</tab> <tab>Tab 2</tab> <tab>Tab 3</tab> <tabpanel>this is a panel</tabpanel> <tabpanel>this is a panel</tabpanel> <tabpanel>this is a panel</tabpanel> </tablist>

12345678

<tablist>  <tab>Tab 1</tab>  <tab>Tab 2</tab>  <tab>Tab 3</tab>  <tabpanel>this is a panel</tabpanel>  <tabpanel>this is a panel</tabpanel>  <tabpanel>this is a panel</tabpanel></tablist>

Это допустимый подход, и на самом деле это то, что рекомендует ARIA Authoring Practices Guide, и это тот же подход, который использовали популярные библиотеки, такие как jQuery UI. На практике возникает несколько проблем. С точки зрения прогрессивного улучшения, если JavaScript не удалось смонтировать или старый браузер попытался отобразить страницу, три tab элемента вернулись бы к промежуткам, которые ничего не делают. У них не будет контекста, и панель контента потеряет свою маркировку. Из этой разметки также трудно извлечь другие возможности. По сути, вам придется перепроектировать приложение, чтобы устранить коллапс с уровнями заголовков. Этот шаблон разметки работает, если вы делаете только вкладки.

Некоторые преимущества одноэлементного подхода

Мы можем убить двух зайцев одним выстрелом. Мы получаем Accordion и Tabs из одного и того же элемента. Фактически мы можем использовать один элемент и иметь бесконечные возможности. Мы также получаем убийственную последовательность прогрессивных улучшений. Указать один элемент проще, чем пять? На самом деле я не знаю, правда ли это.

По иронии судьбы, этот подход не слишком отличается от идеи Яна Хиксона 2004 года tabbox. Я не могу поверить, что мы провели последние 17 лет без встроенных вкладок HTML, вынуждая пользователей изобретать колесо. Но, увы, пора это исправить.

Поздравляем, вы перешли к необходимости создания собственного пользовательского элемента управления вкладками!

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

Что дальше?

Следующие шаги — официально передать предложение в Open UI, который, надеюсь, поддержит эту идею, а затем в рабочие группы HTML, CSS и ARIA. Но прежде чем мы это сделаем, нам нужно …

Тестировать с реальными пользователями — значит с вами! Я также обратился к друзьям из Техасской школы для слепых и слабовидящих (TSBVI), чтобы они помогли провести специальный контроль качества. Надеюсь, мы сможем двигаться вперед с уверенностью, что это отвечает потребностям людей, и в случае TSBVI часто это люди с комплексными ограниченными возможностями.

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

Нейминг — Название не окончательное. Мое предложение назвать MightyMorphinElement отклонили. Окончательное название может быть что-то вроде <panelset>, но, откровенно говоря, я не знаю и мне все равно, даже если я имею связь с проектом. Я думаю, что мы все на 100% сосредоточены на разработке хорошего и надежного решения, прежде чем концентрироваться на имени.

Сarousel? — Я считаю положительным сигналом то, что группа ARIA обсуждала новую role=»carousel», и сотрудники Apple рекомендовали отложить решение этой проблемы до Open UI, что было поддержано Tabvengers.

Если вы дочитали так далеко, спасибо за чтение! Если эти предложения будут поддержаны, это будет замечательно. Кто знает? Но я точно знаю, что сейчас самое время для обратной связи. Является ли <spicy-sections> полезным? Если бы мы переименовали их в <tabbyboi> и добавили в браузер, отвечали бы они вашим потребностям? Могли бы вы видеть их использование в своих проектах? Вы пользуетесь ими в настоящее время? Есть ли пробелы в стилизации? Пожалуйста, дайте нам знать на GitHub.

Автор: Dave Rupert

Источник: webformyself.com