Клавиатурный фокус

[solarrust]

Тема

• Что такое фокус.
• Какие элементы должны получать фокус, какие нет.
• Индикатор фокуса. Как можно стилизовать, какие есть требования.
• Выбранный элемент и элемент в фокусе. Какая разница, почему визуально должны отличаться.
• Что такое порядок фокуса/навигации. tabindex (и как правильно его задавать), влияет ли свойство order на него, учёт направления письма.
• Ловушка фокуса/клавиатуры.

Ссылки для старта

• https://web.dev/learn/accessibility/focus/
• https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
• https://devyarns.com/logical-focus-order/
• https://www.tempertemper.net/blog/focus-appearance-explained
• https://www.w3.org/TR/WCAG22/#no-keyboard-trap
• https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html
• https://www.boia.org/blog/why-keyboard-traps-are-one-of-the-most-frustrating-accessibility-issues
• https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/
• https://tatiana-fokina-blog.ru/posts/wcag-focus-appearance/
• https://tatiana-fokina-blog.ru/posts/wcag-keyboard/

Полезные ссылки по тексту и демкам в Доке

• Руководство по стилю.
• Демки.
• Про стиль демок.
• Подпись автора.

[glafirazhur]

Можно смело делать целый цикл статей на эту тему :)

https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/