Доступность и все эти фреймворки
Я исследовал несколько фреймворков JavaScript, таких как Backbone.Джей-ЭС и Бэтмен.js на некоторое время, и пока я действительно люблю их, у меня есть одна мелочь, к которой я продолжаю возвращаться. Эта проблема-доступность.
Как веб-разработчик я всегда старался делать свои веб-сайты и приложения с учетом доступности, особенно используя идею прогрессивного улучшения.
явно из коробки эти новые рамки JS не изящно деградируют, поэтому я было интересно, что другие разработчики думают по этому вопросу и что вы делаете по этому поводу. В конце концов, доступность веб-сайта / приложения на самом деле не является необязательной вещью, поскольку это часть закона во многих странах.
может быть, я просто слишком усердствую в этом вопросе, и не понимаю, как далеко все зашло с точки зрения доступности.
4 ответа:
Я использую JS-фреймворк (позвоночнике.js в моем случае) на моем последнем сайте. Тем не менее я уверен, что браузеры, отличные от JS (конечно, не слишком усердные: подумайте SEO), могут перемещаться по моему сайту и переваривать содержимое.
в качестве примера я собираюсь с поисковой страницы с показом продуктов. Продукты могут быть выгружены, отфильтрованы, отсортированы. Конечно, это пример обобщенной идеи.
PREREQ: используйте шаблонный движок, который может отображать как серверную, так и клиентскую сторону. (Я использую усы). Это гарантирует, что вы можете визуализировать модели без JS - через серверные шаблоны и визуализировать модели с js через клиентские шаблоны.
изначально: визуализация продуктов с использованием шаблона усов на стороне сервера. Также включите 'bootstrapJSON' - объект, который содержит те же продукты в JSON-формате.
изначально: все ссылки (страница сведений о продукте, подкачка, сортировка, фильтрация) являются реальными URL-адресами на стороне сервера (без URL-адресов hashbang)
конечным результатом является страница, которая может быть перемещена на 100% с помощью подкачки, сортировки, фильтрации без использования JS.
все подкачки,сортировка, фильтрация URL-адресов приводят к запросу на сервер, что, в свою очередь, приводит к новому набору отображаемых продуктов. Ничего особенного здесь нет.
JS - enabled-on domload:
- извлеките bootstrapJSON и сделайте из него модели продуктов (используйте свой JS-фреймворк возможности для этого) .
- после этого rerender продукты, используя тот же шаблон усов, но теперь делает это на стороне клиента. (Снова используя js-фреймворк).
- визуально ничего не должно меняться (ведь рендеринг на стороне сервера и на стороне клиента выполнялся на одних и тех же моделях, с одним и тем же шаблоном), но по крайней мере теперь есть привязка между клиентской моделью и представлением.
- преобразование URL-адреса hashbang URL-адреса. (например: / products / #sort-price-asc) и использовать ваш функции JS-framework для подключения событий.
теперь каждый url-адрес (фильтрация, подкачка, сортировка ) должен привести к изменению состояния на стороне клиента, что, вероятно, приведет к тому, что ваша JS-платформа выполнит ajax-запрос на сервер для возврата новых продуктов (в формате JSON) . Повторное выполнение этого действия на клиенте должно привести к обновленному представлению.
логическая часть кода для обработки ajax-запроса в 6. на стороне сервера-это 100% идентично коду, используемому в 4. Различите ajax-вызов и обычный запрос и выплюните продукты в JSON или html (используя серверную сторону усов) соответственно.
EDIT: UPDTATE JAN 2013 Поскольку этот вопрос / ответ получает некоторую разумную тягу, я подумал, что поделюсь некоторыми тесно связанными aha-моментами прошлого года:
выплевывание JSON и рендеринг его на стороне клиента с помощью вашего клиентского mvc выбор (шаги 6. и 7. выше)может быть довольно дорогостоящим процессором. Это, конечно, особенно заметно на мобильных устройствах.
Я провел некоторое тестирование, чтобы вернуть html-фрагменты на ajax (используя рендеринг шаблона усов на стороне сервера) вместо того, чтобы делать то же самое на стороне клиента, как предложено в моем ответе выше. В зависимости от вашего клиент-устройства он может быть до 10 раз быстрее (1000 мс -> 100 мс) , конечно, ваш пробег может варьироваться. (практически никаких изменений кода не требуется, так как Шаг 7. мог бы уже сделать и то и другое)
конечно, когда JSON не возвращается, клиентский MVC не может создавать модели, управлять событиями и т. д. Так зачем вообще хранить MVC на стороне клиента? Честно говоря, даже с очень сложными поисковыми страницами в ретроспективе у меня нет большого использования для клиентских mvc. Единственное реальное преимущество для меня заключается в том, что они помогают четко отделить логику от клиента, но вы уже должны делать это самостоятельно imho. Следовательно, зачистка на стороне клиента MVC находится на todo.
О да, я торговал усами с Хоган (тот же синтаксис, немного больше функциональности, но больше всего чрезвычайно производительный!) Смог сделать это, потому что я переключил серверную часть с java на узел.js (который качает имхо)
Так как я слабовидящий пользователь и веб-разработчик, я буду звонить здесь.
эти рамки, по моему опыту, не были проблемой при условии, что соответствующие шаги будут предприняты в отношении доступности.
многие читатели экрана понимают JavaScript, и мы, как разработчики, можем улучшить опыт использования таких вещей, как атрибут Aria-live HTML5, чтобы предупредить читателей экрана о том, что все меняется, и мы можем использовать атрибут role для предоставления дополнительных подсказок в утилита для чтения с экрана.
однако основной принцип веб-разработки с JavaScript заключается в том, что мы должны сначала разработать базовый сайт без JavaScript, а затем использовать этот прочный, рабочий и проверенный фундамент для обеспечения лучших функций. Использование JS не должно быть обязательным для покупки продукта, получения услуг или получения информации. И некоторые пользователи отключают JavaScript, потому что это мешает их работе утилита для чтения с экрана.
выполнение полного Позвоночник.js или нокаут сайт с нуля без учета доступности приведет к чему-то сродни "новый Twitter", который терпит неудачу очень трудно со многими экранными читателями. Но Twitter имеет прочную основу, и поэтому мы можем использовать другие средства для доступа к платформе. Прививка позвоночника на существующий сайт, который имеет хорошо продуманный API, вполне выполнима, и очень весело.
таким образом, в основном, эти фреймворки сами по себе не являются проблемой доступности, чем jQUery сам разработчик должен создать пользовательский опыт, который работает для всех.
любая веб-страница, которая требует javascript для того, чтобы получить содержимое из него, скорее всего, будет встречен с проблемами, связанными с доступностью. Доступность фреймворков JavaScript, безусловно, является проблемой конкуренции, хотя на самом деле любое веб-приложение страдает недостатками, когда контент предоставляется динамически, независимо от используемой структуры.
нет серебряной пули, чтобы гарантировать, что ваш сайт будет доступен, и я, конечно, не могу учитывать каждый JavaScript рамки. Вот несколько мыслей о том, как вы можете предотвратить ваш сайт от совершенно недоступных при использовании JavaScript:
следуйте инструкциям от WCAG 2.0 на стороне клиента сценариев и WCAG 2.0 в целом.
избегайте фреймворков, которые требуют создания пользовательского интерфейса страницы, элементов управления и / или контента полностью через javascript, такие как Uki.js, или те, которые используют собственные разметка, как Жо. Чем ближе вы можете придерживаться статического (- ish), семантического содержимого HTML, тем лучше вы будете.
рассмотрите возможность использования роли Ария например
role="application"иaria-liveатрибут, чтобы указать области вашей страницы, которые являются динамическими. Все больше и больше ролей aria поддерживаются вспомогательными устройствами с течением времени, поэтому использование этих атрибутов aria имеет смысл, когда вы можете добавить их в свой app соответствующим образом.что касается библиотек JS, проверьте их источник и посмотрите, выводят ли они какие-либо роли aria. Они могут быть не совсем доступны, но это продемонстрирует, что они рассматривают вспомогательные устройства.
везде, где это возможно, рассматривайте JavaScript как улучшение, а не необходимость. Попробуйте предоставить альтернативные методы или рабочие процессы для доступа к важной информации, которая не требует динамической страницы новинки.
тестирование и проверка вашего приложения с вашими пользователями! Выполните некоторые сеансы тестирования пользователей с людьми, которые используют вспомогательные устройства или имеют другие трудности с использованием веб-программного обеспечения. Ничто не поможет вам доказать, что ваш сайт доступен больше, чем смотреть, как его используют реальные люди.
последний пункт является самым важным, хотя многие пытаются избежать его. Независимо от технологии, факт остается фактом, что вы разрабатываете приложение, которое люди будут использовать. Ни одна машина или теория никогда не сможет полностью проверить ваше приложение как пригодное для использования, но вы все равно не строите его для машин. Верно? :)
Chris Blouch (AOL) и Hans Hillen (TPG) провели хорошую презентацию по этому вопросу в отношении jQuery, включая работу, которую они делают при рассмотрении доступности. Создание Богатых Интернет-Приложений, Доступных Через JQuery это и другое связанное представление о доступности HTML5 и богатых интернет-приложений (http://www.paciellogroup.com/training/CSUN2012/) должно представлять для вас интерес.
мои деньги на выбор самого доступного фреймворк: jQuery обеспечивает большую степень изящной деградации или постепенного улучшения резервного копирования, а также в целом довольно хороший акцент на доступность. Кроме того, косвенно я помогаю тестировать и просматривать несколько систем, которые используют jQuery (веб-сайты Drupal public и Intranet), чтобы обнаруженные дефекты для доступности были найдены и перенаправлены обратно в проект для исправления.