Доступность: табуляция на мобильных устройствах идет за наложением навигации в нижней части окна просмотра

Как указано в заголовке. Когда вы начинаете вкладку, он не учитывает тот факт, что в нижней части экрана есть наложение навигации. Таким образом, определенные ссылки и кнопки, скрытые за оверлеем, будут перенесены на вкладки, но не будут видны пользователю.

Есть ли способ переопределить эту функцию и принудительно отображать элементы с вкладками?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
249
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я нашел две вещи:

  1. DocumentOrShadowRoot.activeElement это один из способов, которым мы могли бы захватить текущую кнопку или ссылку.

  2. Element.scrollIntoView() так мы перемещаем сфокусированный элемент в центр области просмотра.

Ответ принят как подходящий

Попытка перехватить tab и т. д. и самостоятельно отрегулировать положение прокрутки - это одна из возможностей, как вы заявили, но это потенциально может привести к неожиданному поведению.

Лучший способ справиться с этим — настроить макет с учетом наложения внизу.

По сути, весь ваш основной контент будет находиться в контейнере (это может быть элемент <main>, если ваше наложение внизу представляет собой <aside>, в противном случае просто используйте <div>).

Сделайте этот контейнер высотой страницы за вычетом высоты наложения.

Таким образом, за оверлеем никогда не будет никакого контента (который технически больше не является оверлеем, поскольку за ним ничего не скрывается).

Прелесть этого в том, что когда вы доберетесь до самого низа страницы, все будет видно, с наложением вы можете получить что-то частично скрытое, если вы не дадите ему достаточно полей / отступов внизу.

Я согласен, и это все еще прорабатывается, так что, возможно, это будет решение, которое примет команда дизайнеров.

weytani 15.12.2020 18:13

Другие вопросы по теме