preventDefault (), прокрутка и доступность

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

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

<a href="#quicklinks" id="quicklinks-trigger">Quick Links</a>

С соответствующим JavaScript (с использованием jQuery):

$("#quicklinks-trigger").click(function(e){ 
 $("#shadow").removeClass("default");
 $("#shadow").addClass("active");
});

#Quicklinks HREF перенаправляет внутренний курсор (также известный как каретка) программ чтения с экрана в начало недавно открытого пользовательского интерфейса. В подокне быстрых ссылок есть соответствующая ссылка, которая перенаправляет курсор обратно в основную часть документа (<a href="#main" id="close-quicklinks"></a>). Вы можете увидеть это в действии с помощью тестового примера 1. Если вы слушаете его с помощью программы чтения с экрана (я тестирую с помощью NVDA), программа чтения с экрана с радостью переходит к быстрым ссылкам при переходе по ссылке и обратно к основному документу. при срабатывании закрывающей ссылки Quick Links.

Он также прокручивает страницу вверх и вниз в ответ на фрагменты документа, что некрасиво и раздражает. Это можно подавить с помощью window.preventDefault() - см. Тестовый пример 2, который работает очень плавно и не прокручивает документ, таким образом:

$("#quicklinks-trigger").click(function(e){ 
 $("#shadow").removeClass("default");
 $("#shadow").addClass("active");

e.preventDefault (); });

К сожалению, вызов preventDefault () также не позволяет браузеру переместить курсор в нужное место. Слепой пользователь может активировать ссылку там, а затем программа чтения с экрана перейдет к следующему элементу в порядке исходного кода, а не к пользовательскому интерфейсу быстрых ссылок. Самый простой способ исправить это - поместить HTML-код, определяющий подокно быстрых ссылок, сразу после ссылки триггера; но я не могу этого сделать, потому что CMS, для которой это предназначено, плохо справляется с большими блоками HTML, вставленными в меню.

Я пробовал другие способы устранения прокрутки. Тестовый пример 3 прокручивает окно назад вручную:

$("#quicklinks-trigger").click(function(e){ 
 $("#shadow").removeClass("default");
 $("#shadow").addClass("active");
 window.setTimeout(function(){ scrollTo(0,0); }, 1); 
});

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

В тестовом примере 4 я попытался использовать preventDefault () в сочетании с focus () в надежде переместить внутренний курсор вручную:

$("#quicklinks-trigger").click(function(e){ 
 $("#shadow").removeClass("default");
 $("#shadow").addClass("active");
 $("#quicklinks").focus();
 e.preventDefault();
});

Но это не сработало, потому что #quicklinks - это DIV, а не элемент, на который можно сфокусироваться. Я полагаю, что мог бы добавить скрытый фокусируемый элемент в HTML-код быстрых ссылок, но это было бы непонятно.

В тестовом примере 5 я попытался удалить атрибут ID из целевого элемента, переписав идентификатор фрагмента с помощью события onhashchange, а затем восстановив идентификатор:

function cfl_hash(fragment){
 // Get the section the fragment refers to.
 var target = $(fragment);

 // Save its current ID.
 var id = target.attr("id");

 // Remove the ID so the browser won't scroll.
 target.attr("id","");

 // Rewrite the hash to the desired fragment, only if onhashchange event supported.
 if("onhashchange" in window){ location.hash = fragment; }

 // Put the ID back in place.
 target.attr("id", id);
}

$("#quicklinks-trigger").click(function(e){ 
 $("#shadow").removeClass("default");
 $("#shadow").addClass("active");
 cfl_hash("#quicklinks");
});

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

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

Пока я тестировал только Firefox и NVDA. Я понятия не имею, как это повлияет на другие комбинации браузера и программы чтения с экрана.

Предложения?