До модальним вікнам можна ставитися як до відмінного способу придбати додаткове екранне місце, привернути увагу користувача сайту, запропонувати йому вибір або попередити про зміни. Або як до брудного хаку, що дозволяє нав'язати відвідувачеві інформацію, на яку він інакше не звернув би уваги.
Це - крайні точки на лінійці, якої вимірюється наші взаємини з користувачем сайту. Залежно від звичок, особистих переваг і способу серфінгу по мережі модальні вікна можуть бути для користувача благословенням або прокляттям.
Якщо поява модального вікна сталося автоматично або просто не було в явному вигляді ініційовано користувачем, воно може дезорієнтувати і дратувати. Це дозволяє звинувачувати модальні вікна в настирливості і вторгненні в приватний простір користувача.
Здається, що модальні вікна не можуть серйозно перешкодити користувачеві, поки вони містять прості і добре помітні елементи управління. Завжди можна натиснути «хрестик» в кутку екрану, пробігтися по тексту або заповнити, нарешті, цю форму реєстрації.
Але уявіть собі, що ви керуєте браузером за допомогою клавіатури інтернет-кіоску, дисплея Брайля або пристрої голосового введення, а що з'явилося модальное вікно не перемістило фокус введення на свою кнопку або поле, а залишило його десь під собою, в іншому контенті сайту. Це призведе сайт в непридатність для використання на нашому пристрої.
І такі випадки відбуваються частіше, ніж можна було очікувати при сучасному розвитку юзабіліті-практик і засобів тестування.
Семантика коду сприяє доступності сайту
Простота використання і доступність сайту на будь-яких пристроях часто страждає при використанні модальних вікон. Незалежно від мети використання модального вікна, управління ним повинно бути простим і універсальним.
Щоб домогтися цього, ми повинні уважно поставитися до семантиці розмітки. Ця вимога здається простим, але, на жаль, воно часто не виконується. Уявіть собі наступний код вікна з кнопкою «Закрити»:
елемент
не має певного смислового значення в цьому контексті. Звичайно, його можна впізнати як кнопку закриття вікна за візуальними ознаками: символу «X» і зміни форми курсору. Але що, якщо з сайтом працює погано бачить або незряча людина?
Щоб можна було перемістити фокус введення на даний
, ми повинні використовувати атрибут tabindex. Крім того, стан, що описується псевдо-селектором: focus. дозволить ідентифікувати його як активний елемент. Це зробить управління сайтом за допомогою альтернативних пристроїв можливим, але не занадто простим.
Кращим рішенням у даній ситуації буде використовувати тег