Мне было поручено создать SPA, который имеет некоторые сложные переходы страниц.
Моя самая большая проблема заключается в том, что эти переходы зависят от элементов, расширяющихся на странице, чтобы затем стать полной страницей (т.е. вы нажимаете синюю Кнопка, синий фон расширяется, чтобы заполнить всю страницу, а затем отображается содержимое.)
Теперь именно здесь я пытаюсь найти доступное решение. Я думал о том, чтобы сделать текст в исходной «кнопке» ссылкой с отступом (так как URL будет обновлен, а ссылка не для JavaScript отступления), а затем заменить содержимое родительского div (синий фон) новым content.
Проблема, с которой я столкнулся, заключается в том, что я не уверен, что было бы наилучшим способом обеспечения доступности с точки зрения информирования пользователя программы чтения с экрана о загрузке новой страницы. Использование aria-live ужасная идея, но с NVDA, если я просто заменю содержимое div, у него может быть странное поведение.
Кто-нибудь когда-нибудь сталкивался с этим раньше? Например, этот дриблинг почти показывает, что я имею в виду , вы щелкаете элемент, и затем он открывается на новую страницу с содержимым внутри элемента.
Для «нормального» * 1023 * при навигации по сайту я бы просто заменил весь <main> новым контентом, сделал бы <h1> программно сфокусированным на tabindex="-1", обновил страницу <title>, и это прекрасно работает, но с этим типом навигации мне интересно если тот же подход применим.
Я думаю заменить все внутри элемента <main>, кроме выбранного фона кнопки (включая удаление исходной ссылки после загрузки новой страницы), а затем загрузить содержимое и управлять фокусом как Описанное сработало бы, но я не уверен, существует ли принятый шаблон для этого типа навигации, поскольку он настолько необычен.