На заре тысячелетия слепой джентльмен успешно подал в суд на Сиднейский организационный комитет Олимпийских игр, поскольку они не смогли сделать официальный сайт Олимпийских игр адекватно доступным для слепых пользователей. За прошедшие годы появилось много таких случаев, и в разных странах были приняты многочисленные акты, которые обязывают вас сделать свой веб-сайт адекватно доступным.
Сегодня многие библиотеки JavaScript предоставляют различные виджеты, такие как слайдеры и строки меню, но разработчики часто предпочитают игнорировать специальные возможности. Одним из таких примеров является виджет jQuery Accordion. Аккордеон — это полезный виджет, который решает проблему представления контента в области с ограниченным пространством.
Проблема
Используя jQuery 1.9.1, jQuery UI 1.10.4 и Chrome 32, невозможно перемещаться по заголовкам аккордеона. Однако, как только аккордеон активен, вы можете использовать клавиши со стрелками вверх и вниз для навигации по заголовкам и нажать клавишу ввода, чтобы свернуть один (который сам по себе не является интуитивно понятным). Во-вторых, программа чтения с экрана (в данном случае NVDA) не может прочитать то, что находится в незакрепленной области.
Во время Google Summer of Code 2013 я работал над проектом ATutor Института инклюзивного дизайна. ATutor — это система управления учебным контентом с открытым исходным кодом, которая полностью соответствует спецификациям доступности. У нас была серьезная проблема — данные на странице курсов. Обычно в нем перечислены все курсы и соответствующая им информация, что затрудняет навигацию тех, кто использует вспомогательные технологии (АТ). Решением был аккордеон, но тот, который отвечал высоким стандартам доступности, установленным ATutor.
Аккордеон
Мой наставник по проекту, Алексей Новак, разработал нечто подобное для AContent, системы создания контента, используемой для создания обучающего контента в Интернете. Затем была разработана отдельная версия с открытым исходным кодом, чтобы ее можно было использовать в проекте ATutor, а также в любом другом проекте.
У проекта были две основные цели: пользователи, имеющие только клавиатуру, должны иметь возможность относительно легко перемещаться по виджету, а программы чтения с экрана должны иметь возможность считывать весь контент в виджете.
В текущей версии вы можете перемещаться по всему виджету, используя только клавиатуру, а программа чтения с экрана также считывает содержимое. Если вы используете панель поиска, заголовок изменяется динамически, что заставляет программу чтения с экрана прочитать ее, чтобы сообщить вам о количестве результатов вашего поиска.
Быстрый старт
Проект размещен на GitHub, и вы можете скачать исходный код . Существует также демонстрационная версия, которую вы можете просмотреть перед загрузкой. Обратите внимание, что вам нужно будет включить dist/css/a11yAccordion.css CSS ( dist/css/a11yAccordion.css ) и JavaScript ( dist/js/a11yAccordion-0.2.2.min.js ). Кроме того, вы можете скомпилировать его с помощью grunt.
Разметка для примера аккордеона показана ниже.
<ul class="a11yAccordion" id="Accordion1"> <li class="a11yAccordionItem"> <div class="a11yAccordionItemHeader"> <strong>Random Months</strong> </div> <div class="a11yAccordionHideArea"> <ul> <li>January</li> <li>June</li> <li>February</li> <li>November</li> </ul> </div> </li> <li class="a11yAccordionItem"> <div class="a11yAccordionItemHeader"> <strong>Dummy Text</strong> </div> <div class="a11yAccordionHideArea"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </li> <li class="a11yAccordionItem"> <div class="a11yAccordionItemHeader"> <strong>Header with image</strong> </div> <div class="a11yAccordionHideArea"> <img src="https://www.google.co.in/images/srpr/logo11w.png" alt="Google Logo"> </div> </li> </ul>
Код JavaScript, необходимый для управления ранее определенным аккордеоном, показан ниже.
var myAccordion = a11yAccordion({ parentSelector: '#Accordion1' });
Результирующий аккордеон показан на следующем рисунке.
Использование виджета
Последнюю версию a11yAccordion можно найти на GitHub. Для начала клонируйте репозиторий или загрузите его в виде zip-файла. Поскольку виджет построен на jQuery 1.10 0, вам нужно будет включить jQuery до его запуска.
Как вы уже видели, объект параметров передается в конструктор JavaScript аккордеона. a11yAccordion поддерживает следующие параметры.
-
parentSelector— Селектор для родительского контейнера, который имеет разметку аккордеона. По умолчанию это значениеundefined. -
accordionItemSelector— Селектор для строк, которые содержат заголовки и скрытые области. По умолчанию это.a11yAccordionItem. -
headerSelector— Селектор для заголовка в строке. По умолчанию это.a11yAccordionItemHeader. -
hiddenAreaSelector— Селектор для скрытых областей в строке аккордеона. По умолчанию.a11yAccordionHideArea. -
visibleAreaClass— класс, который добавляется к каждой строке, которая не будет свернута / видима для пользователя. По умолчанию.visibleA11yAccordionItem. -
colorScheme— цветовая схема для аккордеона. По умолчанию.light. -
speed— скорость анимации в миллисекундах. По умолчанию 300. -
hiddenLinkDescription— описание для каждой ссылки «Показать / Скрыть», предоставляемой пользователям, использующим вспомогательные технологии. -
showSearch— логическая опция, которая сообщит аккордеону о необходимости отображения параметров поиска. -
showOne— логическое значение, которое определяет, может ли аккордеон открывать пользователю только одну строку за раз. -
overallSearch— логическая опция, котораяoverallSearchпоиск искать не только в заголовках, но и в свернутых областях.
API
A11yAccordion также поставляется с JavaScript API, который позволяет осуществлять программные манипуляции. Функции API описаны ниже.
-
collapseRow(rowIndex)— эта функция скрывает скрытую область под строкой с соответствующимrowIndex. -
uncollapseRow(rowIndex)— эта функция показывает скрытую область под строкой с соответствующимrowIndex. -
toggleRow(rowIndex)— эта функция переключает состояние строки между свернутым и не свернутым. -
getRowEl(rowIndex)— эта функция возвращает элемент строки jQuery с соответствующимrowIndex. -
showOne— это логическое значение, показывающее пользователю только одну не свернутую строку за раз.
Будущее
Хотя мы и прошли довольно долгий путь от простого аккордеона, еще многое предстоит сделать. Страница вопросов отслеживает наши ближайшие планы. Чтобы назвать один, мы планируем добавить функцию, которая помогает в программном отключении строк.
Вклад в проект
У этого проекта большой потенциал, но он нуждается в помощи разработчиков и дизайнеров. Форк и клонировать репозиторий GitHub, чтобы внести свой вклад. Разработчики должны установить Grunt и запустить npm install для локальной настройки системы. Дизайнеры также могут напрямую добавлять темы в файл LESS.