Я добавляю под-окно под JavaScript на сайт. В основном часть пользовательского интерфейса располагается слева от экрана, пока пользователь не активирует ссылку; то он перемещается в видимую позицию. У меня есть серия из пяти test cases, но у меня нет точек репутации, чтобы связать их по-отдельности.preventDefault(), прокрутка и доступность
В целях доступности, я хочу использовать ссылку, содержащую фрагмент документа, таким образом:
<a href="#quicklinks" id="quicklinks-trigger">Quick Links</a>
с соответствующими JavaScript (с помощью JQuery):
$("#quicklinks-trigger").click(function(e){
$("#shadow").removeClass("default");
$("#shadow").addClass("active");
});
The #quicklinks HREF перенаправляет внутренний курсор (ака-карет) экранных считывателей к началу недавно обнаруженного пользовательского интерфейса. В вспомогательном окне Quick Links есть соответствующая ссылка, которая перенаправляет курсор обратно в основную часть документа (<a href="#main" id="close-quicklinks"></a>). Вы можете увидеть это в действии с тестовым примером 1. Если вы слушаете его с помощью программы чтения с экрана (я тестирую NVDA), программа чтения с экрана с радостью переходит к быстрым ссылкам при активации ссылки и обратно к основному документу когда активируется ссылка закрытия ссылок.
Он также прокручивает страницу вверх и вниз в ответ на фрагменты документа, что является уродливым и раздражающим. Это может быть подавлено с помощью window.preventDefault() - см Test Case 2, который работает очень плавно и не прокручивается вокруг документа, таким образом:
$("#quicklinks-trigger").click(function(e){
$("#shadow").removeClass("default");
$("#shadow").addClass("active");
e.preventDefault(); });
К сожалению, вызов функции preventDefault() также не позволяет браузеру перемещать курсор в нужное место. Слепой пользователь может вызвать ссылку там, а затем программа чтения с экрана перейдет к следующему элементу в порядке исходного кода, а не к пользовательскому интерфейсу Quick Links. Самый простой способ исправить это означает, чтобы HTML определял под-окно Quick Links сразу после триггерной ссылки; но я не могу этого сделать, потому что CMS, для которого это предназначено, не играет хорошо с большими блоками HTML, вставленными в меню.
Я пробовал некоторые другие подходы к устранению прокрутки. Контрольный пример 3 прокручивает окно обратно вручную:
$("#quicklinks-trigger").click(function(e){
$("#shadow").removeClass("default");
$("#shadow").addClass("active");
window.setTimeout(function(){ scrollTo(0,0); }, 1);
});
... который работает, но имеет явно прерывистый эффект, потому что она прокручивается вниз, а затем обратно вверх, так что не лучше, чем тест 1.
В Контрольный пример 4, я попытался с помощью preventDefault() в сочетании с акцентом() в надежде перемещения внутреннего курсора вручную:
$("#quicklinks-trigger").click(function(e){
$("#shadow").removeClass("default");
$("#shadow").addClass("active");
$("#quicklinks").focus();
e.preventDefault();
});
Но это не сработало, потому что #quicklinks является DIV, не фокусируемым элемент. Я полагаю, что я мог бы добавить скрытый элемент в HTML Quick Links, но это было бы kludgy.
В тестовом примере 5, я попытался удалить атрибут ID из целевого элемента, перезапись идентификатора фрагмента с событием onhashchange, а затем восстановлением ID:
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. Я понятия не имею, как это будет играть в других комбинациях браузера и устройства чтения с экрана.
Предложения?