Специальные возможности: использование javascript только ссылок с href = "#" - PullRequest
Новая
       51

Специальные возможности: использование javascript только ссылок с href = "#"

2 голосов
/ 04 августа 2020

У меня есть SPA-центр реакции, в котором у меня есть некоторые ссылки, которые переходят на другие страницы или в другие места на той же странице. Эти переходы либо определяются программно, либо зависят от javascript до go в другое место на той же странице. page.

  • Я могу не знать ссылку href, когда ссылка отображается, поэтому я визуализирую ее с помощью href="#" и event.preventDefault() в обработчике кликов, после чего я запускаю logi c, чтобы решить, куда должна перейти ссылка.
  • В случае ссылок привязки мне нужно javascript для прокрутки к элементу, потому что с маршрутизаторами SPA, имеющими sh привязанные ссылки, могут не работать как закрепленный элемент может быть еще недоступен, а также мне нужна плавная прокрутка. (В этом случае я, вероятно, все еще могу указать href, который сохраняет ссылку доступной, но использовать javascript для обработки прокрутки)

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

Как мне убедиться, что использование semanti c и доступно? Должен ли я использовать вместо этого кнопку? Или я должен добавить какую-то другую информацию в ссылку с помощью aria-label? Или для доступности действительно нормально иметь ссылки с href = "#"?

1 Ответ

3 голосов
/ 04 августа 2020

Короткий ответ

Ссылки должны использоваться, если URL-адрес изменяется (навигация) для всего остального, следует использовать кнопку. <a href="#" - не лучшая практика, но для СПА должно быть нормально, если текст вашей ссылки точный и подробный. Избегайте плавной прокрутки или дайте людям возможность отключить ее, так как это может дезориентировать.

Более длинный ответ

Я дал довольно развернутый ответ на <a> против <button> в SPA здесь , поэтому я надеюсь, что этого достаточно, чтобы ответить, какой из них использовать в каком сценарии для общих случаев использования.

Что касается # в URL-адресе из-за того, что вы не знали URL-адрес раньше рука. Было бы намного лучше, если вы запустите его как #, если URL-адрес неизвестен, но затем обновите href, как только вы узнаете, куда вы собираетесь направлять людей.

Это по причинам, обсуждаемым в ответ, который я связал относительно заверения, т.е. зная, куда меня приведет ссылка.

Очевидно, если вы не можете сделать это, убедитесь, что текст ссылки очень информативный, чтобы я мог быть уверен, что иду в нужное место.

Прокрутка в SPA

Что касается прокрутки к различным частям страницы, которые все равно будут ссылкой, как вы говорите, при условии, что вы обновляете URL с #section-name. Вы должны сделать это , но если маршрутизатор вашего приложения не может обрабатывать фрагменты URL-адресов, я бы вообще не обновлял URL-адрес и заменял его на кнопку.

На этом этапе я бы использовал некоторые визуальные скрытый текст внутри кнопки, поясняющий, что при этом выполняется прокрутка к разделу на текущей странице.

Пример ниже иллюстрирует это. Пожалуйста, используйте класс CSS ниже, чтобы визуально скрыть текст , поскольку он имеет лучшую совместимость, чем bootstrap sr-only класс, как объяснено в этом ответе, который я дал . 

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<button><span class="visually-hidden">Go To </span>Section name<span class="visually-hidden"> on this page</span></button>

Коротко о плавной прокрутке

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

Один из способов сделать это - использовать CSS медиа-запрос prefers-reduced-motion.

Заключительные мысли

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

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

Последний совет - если вы все же меняете страницу в SPA, сделайте <h1> на ne xt, программно настраиваемая с помощью tabindex="-1" и фокусируемая после загрузки страницы. Это отличный способ сообщить пользователям с ограниченным зрением, что навигация в SPA завершена, используя AJAX.

...