Съдържание при задържане или фокус

Какво се изисква

Когато допълнително съдържание — подсказка, изскачащ прозорец, подменю — се появява при задържане на курсора или фокусиране върху елемент, то трябва да отговаря на три изисквания. Затворимост: потребителят може да го скрие, без да мести курсора или фокуса (обикновено с клавиша Escape). Достижимост: ако потребителят премести курсора от задействащия елемент към показаното съдържание, то остава видимо. Постоянство: съдържанието не изчезва автоматично с изтичане на изчакване — то се крие само когато потребителят го затвори или фокусът напусне задействащия елемент.

Как да се изпълни

• Клавишът Escape да се свърже с затварянето на всяка подсказка или изскачащ прозорец, отворен при задържане на курсора или фокус.
• Елементът с подсказка да е достижим с мишката — да не е позициониран така, че преместването на курсора към него да задейства mouseout върху задействащия елемент.
• Подсказките да не се затварят автоматично след изтичане на изчакване, докато потребителят все още задържа курсора или фокуса върху задействащия елемент.
• Да се използва aria-describedby за свързване на задействащия елемент с изскачащото съдържание, така че екранните четци да го прочетат.
• Изскачащите прозорци да се изграждат с HTML атрибута popover или с проверена библиотека (Popper.js, Floating UI, Radix UI) — те вече спазват тези изисквания.
• За падащи подменюта да се предвиди малка буферна зона между родителския елемент и подменюто, така че курсорът да може да премине, без да затвори менюто.

Чести нарушения

• Подсказки само с CSS (:hover) и разстояние между задействащия елемент и подсказката — курсорът влиза в процепа, задейства се mouseout и подсказката изчезва.
• Подсказки, затварящи се автоматично след 2 секунди, дори докато потребителят задържа курсора.
• Липсващ обработчик на Escape — потребителите, навигиращи с клавиатура, не могат да затворят подсказка, появила се при фокус, без да напуснат полето.
• Падащи менюта, затварящи се в момента, в който курсорът се отдалечи от родителския елемент, преди да достигне дъщерните.
• Изскачащи прозорци, задействани при фокус, заемащи видимата зона и неоткликващи на Escape — остават видими завинаги.

Защо е важно

Този критерий за успех най-често се нарушава от подсказки, изградени на ръка, и падащи менюта само с CSS. Препоръчва се преминаване към библиотека, която вече обработва затворимостта и достижимостта, или проверка на собствения код спрямо трите изисквания. Това е ефективна корекция: интерактивното съдържание при задържане и фокус обикновено присъства навсякъде в сложен интерфейс, поради което правилното му реализиране веднъж в общ компонент е значително намаляване на дълга по одита.