Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що означає «responsive accessibility»?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**«Responsive accessibility» (адаптивна доступність)** - поєднання адаптивного дизайну та a11y: сайт залишається доступним і зручним для всіх користувачів на будь-якому пристрої й екрані. **Ключове:** адаптивність не повинна ламати фокус, семантику, контраст чи читабельність, коли верстка змінюється під розмір екрана.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняТермін **«responsive accessibility»** (адаптивна доступність) означає, що **веб-сайт залишається доступним і зручним для всіх користувачів - на будь-яких пристроях, екранах і за будь-яких способів взаємодії**. Це поєднання двох принципів: - **responsive design** - адаптивна верстка, що підлаштовується під розміри екрана; - **accessibility (a11y)** - доступність інтерфейсу для людей із різними можливостями. --- ### 1. Суть «responsive accessibility» Багато сайтів виглядають "адаптивними" - текст і блоки змінюються під екран. Але при цьому: - втрачається структура для скринридерів, - ламається порядок фокуса під час навігації з клавіатури, - зникають описи кнопок, - дрібні елементи стають недоступними для людей із порушенням моторики. > «Responsive accessibility» гарантує, що сайт не тільки **змінює зовнішній вигляд**, а й **зберігає доступність** при цьому. --- ### 2. Приклади проблем без адаптивної доступності - У мобільній версії кнопки стають настільки дрібними, що по них неможливо влучити пальцем. - При зміні верстки `tab`-навігація збивається, і користувач клавіатури втрачає контекст. - Текст стискається до нечитабельного розміру. - Скринридер втрачає зв'язок між заголовками та контентом, якщо елементи перебудовуються неправильно. - Колірні контрасти в мобільній темі виявляються гіршими, ніж у десктопній. --- ### 3. Як забезпечити responsive accessibility **Семантична розмітка.** Використовувати правильні теги (`<header>`, `<main>`, `<nav>`, `<button>`, `<form>` тощо) - вони зберігають структуру незалежно від пристрою. **Гнучкі розміри.** Не фіксувати текст і кнопки в пікселях - використовувати `em`, `rem`, `min()`, `max()` для масштабованості. **Тестування на різних пристроях.** Перевіряти не тільки візуально, а й через: - клавіатурну навігацію, - скринридери (NVDA, VoiceOver), - симулятори мобільних екранів. **Правильний порядок фокуса.** Стежити, щоб при перебудові елементів `tab`-фокус ішов логічно. **Контраст і читабельність.** Кольори та розміри мають залишатися розбірливими за будь-яких роздільних здатностей і тем (включно з темним режимом). --- ### 4. Навіщо це потрібно - **Мобільні користувачі** - понад 70% усього трафіку. - **Користувачі з інвалідністю** часто працюють саме з адаптивними інтерфейсами (мобільні скринридери, голосове керування). - **SEO та UX** напряму виграють від коректної адаптивної доступності. - **Юридичний захист** - WCAG 2.1 включає вимоги адаптивності до критеріїв доступності. --- ### Висновок: **Responsive accessibility** - це коли сайт: - адаптується до будь-якого екрана, - при цьому **не втрачає доступності**: фокус, семантику, контраст, читабельність і керованість. Іншими словами, це **дизайн, який не ламає доступність при зміні розмірів екрана**, а робить її природною частиною адаптивного інтерфейсу.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.