Предотвращение перехода по ссылке через адресную строку

Question

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

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

Answer 1

Вы можете управлять порядком табуляции (и какие элементы должны быть в состоянии получить фокус) с глобальным tabindex attribute.

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

Для такого прецедента (злого!) Вам нужно будет найти ловушки для клавиатуры.

WCAG 2.0 имеет следующие рекомендации: 2.1.2 No Keyboard Trap. В Understanding SC 2.1.2 вы можете найти «Методы и провалы» для этого руководства:

• F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type
• FLASH17: Providing keyboard access to a Flash object and avoiding a keyboard trap
• G21: Ensuring that users are not trapped in content

Так может быть, вы получите некоторые идеи, которые, как такая ловушка будет возможно ,

Answer 2

Вы можете использовать Javascript и захватить событие «keydown» на элементе с самым высоким «tabindex». Если пользователь нажимает клавишу «TAB» (event.keyCode == 9) без клавиши «Shift» (event.shiftKey == false), просто установите фокус на элемент с самым низким tabindex.

Вам также понадобится сделать то же самое в обратном порядке для элемента с самым низким tabindex. Захватите событие «keydown» для этого элемента. Если пользователь нажимает клавишу «TAB» (event.keyCode == 9) С помощью клавиши «Shift» (event.shiftKey == true), то установите фокус на элемент с самым высоким табуиндексом.

Это эффективно предотвратит фокусировку адресной строки с помощью клавиши TAB. Я использую эту технику в своем текущем проекте.

Не забудьте отменить событие keydown, если нажата правильная комбинация клавиш! С JQuery это «event.preventDefault()». В стандартном Javascript я считаю, что вы просто «возвращаете ложь».

Вот JQuery нагруженные фрагмент кода я использую ...

$('#dos-area [tabindex=' + maxTabIndex + ']').on('keydown', function (e) { 
     if (e.keyCode == 9 && e.shiftKey == false) { 
      e.preventDefault(); 
      $('#dos-area [tabindex=1]').focus(); 
     } 
    }); 
    $('#dos-area [tabindex=1]').on('keydown', function (e) { 
     if (e.keyCode == 9 && e.shiftKey == true) { 
      e.preventDefault(); 
      $('#dos-area [tabindex=' + maxTabIndex + ']').focus(); 
     } 
    }); 

Также имейте в виду, что установка TabIndex = 0 имеет нежелательные результаты на порядок, в котором вещи сосредоточены. Я всегда помню (для моих целей), что tabindex - это индекс на основе 1.

Answer 3

Я использовал для добавления двух крошечных невидимых элементов на tabindex 1 и на последнем tabindex. Добавьте onFocus для этих двух элементов: Элемент с tabindex 1 должен сфокусировать последний действительный элемент, тот, у которого max tabindex должен сфокусировать первый реальный элемент. Убедитесь, что вы сосредоточили первый реальный элемент на Dom: загружен.

Answer 4

Я использовал m-albert решение, и оно работает.Но в моем случае я не контролирую свойства tabindex. Мое намерение сосредоточено на панели инструментов в верхней части страницы (первый элемент управления), когда пользователь покидает последний элемент управления на странице.

$(':input:visible').last().on('keydown', function (e) { 
    if (e.keyCode == 9 && e.shiftKey == false) { 
     e.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: 0 
     }, 500); 
     $(':input:visible', context).first().focus(); 
    } 
}); 

Где контекст может быть любой Jquery объекта, селектор, или даже документ, или вы можете опустить его.

Прокрутка анимации, конечно, не является обязательной.

Answer 5

Вот общая реализация jquery, где вам не нужно найти индекс максимальной вкладки. Обратите внимание, что этот код также будет работать, если вы добавите или удалите элементы в DOM.

$('body').on('keydown', function (e) { 
    var jqTarget = $(e.target); 
    if (e.keyCode == 9) { 

     var jqVisibleInputs = $(':input:visible'); 
     var jqFirst = jqVisibleInputs.first(); 
     var jqLast = jqVisibleInputs.last(); 

     if (!e.shiftKey && jqTarget.is(jqLast)) { 
      e.preventDefault(); 
      jqFirst.focus(); 
     } else if (e.shiftKey && jqTarget.is(jqFirst)) { 
      e.preventDefault(); 
      jqLast.focus(); 
     } 
    } 
}); 

Однако, вы должны отметить, что приведенный выше код будет работать только с видимыми входами. Некоторые элементы могут стать активным элементом документа, даже если они не введены, поэтому, если это ваш случай, вы должны рассмотреть возможность добавления их в селектор $(':input:visible').

Я не добавлял кода для прокрутки в фокусе элемент, как это не может быть разыскиваемым поведением для всех ... если вам это нужно, просто добавьте его после вызова focus()