Fix scrollable-region-focusable axe errors
A region with overflowing content cannot receive keyboard focus, so keyboard users may be unable to scroll it.
Кого затрагивает
Keyboard-only users and screen-reader users navigating code blocks, tables, panels and other independently scrolling regions.
Связь с WCAG
2.1.1 Keyboard (A)
Обнаружение
wcagc reports scrollable regions that have no keyboard-focusable element capable of controlling their scroll position.
Почему возникает эта ошибка
- A table or code block gains overflow:auto without a focus target.
- A custom panel scrolls internally while all descendants are static text.
- Responsive CSS introduces overflow only at a narrow viewport.
Проблемная разметка
<div style="max-height:12rem;overflow:auto">Long content...</div>Исправленный код
<div role="region" aria-label="Build log" tabindex="0" style="max-height:12rem;overflow:auto">Long content...</div>Проверьте исправление вручную
Using only the keyboard, reach the region and scroll it in both directions without trapping focus. Confirm that its accessible name explains the content rather than only saying scroll area.
Границы автоматизации
Adding tabindex can create excessive focus stops. A person must decide whether the region should scroll independently and whether a simpler responsive layout can remove the nested scrolling.
Источники и стандарты
Метаданные правила и ссылка Deque генерируются из axe-core 4.12.1. Ссылка W3C ведёт на нормативное руководство WCAG для соответствующего критерия.
Вопросы разработчиков
Should every overflow:auto element get tabindex=0?
No. Add focus only when users must scroll the region independently. First consider removing unnecessary nested scrolling or providing naturally focusable content.
Why give the region an accessible name?
A named region tells screen-reader users what they entered. Use a concise content-specific label rather than repeating generic scrolling instructions.
Одно нарушение редко встречается в одиночку
Запустите проверку страницы в wcagc, чтобы найти это правило, связанные проблемы WCAG, затронутые селекторы и пункты, требующие ручной оценки.
Проверить страницу