Создание доступной якорной ссылки с помощью React

Создание доступной якорной ссылки с помощью React

От автора: ссылки необходимы для навигации по любому веб-сайту с момента появления современной сети в 2000-х годах. Не существует определенного числа, выражающего максимальное количество ссылок на любой веб-странице. Однако можно с уверенностью предположить, что семантический HTML header будет иметь несколько ссылок анкоров.

В конце концов, header — это точка входа во вложенную структуру вашего сайта. Хотя переполненная навигация может быть не такой проблемой (как множество всплывающих окон и привлекающих внимание рекламных объявлений), она, безусловно, может быть утомительной для посетителей.

Навигация в интернете без мыши не так тривиальна, как может показаться. В зависимости от реализации веб-сайта совместимость с клавиатурой может быть реализована плохо. Интересно, что лидеры отрасли понимают важность доступности и охвата более широких слоев населения. Таким образом, мы можем наблюдать вполне заслуженный сдвиг парадигмы в сторону веб-доступа с клавиатуры.

Рекомендую вам использовать вашу любимую социальную сеть с клавиатурой, чтобы лучше понять основную проблему. Каждый раз, когда «клавиатурный пользователь» посещает страницу, ему приходится нажимать TAB для навигации, прежде чем можно будет прочитать какой-либо значимый контент. Специалисты по пользовательскому опыту (UX) обычно выявляли такую проблему и решали ее с помощью так называемых «скиплинков».

Skiplinks

Такой анкор предназначен для использования в качестве первого HTML-элемента, к которому пользователь может перейти с помощью TAB. Он часто существует скрытым в навигации заголовка, прежде чем другие ссылки могут быть идентифицированы. Обычная реализация HTML может выглядеть примерно так:

Ваш стиль CSS может быть разработан следующим образом:

По умолчанию наш Skiplink имеет position: absolute; чтобы не нарушать поток HTML. Когда для навигации используется клавиатура, .skip-link получает фокус и вставляется обратно в статическую позицию HTML.

Мы используем transformX из-за его производительности при переходе в сфокусированное состояние. Основное предположение, побуждающее нас использовать преобразование, основано на расширении header вместе с областью просмотра. Если ваш header имеет статический размер, рекомендуется использовать свойство left.

Подводные камни реализации

Вышеупомянутой реализации достаточно для многих проектов. Это, безусловно, порадует пользователей навигации с помощью клавиатуры. Однако, если вы заинтересованы в многократно используемой и надежной инженерной инфраструктуре, рекомендуется учитывать следующие подводные камни:

Возможность повторного использования: чаще всего в вашем веб-приложении преобладают различные варианты header -ов. Обычно маркетинговый компонент и компонент header веб-приложения удовлетворяют разные потребности.

Фрагментная (#) навигация. Ваше веб-приложение сложное, потенциально может содержать сотни страниц, имеющих общую структуру ориентиров HTML. Внедрение атрибута id для соответствия href вашего скиплинка может быть утомительным и подверженным ошибкам.

Поисковая оптимизация (SEO): Ваша якорная ссылка неизбежно будет проанализирована поисковыми роботами. Скрывать Skiplink не рекомендуется, как предлагает Google в своей авторской статье о скрытых текстовых ссылках.

Скиплинки в React

Как мы можем снизить все вышеперечисленные риски, заботясь как о инженерах, так и о пользователях? Мы можем реализовать навигацию по фрагментам, программно прокручивая элемент, используя комбинацию document.querySelector() и добавляя .focus() к выбранному элементу-оболочке HTML.

SEO можно улучшить, используя кнопки вместо якорных ссылок Skiplinks. Кнопки не так легко интерпретируются сканерами веб-сайтов, однако наша реализация должна быть неизменной.

Независимо от того, используете ли вы кнопки или якоря, мы хотим создать повторно используемый компонент, который инкапсулирует желаемую функциональность. Очевидно, что нам понадобится обработчик события onClick, который следует перенаправить нашим дочерним элементам. Реализация React + TypeScript показана ниже:

React.cloneElement() особенно полезен в нашей реализации. Мы передаем дополнительное свойство className, которое может не понадобиться в вашей собственной реализации. Рекомендуется использовать это свойство, чтобы имя класса было согласованным между несколькими импортами, не полагаясь на дочерние элементы.

Потенциальная композиция для вашего проекта может выглядеть так:

Будем надеяться, что Skiplinks будут приняты и стандартизированы в более широком спектре Интернета. Их легко реализовать, одновременно улучшая доступность навигации клавиатурой на вашем веб-сайте.

Автор: George Argyrousis

Источник: levelup.gitconnected.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.