Я добавляю на сайт подокно с поддержкой 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), программа чтения с экрана с радостью пропускает быстрые ссылки, когда ссылка запускается, и возвращается к основному документу.когда срабатывает ссылка закрытия быстрых ссылок.
Она также прокручивает страницу вверх и вниз в ответ на фрагменты документа, что уродливо и раздражает.Это можно подавить с помощью window.preventDefault() - см. Контрольный пример 2, который работает очень плавно и не прокручивает документ, таким образом:
$("#quicklinks-trigger").click(function(e){
$("#shadow").removeClass("default");
$("#shadow").addClass("active");
e.preventDefault ();});
К сожалению, вызов метода warnDefault () также не позволяет браузеру перемещать курсор в нужное место.Слепой пользователь может вызвать ссылку там, и тогда программа чтения с экрана перейдет к следующему элементу в порядке исходного кода, а не к интерфейсу быстрых ссылок.Самый простой способ исправить это - поместить HTML-код, определяющий подокно быстрых ссылок, сразу после ссылки триггера;но я не могу этого сделать, потому что CMS, для которой он предназначен, не очень хорошо играет с большими блоками HTML, вставленными в меню.
Я пробовал некоторые другие подходы к устранению прокрутки.Тестовый пример 3 прокручивает окно назад вручную:
$("#quicklinks-trigger").click(function(e){
$("#shadow").removeClass("default");
$("#shadow").addClass("active");
window.setTimeout(function(){ scrollTo(0,0); }, 1);
});
..., который работает, но имеет явно дергающийся эффект, потому что прокручивает вниз, а затем назад, так что это не лучше, чем тестовый пример 1.
В контрольном примере 4 я пытался использовать warnDefault () в сочетании с focus () в надежде вручную переместить внутренний курсор:
$("#quicklinks-trigger").click(function(e){
$("#shadow").removeClass("default");
$("#shadow").addClass("active");
$("#quicklinks").focus();
e.preventDefault();
});
Но это не сработало, потому что #quicklinksDIV, а не фокусируемый элемент.Полагаю, я мог бы добавить скрытый фокусируемый элемент в 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.Я понятия не имею, как это будет развиваться в других комбинациях браузера и программы чтения с экрана.
Предложения?