Suggest an editImprove this articleRefine the answer for “What does "responsive accessibility" mean?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**"Responsive accessibility"** is the combination of responsive design and a11y: a site remains accessible and usable for all users on any device and screen. **Key point:** responsiveness must not break focus order, semantics, contrast, or readability when the layout adapts to screen size.Shown above the full answer for quick recall.Answer (EN)ImageThe term **"responsive accessibility"** means that **a website stays accessible and usable for all users, on any device, any screen, and with any way of interacting with it**. It combines two principles: - **responsive design**: layout that adapts to screen size; - **accessibility (a11y)**: an interface accessible to people with different abilities. --- ### 1. What "responsive accessibility" means Many sites look "responsive": the text and blocks change to fit the screen. But at the same time: - the structure for screen readers gets lost, - the focus order breaks during keyboard navigation, - button descriptions disappear, - small elements become unusable for people with motor impairments. > "Responsive accessibility" guarantees that a site not only **changes its appearance** but also **keeps its accessibility** while doing so. --- ### 2. Examples of problems without responsive accessibility - On the mobile version, buttons become so small that they cannot be tapped accurately. - When the layout changes, `tab` navigation breaks, and keyboard users lose context. - Text shrinks to an unreadable size. - A screen reader loses the connection between headings and content if elements are rearranged incorrectly. - Color contrast in the mobile theme turns out worse than in the desktop one. --- ### 3. How to achieve responsive accessibility **Semantic markup.** Use the correct tags (`<header>`, `<main>`, `<nav>`, `<button>`, `<form>`, and so on): they preserve structure regardless of the device. **Flexible sizing.** Do not fix text and buttons in pixels: use `em`, `rem`, `min()`, `max()` for scalability. **Testing on different devices.** Check not only visually, but also through: - keyboard navigation, - screen readers (NVDA, VoiceOver), - mobile screen simulators. **Correct focus order.** Make sure that as elements rearrange, `tab` focus still flows logically. **Contrast and readability.** Colors and sizes must stay legible at any resolution and theme (including dark mode). --- ### 4. Why it matters - **Mobile users** account for more than 70% of all traffic. - **Users with disabilities** often work specifically with responsive interfaces (mobile screen readers, voice control). - **SEO and UX** directly benefit from correctly implemented responsive accessibility. - **Legal protection**: WCAG 2.1 includes responsiveness requirements among its accessibility criteria. --- ### Conclusion: **Responsive accessibility** is when a site: - adapts to any screen, - while **not losing accessibility**: focus, semantics, contrast, readability, and controllability. In other words, it is **design that does not break accessibility when screen size changes**, but makes accessibility a natural part of the responsive interface.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.