Как сделать вкладки html?

Создайте контейнер с ролью tablist, внутри разместите кнопки с ролью tab, а ниже связанные области tabpanel. У каждой кнопки должен быть собственный идентификатор и aria-controls нужной панели; панель связывается с кнопкой через aria-labelledby. JavaScript при выборе вкладки показывает её панель, скрывает прежнюю и обновляет aria-selected. Обычно только активная вкладка входит в последовательность Tab, остальные получают tabindex="-1". Для горизонтального списка стрелки влево и вправо перемещают фокус между вкладками. При ручной активации Enter или пробел подтверждают выбор. Само добавление ролей не создаёт это поведение. Проверьте мышь, клавиатуру и соответствие видимого состояния атрибутам, особенно если содержимое загружается с задержкой. Обычные ссылки на другие страницы не требуют такого компонента.

Разметка

Используйте группу кнопок как список вкладок и отдельные панели содержимого. Группа получает роль tablist, кнопки — tab, панели — tabpanel. Идентификаторы связывают пары: aria-controls у кнопки указывает на панель, а aria-labelledby панели указывает на её кнопку. У всех идентификаторов должны быть разные значения.

Переключение

Напишите функцию выбора вкладки. Она должна скрыть прежнюю панель, показать новую, обновить aria-selected кнопок и состояние визуального выделения. Эти изменения делайте согласованно, иначе экран покажет одно, а вспомогательная технология получит другое. Добавление ARIA-атрибута само по себе не меняет видимость содержимого.

Клавиатура

При входе клавишей Tab фокус обычно попадает на выбранную вкладку. Другие кнопки вкладок исключают из обычной последовательности через tabindex="-1", сохраняя возможность программного фокуса. В горизонтальном списке стрелки влево и вправо переводят фокус между вкладками. При ручной активации выбранную под фокусом вкладку открывают Enter или пробелом. Home и End могут переводить к первой и последней вкладке согласно выбранному шаблону.

Выбор режима

Автоматическое открытие панели при перемещении фокуса удобно, когда содержимое доступно без заметной задержки. Если каждая панель долго загружается, ручная активация обычно понятнее: перемещение по названиям не вызывает ненужные ожидания.

Проверка

Сначала используйте проверенный компонент или пример WAI-ARIA APG, затем подстройте оформление. Проверьте, что пользователь может войти в список, выбрать любую вкладку, перейти к содержимому и выйти дальше по странице. Если названия просто ведут на разные страницы сайта, оставьте обычные ссылки: им не требуется имитировать вкладки одного документа.