как сделать это приложение javascript доступным? - PullRequest
1 голос
/ 24 мая 2011

Я создаю FTP-клиент, который во многом будет зависеть от JavaScript.

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

Будет ли лучший способ сделать каждое имя файла привязкой, которая получит фокус при выборе имени файла? А также, где я могу найти хорошее руководство по доступности веб-приложений? Я знаю, что в W3C есть контрольный список для определения доступности контента, но большинство пунктов там не относятся к веб-приложениям.

Ответы [ 5 ]

1 голос
/ 19 июня 2011

При просмотре файлов вы можете перемещаться с помощью клавиш со стрелками.

Основываясь на предыдущем ответе, который игнорировал эту функцию, оберните весь виджет в div с ролью = приложение,Это уведомляет программу чтения с экрана, что JavaScript будет использоваться, и позволит пользователю перемещаться по виджету с помощью клавиш со стрелками при использовании программы чтения с экрана.Выдержка ниже подробно описывает, как сделать виджет доступным.Да, это не самое простое решение, но оно наиболее полное.Сделайте ваш выбор.

Описание: виджет, который позволяет пользователю выбирать один или несколько элементов из списка вариантов.(listbox).Взаимодействие с клавиатурой:
  • Вкладка : Когда вкладка со списком, выберите первый элемент, если больше ничего не выбрано.Вторая вкладка выведет пользователя из виджета на следующую остановку на странице.
  • Стрелки вверх / вниз позволяют перемещаться вверх и вниз по списку.
  • Shift + стрелка вверх и Shift + стрелка вниз перемещать и расширять выделение.
  • Ввод буквы или нескольких букв для навигации (одна и та же буква относится к каждому элементу, начиная с этого, разные буквы переходят к первому элементу, начиная с этой всей строки).
  • Shift + F10 : если с текущим элементом связано контекстное меню, эта комбинация клавиш вызовет это меню.
  • Выбор
    • Флажок - Пробел переключает флажки, если элементы списка можно проверять
    • Выбираемые элементы списка
      • Пробел действует как переключатель для выбора и отмены выбора текущего элемента.Если предыдущие элементы были выбраны, он также отменяет их выбор и выбирает текущий элемент.
      • Shift + Пробел выбирает смежные элементы от последнего выбранного элемента до текущего элемента.
      • Ctrl + Arrow перемещается без выбора.
      • Ctrl + Пробел выделяет несмежные элементы и добавляет текущий выбранный элемент ко всем ранее выбранным элементам.
      • Ctrl + A - Рекомендуется использовать флажок, ссылку или другой метод для выбора всех.Клавиша Ctrl + A может использоваться для предоставления сочетания клавиш.
Рекомендуется, чтобы разработчик использовал различные стили для выбора, когдасписок не сфокусирован (подсказка: неактивный выбор часто отображается с более светлым цветом фона). WAI-ARIA Роли, состояния и свойства:
  • Контейнер списка имеет роль listbox.
  • Каждая запись в списке должна иметь роль option и должнабыть потомками DOM listbox.
  • Если не является потомком DOM списка, на него следует ссылаться в списке aria-owns.
  • Если все элементы списка не являютсяDOM потомков списка, затем установите их aria-setsize и aria-posinset соответственно;в противном случае, эта информация не может быть вычислена для контекста пользовательским агентом.
  • Если список не является частью другого виджета, то он должен иметь видимый aria-label, на который ссылается список в aria-labelledby.
  • Каждый выбранный элемент списка должен иметь aria-selected = "true".

Примеры:

Одиночный список выбора

Список в iframe

См. методы авторизации для доступных виджетов для примеров и дополнительной информации.

1 голос
/ 24 мая 2011

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

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

Некоторые релевантные ссылки:

Есть несколько книгна доступность, которые, как правило, устаревают довольно быстро.К сожалению, я не в курсе каких-либо обсуждений ARIA на всю книгу - она ​​все еще находится в разработке.Попробуйте прочитать спецификации.

Последнее, но не менее важное: найдите программу чтения с экрана и научитесь ее использовать.Формальное соответствие стандартам доступности - это здорово, но ничто не сравнится с реальным тестированием.NVDA - это бесплатная полнофункциональная программа для чтения с экрана, которая поддерживает ARIA: http://nvda -project.org /

Надеюсь, это поможет.

1 голос
/ 24 мая 2011

Я бы предложил вам использовать инфраструктуру javascript, чтобы помочь с доступностью в сочетании с WAI-ARIA Примеры доступных jQuery см. https://github.com/fnagel/jQuery-Accessible-RIA/wiki и примеры доступных перетаскиваний с помощью WAIАрия см http://dev.opera.com/articles/view/accessible-drag-and-drop/

1 голос
/ 24 мая 2011

Самый простой способ сделать это, возможно, иметь ряд флажков, каждый из которых имеет уникальный идентификатор, в сочетании с меткой:

<input id="chk01" type="checkbox"/><label for="chk01">File1.txt</label>

Используя эту технику, ввод выполняет работу по выявлению выбранного вами объекта, в то время как метка заботится о том, чтобы связать его с именем: когда фокус переходит к флажку, программа чтения с экрана автоматически считывает ассоциированную метку. текст. Это все обычный HTML, ничего особенного не требуется. Вы можете, конечно, добавить к этому выделение цветом - если вы синхронизируете его с состоянием флажка.

Может быть возможно сделать что-то похожее с тегами A; вы можете использовать WAI-ARIA свойства, чтобы установить role = "listitem" и aria-selected = "true" / "false" в зависимости от ситуации для элементов, с role = "list" в родительском контейнере. Затем программа чтения с экрана будет читать их как элементы списка, а не как ссылки. Однако этот метод более сложен, и его действительно нужно протестировать с помощью программы чтения с экрана (например, JAWS или свободно доступной NVDA), чтобы убедиться, что она работает.

0 голосов
/ 24 мая 2011

Насколько я понимаю, YUI имеет большой объем поддержки ARIA.

См .:

http://developer.yahoo.com/yui/theater/video.php?v=kloots-yuiconf2009-a11y

Убедитесь, что ваше решение соответствует ARIA:

http://www.w3.org/WAI/intro/aria.php

HTH

...