Перш ніж почати, слід знати основи HTML та CSS, оскільки класи Tailwind напряму мапуються на властивості CSS. Замість того, щоб писати окремий CSS-код для кнопки, її збирають безпосередньо в HTML, комбінуючи класи для відступів, кольорів, шрифтів та заокруглень.

Простий приклад для порівняння

Традиційний підхід (Звичайний CSS)

HTML
<button class="my-custom-button">Натисни на мене</button>

/* CSS */
.my-custom-button {
	background-color: #3b82f6;
	color: white;
	padding: 8px 16px;
	border-radius: 8px;
	font-weight: bold;
}

Підхід Tailwind CSS

HTML
<button class="bg-blue-500 text-white py-2 px-4 rounded-lg font-bold">
	Натисни на мене
</button>

Інтерфейс будується з дрібних одноцільових класів. Це усуває "втому від назв" та запобігає конфліктам стилів.

Просторова сітка Tailwind базується на системі, де одна одиниця дорівнює 4 пікселям (або 0.25rem). Наприклад, клас p-4 встановить внутрішній відступ в 16 пікселів (4×4=16).

Tailwind має вбудовану палітру кольорів від 50 (найсвітліший) до 950 (найтемніший). Наприклад, bg-blue-500 — це базовий синій колір фону.

Tailwind надає можливість легко керувати виглядом елементів залежно від пристрою або дій користувача.

• Для різних екранів використовуються різні префікси: sm: (від 640px), md: (768px), lg: (1024px), xl: (1280px). Наприклад, w-full md:w-32 зробить елемент на весь екран на мобільних пристроях, але звузить його до 128px (4х32) на планшетах.
• Для мікровзаємодій також використовують префікси модифікаторів станів: hover: (наведення), focus: (фокус), active: (активний стан). Наприклад, hover:bg-black змінить фон при наведенні мишкою.
• Щоб змінити стиль елемента для темного режиму достатньо додати префікс dark:, (наприклад, dark:bg-slate-900).

У версії Tailwind 4.0 стався перехід на концепцію CSS-First, що спрощує налаштування:

1. Замість трьох директив використовується одна: @import "tailwindcss";.
2. Кастомні кольори та шрифти додаються прямо в CSS через блок @theme.
3. Можна використовувати будь-які значення без попереднього налаштування, наприклад grid-cols-15 або w-103.

Відступи та розміри

Tailwind базується на просторовій сітці, де одна одиниця дорівнює 0.25rem (або 4px). Щоб отримати значення в пікселях, потрібно помножити число в назві класу на 4 (наприклад, p-4 — це 4×4=16 px).

• Padding (Внутрішні відступи). Використовуються p-* для всіх сторін, px-* для горизонтальних, py-* для вертикальних, або специфічні напрямки: pt-* (top), pb-* (bottom), pl-* (left), pr-* (right).
• Margin (Зовнішні відступи). Працюють за аналогічною логікою з префіксом m-* (наприклад, mt-10 для відступу зверху).
• Width & Height (Ширина та висота). Класи w-* та h-* також використовують стандартну шкалу (наприклад, w-64 — це 256px). Можна використовувати відносні значення: w-full (100%) або h-screen (100vh).

В новій версії можна використовувати довільні числа, наприклад w-103, які автоматично підлаштовуються під шкалу, навіть якщо їх не було заздалегідь визначено в конфігурації.

Макет та позиціонування

Утиліти макета надають можливість будувати складні структури безпосередньо в HTML.

• Flexbox. Один з найпопулярніших інструментів. Щоб активувати контейнер, потрібно додати клас flex, а потім керувати ним за допомогою flex-row/flex-col (напрямок), items-center (вирівнювання по вертикалі) та justify-between (розподіл простору).
• CSS Grid. Для сіток використовують grid. Можна легко задати кількість колонок, наприклад grid-cols-3. В Tailwind v4 можна вказувати будь-яку кількість колонок прямо в HTML, наприклад grid-cols-15.
• Для позиціонування потрібно використовувати класи relative, absolute, fixed або sticky разом з координатами top-*, left-* тощо.
• Керувати шарами Z-index можна за допомогою z-* (наприклад, z-50 для модальних вікон).

Типографіка

Ці утиліти відповідають за вигляд тексту та його читабельність.

• Для зазначення розміру тексту використовують шкалу від text-xs (найменший) до text-9xl (величезний).
• Товщина шрифту задається класами від font-thin до font-black (наприклад, font-bold для жирного тексту).
• Tailwind має вбудовану палітру. Клас text-gray-500 задасть середній сірий колір, де 100 — найсвітліший, а 900/950 — найтемніший.
• Для вирівнювання та призначення інтервалів застосовують класи text-center для центрування, leading-* для міжрядкового інтервалу (line-height) та tracking-* для відстані між літерами.

Оскільки класів є багато, то варто встановити розширення Tailwind CSS IntelliSense для VS Code — воно буде автоматично підказувати назви класів та показувати їхній реальний CSS-код при наведенні.

На початках вивчення фреймворку варто тримати відкритим сайт з документацією або спеціальні "Cheat Sheets", щоб швидко знаходити потрібний клас.

Слід дотримуватися логічного порядку класів (Layout -> Box Model -> Typography -> Visual), або використовувати плагін Prettier, який сортуватиме їх автоматично.

Історично розробники писали стилі для десктопних версій сайту, а потім за допомогою медіа-запитів max-width «стискали» та ховали елементи для мобільних екранів.

Стратегія Mobile-First перевертає цей процес.

• Базовий шар стилів (класи без будь-яких префіксів) пишеться виключно для найменших екранів (мобільні телефони від 0px).
• В міру збільшення екрана розробник додає адаптивні префікси (брейкпоінти), які перевизначають або доповнюють базові стилі.

Tailwind CSS використовує виключно медіа-запити типу min-width (мінімальна ширина). Це означає, що будь-який стиль, заданий з префіксом, діє на вказаній ширині екрана і поширюється на всі більші екрани, доки не буде перевизначений наступним, більшим брейкпоїнтом.

Специфікація стандартних брейкпоінтів Tailwind CSS

• Без префікса (за замовчуванням). Смартфони в портретній орієнтації (ширина від 0px до 639px). Це фундамент верстки.
• sm: (Small). Екрани від 640px і більше. Зазвичай це смартфони в альбомній (landscape) орієнтації або невеликі phablet-пристрої.
• md: (Medium). Екрани від 768px і більше. Стандартний розмір для планшетів (наприклад, Apple iPad) в обох орієнтаціях.
• lg: (Large). Екрани від 1024px і більше. Охоплює екрани нетбуків, компактних ноутбуків та планшетів в горизонтальному положенні.
• xl: (Extra Large). Екрани від 1280px і більше. Повнорозмірні монітори комп’ютерів та сучасні ноутбуки.
• 2xl: (Double Extra Large). Екрани від 1536px і більше. Великі десктопні монітори та 4K-дисплеї.

Розбір логіки на практичних прикладах

Щоб вільно керувати адаптивністю через ШІ-промпти та самостійно коригувати код, необхідно чітко розуміти «ланцюжкову поведінку» класів.

Приклад 1. Керування видимістю елементів (Компонент «Гамбургер» та Меню)

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

<button  class="block md:hidden"> Кнопка мобільного меню</button>
<div class="hidden  md:flex"> Десктопні посилання  навігації</div>

Як браузер інтерпретує цей код

• На мобільному телефоні (наприклад, 375px). Для кнопки спрацьовує клас block (вона видима). Префікс md: ігнорується, бо екран менший за 768px.
  • Для блоку навігації спрацьовує клас hidden (меню приховане).
• На планшеті чи ноутбуці (наприклад, 1024px)
  • Ширина екрана перевищила бар'єр md (768px). Комп'ютер активує медіа-запит для префікса md:.
  • Для кнопки вмикається клас md:hidden, який повністю стирає та перевизначає базовий block. Кнопка зникає.
  • Для блоку навігації вмикається md:flex, який скасовує початковий hidden і перетворює блок на видимий гнучкий контейнер.

Приклад 2. Динамічна адаптивна сітка

Приклад побудови адаптивного підвалу сайту або секції карток товарів.

<div class="grid  grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
</div>

• Екран 400px (Мобільний). Працює базовий клас grid-cols-1. Всі картки або колонки футера шикуються строго вертикально в один стовпчик на всю ширину екрана.
• Екран 700px (Альбомний формат). Бар'єр sm (640px) подолано. Активується утиліта sm:grid-cols-2. Сітка миттєво перебудовується в дві рівні колонки. Префікс lg: ще чекає свого часу.
• Екран 1200px (Десктоп). Подолано бар'єр lg (1024px). Клас lg:grid-cols-4 бере пріоритет над попередніми налаштуваннями. Колонки плавно розгортаються в один горизонтальний ряд з 4 елементів.

Приклад 3. Динамічна ширина блоку

<div class="w-full md:w-1/2 lg:w-1/3">
</div>

• На мобільному (менше 768px) блок буде шириною 100% (w-full).
• На планшеті (від 768px) ширина стане 50% (md:w-1/2).
• На ноутбуці (від 1024px) ширина стане 33.3% (lg:w-1/3).

В новій версії фреймворку з'явилася вбудована підтримка класів @container, які сприяють елементам реагувати на розмір батьківського контейнера, а не всього екрана, що робить компоненти ще більш модульними.

Адаптивні класи можна комбінувати з іншими модифікаторами, наприклад: md:hover:bg-blue-500 (змінити фон при наведенні лише на екранах від 768px).

Рекомендується використовувати розширення Tailwind CSS IntelliSense, яке підказує доступні префікси та показує, який саме медіа-запит вони створюють.

Пісочниця Tailwind Play знаходиться за адресою play.tailwindcss.com

Інтерфейс розділено на три основні вкладки

• HTML. Тут пишеться розмітка та додаються утилітарні класи (наприклад, flex, bg-blue-500, p-4) безпосередньо до тегів.
• CSS. Надає можливість додавати кастомні стилі або використовувати спеціальні директиви, такі як @apply для створення власних компонентів.
• Config (або Settings). Тут можна налаштовувати тему проекту: додавати власні кольори, шрифти або підключати плагіни (наприклад, для типографіки).

Tailwind Play використовує той же рушій, що й розширення для VS Code.

Коли починати друкувати назву класу, з'являється список доступних варіантів. Можна переміщатися між варіантами підказок (наприклад, різними значеннями відступів p-4, p-5) за допомогою клавіш зі стрілками, і результат у вікні перегляду буде змінюватися миттєво, ще до того, як натиснути Enter.

Щоб змінювати розмір вікна попереднього перегляду, потрібно увімкнути режим адаптивного дизайну. Якщо розширити вікно за межі доступного місця, інтерфейс автоматично зменшить масштаб, щоб було видно, як дизайн виглядає на великих екранах.

За допомогою спеціального контролера в інтерфейсі можна перемикатися між світлою та темною темами, щоб перевірити класи з префіксом dark:.

Однією з найкращих функцій є One-click sharing. Кнопка "Share" призначена, щоб згенерувати унікальне посилання. Це посилання зберігає «знімок» всього коду (HTML, CSS та Config), обраний режим макета та навіть розміри вікна попереднього перегляду. Цей знімок можна надіслати будь-кому для демонстрації або допомоги в налогодженні коду.

Існує три найпростіші способи запустити інструменти розробника

• Спосіб 1 (найшвидший). Клавіша F12 (на деяких ноутбуках Fn + F12).
• Спосіб 2 (гарячі клавіші). Комбінація клавіш Ctrl+Shift+I (для Windows/Linux) або Cmd+Opt+I (для Mac).
• Спосіб 3 (мишкою). Права кнопка мишки на будь-якому елементі сайту та вибір з контекстного меню «Проінспектувати» (Inspect).

Якщо панель відкрилася збоку, а хочеться знизу (або навпаки), потрібно знайти в правому верхньому кутку DevTools три крапки (налаштування) та в рядку Dock side оберати зручне розташування екрана.

Архітектура діагностичного середовища браузера

Сучасні інструменти розробника (DevTools) мають спільну перевірену часом анатомію робочого простору, яка складається з чотирьох ключових зон.

1. Activity Bar (Панель активності). Глобальна навігація, що допомагає миттєво перемикатися між основними підсистемами (Elements, Console, Sources, Network, Performance).
2. Main Panel (Головна робоча область). Контекстне вікно, де відображається детальний інтерфейс вибраного інструменту.
3. Settings (Налаштування). Центр керування робочим простором (Workspaces), де налаштовується ігнорування сторонніх скриптів (Ignore-listing) та активуються експериментальні функції розробки.
4. Drawer/Quick View (Швідкий перегляд). Нижня висувна панель для паралельної роботи. Вона надає можливість, наприклад, тримати відкритими логі консолі під час інспектування структури сторінки.

Панель "Elements" (HTML та стилі)

Це головне вікно для роботи з версткою. Тут код сторінки відображається не статичним, а в реальному часі.

Як змінити текст чи HTML-тег на будь-якому сайті

1. Обрати інструмент «Стрілочка» (в лівому верхньому кутку DevTools).
2. Навести її на будь-який елемент на сторінці (наприклад, заголовок) і клікнути.
3. У вікні коду цей елемент підсвітиться. Клікнути по ньому двічі — тепер можна змінити текст, видалити тег або дописати новий клас. Натиснути Enter (зміни видно одразу, але вони зникнуть, якщо оновити сторінку).

Як експериментувати з CSS (Стилями)

Праворуч від коду міститься вкладка Styles.

• Зміна кольору/розміру. Знайти потрібну властивість (наприклад, color або font-size), клікнути на значення та змінити його (можна крутити стрілочками на клавіатурі «вгору/вниз»).
• Додавання нового правила. Клікнути в порожнє місце всередині будь-якого CSS-селектора і вписати, наприклад, background: red;.
• Перевірка блокової моделі (Box Model). Прокрутити вкладку Styles в самий низ. Там відображено кольоровий квадрат, який чітко показує: фізичний розмір картинки, її внутрішні відступи (padding), рамку (border) та зовнішні відступи (margin).

Панель "Console"

Консоль потрібна для того, щоб бачити помилки в коді (особливо в JavaScript) та тестувати команди.

• Червоні хрестики (Errors). Якщо сайт працює не так, як треба, першим ділом варто відкрити консоль. Якщо там є червоні рядки — це критичні помилки коду (наприклад, незакрита дужка чи неправильний шлях до картинки). Потрібно клікнути по лінку праворуч від помилки, і браузер покаже точний рядок, де зроблено помилку.
• Інтерактивна пісочниця. Тут можна писати код. Наберати alert('Привіт!'); або 2 + 2 і натиснути Enter. Браузер миттєво виконає команду.
• Фішка $0. Виділити будь-який тег в панелі Elements, перейти в Console, написати $0 і натиснути Enter. Консоль виведе саме той елемент, який щойно був виділений.

Перевірка на адаптивність для смартфонів

Перевірка, чи не «зламається» Grid/Flexbox галерея на екрані мобільного

1. Натиснути на іконку смартфона/планшета (поруч зі стрілочкою інспектора у верхньому кутку).
2. Сторінка зменшиться. У верхній панелі, що з'явилася, у випадному списку Dimensions обрати модель (наприклад, iPhone 14 або Pixel 7).
3. Або просто тягнути мишкою за краї вікна (сірі зони), щоб плавно змінювати ширину екрана та дивитися, як поводяться блоки й куди переноситься текст.

Панель "Network" — перевірка завантаження

Якщо картинки на сайті завантажуються занадто повільно, ця панель покаже в чому є проблема.

1. Відкрити вкладку Network.
2. Перезавантажити сторінку (F5 або Ctrl+R).
3. Покажеться таблиця зі всіма файлами, які браузер завантажує з комп'ютера чи сервера.
4. Корисна функція Throttling. Знайти у верхньому рядку напис No throttling і змінити його на Slow 3G. Тепер браузер імітуватиме дуже повільний мобільний інтернет. Оновити сторінку і подивитися, як завантажується сайт. Такий прийом навчить оптимізувати вагу картинок.

Секретна сила різних браузерів

Початківцю не обов'язково ставити всі три браузери відразу, але корисно знати їхні «суперсили».

• Chrome. Відкрити вкладку з подвійною стрілочкою << і обрати Lighthouse. Натиснути Analyze page load. Браузер сам протестує сайт і виставить оцінки від 1 до 100 за швидкість, SEO та доступність, а також напише текстові підказки, що саме виправити в коді.
• Firefox. Якщо в панелі Elements знайти блок, де написано grid або flex, поруч буде маленький фіолетовий значок. Після кліку на нього — Firefox намалює прямо поверх сайту лінії сітки, номери колонок та зони відступів. Це найкращий спосіб зрозуміти, як працює CSS Grid.
• Edge. Знайти в налаштуваннях інструмент 3D View. Він перетворить плаский сайт на тривимірне місто, де висота «будинків» — це шари вкладеності тегів або накладання елементів через z-index. Якщо якась кнопка не клікається, в 3D-вигляді можна відразу побачити, що її перекриває інший прозорий блок.

Цей сервіс є важливим для перевірки HTML-розмітки. Браузери є довольні лояльними. Якщо допущено помилки в HTML (наприклад, забули закрити блок </div> або вклали один тег в інший невірно), браузер спробує самостійно "виправити" код в пам'яті. Але кожен браузер зробить це по-своєму, що призведе до руйнування верстки. Валідатор знаходить ці приховані міни.

Три методи перевірки коду

1. Validate by URL. Перевірка сайту, який вже опубліковано в інтернеті (знадобиться в фінальних лабораторних роботах).
2. Validate by File Upload. Завантаження локального файлу index.html безпосередньо з комп'ютера.
3. Validate by Direct Input. Накопичувальний або швидкий метод. Потрібно скопіювати весь код з IDE (VS Code/Cursor) та вставити його в текстове поле сервісу.

Під час семантичного рефакторингу (заміни <div> на <header>, <main>, <section>) ШІ може порушити архітектурну ієрархію.

Типові помилки, які виявить W3C Markup Validator.

• Неправильне вкладення (Nested tags error). Наприклад, розміщення блочного тегу всередині рядкового: <a><section>...</section></a>. Валідатор відразу підсвітить це як грубу помилку.
• Відсутність обов'язкових атрибутів. Якщо ШІ згенерував картку товару чи галерею, але забув додати атрибут alt для картинки <img>, валідатор видасть попередження (Warning), оскільки це порушує стандарти доступності для людей з порушеннями зору.
• Дублювання унікальних ідентифікаторів. Використання однакового id="..." для кількох елементів сторінки. На екрані все може виглядати нормально, але JavaScript-віджет (наприклад, майбутній калькулятор в ЛР №9) відпрацює некоректно.

Якщо HTML — це скелет, то CSS — це обгортка та дизайн сайту. CSS-валідатор аналізує каскадні таблиці стилів (style.css) на відповідність сучасним стандартам CSS3.

Специфіка перевірки CSS в контексті ШІ

Сучасний ШІ навчався на величезних масивах даних, які містять як застарілий код (10-річної давнини), так і експериментальні властивості, які ще не затверджені стандартами.

Типові помилки, які виявить W3C CSS Validator.

• Синтаксичні помилки («друкарські огріхи» ШІ). Пропущена крапка з комою ;, незакрита фігурна дужка } або помилка в назві властивості (наприклад, background-colr замість background-color).
• Галюцинації з властивостями. ШІ може змішати синтаксис Flexbox та CSS Grid, видавши щось типу grid-align: center; (такої властивості в Grid не існує, є align-items або justify-content). Валідатор чітко вкаже рядок з неіснуючим правилом.
• Помилки в CSS-змінних. Оскільки в ЛР №5 впроваджено архітектуру CSS-змінних в блоці :root, валідатор перевірить правильність їхнього оголошення та виклику через функцію var(--variable-name).

Не потрібно намагатися виправити всі помилки самостійно — варто змусити ШІ вчитися на своїх помилках. Це й є справжня інженерія промптів.

1. Перевірити файл index.html через W3C Markup Validator.
2. Якщо сервіс видав червоні помилки (Errors), скопіювати їхній текст разом з номерами рядків.
3. Відкрити чат-асистент в IDE (Copilot/Codeium) та надіслати наступний промпт:

   «Мій HTML-код не пройшов перевірку офіційного валідатора W3C. Він повернув наступну помилку на рядку [вказати номер]: "[вставити текст помилки з валідатора]". 
   Проаналізуй мій поточний файл, поясни мені простими словами, в чому саме полягає архітектурна помилка, та виправ код так, щоб він став на 100% валідним за стандартами W3C.»
   

4. Повторити процедуру для файлу style.css через CSS-валідатор.

• Utility-First CSS (Утилітарний/Атомарний CSS) — підхід до стилізації веб-інтерфейсів, за якого замість написання унікальних комплексних CSS-класів (наприклад, .card { ... }) використовуються готові, низькорівневі одноцільові класи-утиліти безпосередньо в HTML-розмітці.
• Tailwind CSS — сучасний утилітарний CSS-фреймворк, що надає велику базу готових класів для швидкої верстки, гнучкого керування адаптивністю та побудови системного дизайну без написання сирого CSS-коду.
• Семантичний CSS — класичний підхід до верстки, за якого назви класів відображають логічну роль або зміст елемента (наприклад, .main-navigation, .site-footer), а всі стилі описуються в зовнішніх таблицях стилів.
• Preflight — вбудована у Tailwind CSS система базового скидання стилів браузера (побудована на основі modern-normalize), яка усуває розбіжності у відображенні стандартних HTML-елементів в різних браузерах і створює чистий «фундамент» для верстки.
• Just-In-Time (JIT) компілятор — двигун Tailwind CSS, який в реальному часі сканує файли проєкту, виявляє використані утилітарні класи та миттєво генерує під них CSS-код, автоматично очищуючи фінальний файл від всього зайвого.

• Mobile-First (Спочатку мобільні) — стратегія веб-розробки та дизайну, за якої базові стилі інтерфейсу створюються для найменших екранів (мобільних телефонів), а для більших дисплеїв код прогресивно покращується за допомогою медіа-запитів.
• Breakpoint (Брейкпоїнт/Точка зупину) — визначена ширина екрана в пікселях, на якій макет сайту змінює свій вигляд або структуру для адаптації під пристрій (в Tailwind це префікси sm:, md:, lg:, xl:, 2xl:).
• Media Queries (Медіа-запити) — правило в CSS (@media), яке надає можливість застосовувати блоки стилів залежно від технічних параметрів пристрою (ширини, висоти, орієнтації екрана). Tailwind використовує запити типу min-width.
• Cross-Device (Сумісність пристроїв) — здатність вебресурсу коректно, без помилок і зсувів сітки відображатися та однаково зручно функціонувати на будь-яких типах пристроїв (смартфони, планшети, ноутбуки, телевізори).
• Device Toolbar (Інспектор пристроїв) — спеціальний інструмент в панелі розробника браузера (DevTools), призначений для емуляції різних мобільних гаджетів, тестування адаптивності та відстеження поведінки медіа-запитів в реальному часі.

• Tailwind Play — офіційна інтерактивна онлайн-пісочниця (хмарне середовище), що надає розробникам можливість тестувати, редагувати та дебажити HTML/CSS код з використанням Tailwind без локального налаштування робочого простору на комп’ютері.
• Prompt-to-UI — парадигма розробки інтерфейсів, за якої створення візуальних елементів (компонентів, макетів) відбувається через текстовий опис природною мовою для ШІ-генератора.
• Refinement Workflow (Ітеративне рафінування) — процес покрокового доопрацювання, чищення та покращення згенерованого ШІ коду через послідовні уточнювальні запити в чаті з ШІ.
• Tailwind CSS IntelliSense — розширення для редакторів коду (наприклад, VS Code), яке автоматично підказує назви утилітарних класів, показує їхнє CSS-значення та колірні коди безпосередньо під час написання коду.

• Ізольований компонент — самостійний, незалежний і завершений елемент веб-інтерфейсу (наприклад, кнопка, хедер, картка), який має власну розмітку та стилі й може бути легко перенесений в будь-яку частину проєкту.
• Адаптивний навбар (Navbar) — верхня навігаційна панель сайту, яка автоматично змінює структуру (наприклад, перетворюється з горизонтального списку на десктопі в приховане «меню-бургер» на мобільному).
• Випадний список (Dropdown) — елемент інтерфейсу, який з'являється (активується) при наведенні миші або кліку на батьківський об'єкт, відкриваючи користувачу доступ до додаткових підрозділів сайту.
• Доступність вебінтерфейсу (Accessibility) — практика створення веб-сторінок, які є зручними та доступними для всіх користувачів, включаючи людей з обмеженими можливостями (реалізується через контраст кольорів, семантичні теги та ARIA-атрибути).
• ARIA (Accessible Rich Internet Applications) атрибути — спеціальні атрибути в HTML-тегах (наприклад, aria-label, aria-expanded), які допомагають програмам зчитування з екрана (скрінрідерам) правильно інтерпретувати динамічні зміни та стан елементів для незрячих користувачів.