Доступность раскрывающегося меню JavaScript - PullRequest
Новая
       30

Доступность раскрывающегося меню JavaScript

0 голосов
/ 30 марта 2011

Я реализовал собственное выпадающее меню и хотел уточнить значение доступности моего решения:

http://jsfiddle.net/tpHcv/5/

Интересующий меня фрагмент кода: 

$('#sub-nav > li ul').each(function(index){

    var $this = $(this),
        index = index + 1;

    $this    
    .clone()
    .appendTo('#main-nav > li:eq(' + index + ')');

});

«sub-nav» скрывается от всех с помощью CSS для запуска. Затем он добавляется в соответствующий «main-nav» li. Помешает ли этот подход людям, использующим вспомогательные технологии, попасть в пункты подменю?

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

1 Ответ

1 голос
/ 30 марта 2011

Для большей доступности рассмотрите возможность добавления поддержки клавиатуры.Когда ссылка имеет фокус (через вкладку или что-то еще), убедитесь, что ее субнав виден.Точно так же, когда ссылка subnav имеет фокус, убедитесь, что она видна.Кое-что из этого вы можете сделать с помощью css через :focus.

К сожалению, у вас нет доступа к разметке.Есть ли причина, по которой вам нужно клонировать <ul>, или можно просто переместить исходный элемент?Делайте ваши дом манипуляции со сценарием, но делайте показ / скрывайте с помощью css через :hover псевдокласс.

Это поможет вам в этом: http://jsfiddle.net/tpHcv/9/ Вам все равно понадобитсянемного JavaScript для управления вкладками и фокусировки на подпунктах. 

#main-nav li > ul
{
    display: none;
}

#main-nav > li a:focus + ul,
#main-nav > li:hover > ul
{
    display:block;
}

Будут ли ваши ссылки #main-nav перемещаться куда-либо или они предназначены только для запуска суб-навигации?Если они никуда не денутся, чтобы поддержать браузеры с отключенным JavaScript, попробуйте сначала скрыть #main-nav с помощью css, а затем показать его с помощью JavaScript.Таким образом, он не будет отображаться, если ссылки на самом деле что-то не сделают.

...