👁️ Доступные компоненты: семантика и ARIA. Это спросят на собесе!

Это реальный вопрос с фронтенд-собеседования: как сделать интерактивный компонент доступным? В шортсе рассмотрим правильную разметку модального окна на примере. Для кнопки, открывающей модалку, используйте aria-haspopup="dialog", чтобы скринридер объявил, что кнопка открывает диалог. Само модальное окно — role="dialog" или role="alertdialog", aria-modal="true", чтобы фокус оставался внутри. Заголовок свяжите через aria-labelledby, описание — через aria-describedby. Атрибут title недостаточен для доступности, используйте aria-label для немых элементов без текста или описание через aria-labelledby. Фокус при открытии должен перемещаться в модалку, а при закрытии — возвращаться на кнопку. На собеседовании важно показать, что вы понимаете не просто ARIA, а сценарии использования с клавиатуры и скринридера. Полный разбор — в большом видео по ссылке под этим шортсом. #a11y #modalwindow #frontend #frontendinterview #middle #senior #techinterview #codinginterview