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

Captivate обладает всеми функциями, необходимыми для реализации такого рода взаимодействий с помощью расширенных взаимодействий, но процесс, используемый для создания всплывающего окна и управления им, может быть громоздким и ненадежным. В качестве альтернативы мы разработали диспетчер всплывающих окон JavaScript, который упрощает процесс отображения и управления состоянием с учетом определенных соглашений об именах фигур. Наш менеджер всплывающих окон также решает ключевую проблему навигации для слабовидящих, которая обсуждается в конце статьи.

Полная версия исходного кода Captivate 10 и опубликованная версия доступны здесь.

Создание всплывающего окна: соглашения об именах

Временная шкала Captivate дает очень компактный способ описания всех элементов на странице.

  • Кнопки названы так, чтобы упростить порядок вкладок (обсуждается позже).
  • Всем элементам, связанным с всплывающим окном, присваиваются идентификаторы, начинающиеся с префикса, идентифицирующего конкретное взаимодействие, в данном случае «животное». Элементы, которые являются частью всплывающего окна, сначала скрыты, что делается для каждого элемента на вкладке свойств, щелкая глаз рядом с именем элемента, чтобы добавить красную зачеркивание:

Менеджер всплывающих окон

Наш менеджер всплывающих окон добавляется на слайд с помощью функции «при входе выполнить Javascript». Код приведен ниже:

var currentButton
function popupManager(popupID, stateName) {
console.log(popupID, stateName);
let clearMarker = (stateName == "clear") || 
                  (stateName == "close") || 
                  (stateName == "hide")
if (!clearMarker) {
  currentButton = document.activeElement
 }
// get elements
popupElements = $("[id^='" + popupID + "'].cp-frameset").map(function (i, j) {
   return j.id
  }).get();
// hide all popup elements to start
for (element in popupElements) {
  elemID = popupElements[element]
   cp.hide(elemID);
 };
// set popup state
 if (clearMarker) {
  currentButton.focus()
  return;
 }
for (element in popupElements) {
  elemID = popupElements[element]
  cp.changeState(elemID, stateName);
  cp.show(elemID);
 };
$("[id^='" + popupID + "_Text']").focus()
}

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

function(popup_ID, desired_state)

где popup_ID — это префикс, используемый для идентификатора каждого всплывающего элемента (в данном случае «животное»), а «желаемое_состояние» — это имя состояния, которое вы использовали при создании визуальных состояний каждого элемента.

Менеджер всплывающих окон выполняет следующие действия:

  • Показать все элементы, связанные с всплывающим окном
  • Установить состояние элемента
  • Установите фокус на элемент всплывающего окна, обозначенный как «Текст» (обсуждается позже)

При вызове с «скрыть», «закрыть» или «очистить» в качестве желаемого состояния:

  • Закройте всплывающее окно и снова установите фокус на кнопку, которая инициировала взаимодействие (обсуждается позже).

Открытие всплывающего окна

Кнопки используют следующий JavaScript для открытия всплывающего окна:

popupManager("animal","dog")

где «животное» — это префикс формы всплывающего окна, как показано на временной шкале, а «собака» — желаемое состояние фигур во всплывающем окне. Это добавлено к кнопке как действие «в случае успеха выполнить Javascript». Обычно мы отключаем опцию «продолжить воспроизведение проекта» на наших кнопках.

Настройка форм всплывающих окон

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

После создания этих фигур они скрываются и блокируются.

У двух фигур есть визуальные состояния: фигуры «animal_Text» и «animal_image». Мы называем состояния так, чтобы изображение собаки и текст, связанный с собакой, имели одно и то же имя состояния (гм, «собака»).

Любая фигура с префиксом имени всплывающего окна и назначенным именем состояния будет установлена ​​перед отображением.

Две другие формы, animal_exit и animal_grey, позволят учащемуся закрыть всплывающее окно. Оба они являются умными формами, которые настроены как кнопки.

  • Фигура animal_grey на самом деле представляет собой просто черный прямоугольник, покрывающий весь экран. Он установлен с непрозрачностью 70%, чтобы создать эффект прозрачности серого. Поскольку это тоже кнопка, она изначально создается с другими состояниями, «Перевернутый» и «Вниз». Мы установили эти состояния так, чтобы они имели то же изображение, что и нормальное состояние: черный цвет с непрозрачностью 70%. Он также настроен для отображения за другими элементами во всплывающем окне.
  • Фигура animal_exit всегда отображается поверх всех остальных элементов. Вы можете разместить его в любом месте на странице, но требуется иметь такую ​​форму, чтобы удовлетворить наши потребности в специальных возможностях 508 (обсуждается ниже).

Обе эти фигуры используют следующий JavaScript для закрытия всплывающего окна, добавленного под действием «в случае успеха, выполнить JavaScript»:

popupManager("animals","hide")

В обоих случаях отключаем опцию «продолжить воспроизведение проекта».

Использование Javascript и менеджера всплывающих окон дает большую гибкость при разработке всплывающих окон. Добавить дополнительные элементы во всплывающее окно и добавить/удалить дополнительные кнопки очень просто. Все взаимодействия с всплывающими окнами могут быть скопированы с несколькими изменениями префиксов.

Доступность и соответствие 508

Разработка курсов, доступных для людей с ограниченными возможностями, — сложная тема, и ее полное объяснение выходит за рамки этой статьи. Основные потребности людей с нарушениями зрения включают в себя возможность использовать программу чтения с экрана, чтобы понять, что находится на странице, и рациональную структуру страницы, чтобы можно было использовать навигацию с помощью клавиатуры для перехода между элементами. на странице.

Как вы можете себе представить, всплывающие окна представляют собой настоящую проблему, когда дело доходит до навигации с помощью клавиатуры, поскольку существует естественная концепция навигации по кнопкам в меню, но переход к всплывающему окну и обратно не является «линейным» и не имеет встроенной функции. поддержки в Captivate для этой возможности.

Существует набор интернет-стандартов, которые были разработаны, чтобы помочь программам чтения с экрана справиться с этими понятиями, и называются стандартами «ARIA». Однако Captivate не поддерживает их, и нет простого способа постобработки опубликованного файла captivate для интеграции тегов ARIA.

Мы решили проблему соответствия 508 во всплывающих окнах, контролируя «фокус». Один элемент во всплывающем окне имеет специальное обозначение «Текст». Когда всплывающее окно открывается, фокус браузера смещается на этот элемент. После этого программы чтения с экрана прочитают текст внутри этого элемента.

Элемент Text обозначается путем создания формы с префиксом всплывающего окна, за которым следуют символы «_Text». В приведенном выше случае форма — «animal_Text». Если по каким-то причинам в конец этого идентификатора добавляются дополнительные символы, не беда. Мы склонны избегать использования текстовых элементов подписи, так как мы обнаружили, что программы чтения с экрана имеют с ними проблемы. Смартфигуры с текстом работают лучше всего

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

Здание для 508

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

  • Порядок табуляции. После создания кнопок необходимо выбрать всю страницу и установить порядок табуляции для кнопок. Присвоение названий кнопкам делает это намного проще!

  • Текст специальных возможностей кнопки "Выход".Кнопка выхода во всплывающем окне обычно представляет собой просто символ, например "X". Текст специальных возможностей будет прочитан, когда фигура находится в фокусе. Используется что-то вроде «Вернуться к списку».

Проверка соответствия доступности

Для тех, кто не очень часто занимается проектами с поддержкой специальных возможностей, можно получить относительно хорошую оценку базового соответствия порядку табуляции и доступности текста для специальных возможностей, используя только Microsoft Windows 10. Встроенный браузер Microsoft «Edge» на самом деле отлично отображает информацию о фокусе вкладок, а встроенное средство чтения с экрана Microsoft «Рассказчик» можно использовать для проверки страниц в Edge на предмет доступности текста.

Дополнительные сведения о экранном дикторе см.

Использование экранного диктора проще, чем вы думаете. Наиболее важные команды:

  • ctrl-win-enter запуск и остановка рассказчика
  • Caps Lock + F1 помощь диктору
  • Caps Lock + клавиши со стрелками влево/вправоперемещение между элементами и чтение

В Edge текущее местоположение вкладки будет отображаться пунктирными линиями вокруг элемента.