Размытие навигационных ссылок при клике и веб-доступности

У меня есть вопрос о веб-доступности. В случае SPA (приложение с одной страницей), размытие навигационных ссылок по клику является правильным или нет?

Правильное: Замена содержимого через AJAX в SPA-это то же самое, что перемещение страницы в традиционной веб-странице. Другими словами, контекст страницы изменяется, поэтому навигационные ссылки должны быть размыты при нажатии на них.

Неправильно: Ты знаешь причины. Удаление кольца фокусировки приводит к серьезным проблемам доступности для пользователи, которые перемещаются и взаимодействуют с интерактивным контентом с помощью клавиатуры, как сказали W3C и WHATWG.

Тогда, что вы думаете? Какая из них правильная?

Еще одно, речь идет не о фокусном кольце или визуальном эффекте. Единственное, что меня волнует, - это "смысл".

3 2
html single-page-application w3c accessibility

3 ответа:

Это зависит от контекста.

  • Если у вас есть ссылка "Следующая страница" и ссылка остается там, вы можете просто уведомить Пользователя с помощью области aria-live о том, что основной контент был изменен. И пользователь ожидает, что еще один клик, чтобы перейти на" следующую страницу " снова без необходимости прокрутки вниз к той же ссылке.

  • Если сама ссылка исчезает и была частью старого контента, да конечно, вы this.blur() это при необходимости, как если бы страница была нормально измененный.

  • Если это навигационная ссылка для перехода на определенную страницу, то у пользователя нет причин нажимать на нее снова, тогда вы можете вызвать обычное изменение страницы и this.blur() Эту ссылку.

Примечание: я использовал Глагол this.blur(), потому что "размытие" действительно размывало мой разум, но вы можете использовать любую альтернативу javascript, например, сосредоточиться на другой части страницы

1

Я не совсем понимаю, что вы подразумеваете под размытием в этом контексте, но в СПА-клавиатуре управление фокусом-это требование.

Простое применение on-blur к ссылкам при щелчке может быть довольно вредным, так как экранные программы могут отправлять событие onclick JS при выборе ссылки.

Как для пользователей визуальной клавиатуры, так и для пользователей screenreader, когда выбрана ссылка и содержимое обновляется JS, фокус (как в JS .focus() ) должен быть перемещен в начало нового содержимого. Этот элемент контента может понадобиться tabindex="-1" для того, чтобы сделать его фокусируемым.

Например, если у вас есть основная область содержимого, которая обновляется новым содержимым при выборе ссылки, переместите фокус в верхнюю часть нового содержимого после его загрузки.

Если у вас также есть проблема с фокусными контурами onclick, лучшим вариантом является удаление любого CSS, который изменяет контур из-за :focus. Смотрите мою статью фиксация контуров по щелчку Для этого и другого варианта.

См. Также этот ответ на вопрос: общие вопросы для спа .

3

Вопрос не ясен, поэтому я отвечаю на основе того, что я понял;

Если вы хотите информировать пользователей об изменениях на странице, вам нужно использовать теги ARIA, такие как live regions и т. д. Использование эффектов css не окажет влияния на программы чтения с экрана. Таким образом, вам нужен способ сообщить программе чтения с экрана, что определенная часть страницы была обновлена.

0