03.12.2021

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

Давайте побеседуем о вкладках HTML

От создателя: в прошлом году я участвовал в проекте Open UI, посвященном выяснению того, как получить свой <tabs> элемент в HTML. Это была команда людей с различным опытом; авторы спецификаций, производители браузеров, разработчики и обыденные практики, такие как я.

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

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

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

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

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

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

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

Давайте побеседуем о вкладках HTML

Когда мы проанализировали делему и рассмотрели удобство подхода и адаптивного дизайна, мы сообразили, что 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>. Содержимое снутри постепенно превращается в нечто интерактивное. Заглавия корневого уровня преобразуются в вкладки, а содержимое меж заголовками размещается в панелях вкладок.

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

CSS

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

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

Давайте побеседуем о вкладках HTML

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

Поглядеть мою книжную полку

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

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

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

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

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

По драматичности судьбы, этот подход не слишком отличается от идеи Яна Хиксона 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.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *