Обзоры расширений Joomla

 

 

 

JM University – адаптивный, универсальный шаблон Joomla на русском языке со множеством настроек. Его отличительная особенность – поддержка рекомендаций WCAG 2.0 (Section 508) для обеспечения доступности сайта слабовидящим людям. Но при необходимости данную поддержку можно легко отключить в его настройках. Шаблон ориентирован на создание сайтов учебных заведений (ВУЗов, школ и т. д.).

Пример, на мой взгляд, лучшего шаблона Joomla для образовательного сайта. Вы можете выбрать демо-сайт с обычной версией шаблона и с версией шаблона для слабовидящих.

В обзоре будет участвовать последняя, на момент написания статьи (12.01.2015), русскоязычная версия шаблона JM University 1.1 в Joomla 3.4.8 (фреймворк EF4 4.6.0) в Joomla 3.4.8 (на русском языке). Для тестирования используется QuickStart (быстрый старт) шаблона с англоязычными данными. Дополнительные расширения:

  • DJ-MediaTools 2.6.1 (поддержка WCAG 2.0 (Section 508)).
  • DJ-MegaMenu 3.2.0 (поддержка WCAG 2.0 (Section 508)).
  • DJ-Tabs 1.3 (поддержка WCAG 2.0 (Section 508)).

Разрешение экрана монитора, на котором проводится тестирование – 1920х1080 пикселей.

Особенности шаблонов Joomla-Monster.com на EF4

Перечислю некоторые особенности шаблонов Joomla-Monster.com, которые базируются на фреймворке EF4.

  • Совместимость с Joomla 3.
  • Адаптивный дизайн с возможностью его отключения.
  • Поддержка Bootstrap, HTML5, CSS3 (включая анимацию), LESS.
  • Нормальное отображение во всех современных браузерах актуальной версии.
  • Плоский дизайн (от англ. Flat Design).
  • Гибкая настройка шаблона (из админки без правки кода):
    • Логотип, слоган, изображение иконки (favicon).
    • Возможность закрепить шапки сайта и верхнего меню в верхней части страницы при прокрутке.
    • Возможность отключения вывода области компонента (контента) на определённых страницах.
    • Очень гибкая настройка макетов шаблона с возможностью их разграничения для экранов устройств с различной шириной. Возможность назначения различных макетов шаблона за различными пунктами меню. Возможность добавления, удаления позиций шаблона, изменения ширины шаблона и позиций модулей и многое другое.
    • Настройки шрифтов. Есть возможность использования шрифтов Google и собственных файлов шрифтов.
    • Настройки цвета различных элементов шаблона.
    • Возможность вставки кода Google Analytics и тому подобного прямо из админки Joomla.
  • Наличие «дополнений»:
    • Кнопка «Вверх».
    • Боковая панель «Off-Canvas».
    • Страница «Скоро будет» (от англ. «Coming soon»).
    • Настройщик темы. Опции настройки шаблона отображаются во фронтальной части сайта.
  • Возможность оптимизации скорости загрузки (сжатие CSS, JS и HTML), отложенная загрузка скриптов. Есть возможность исключения файлов из оптимизации.
  • Возможность настройки странницы 404 путём редактирования соответствующего материала Joomla.
  • Поддержка RTL-языков (письменность справа налево).
  • Поддержка Facebook Open Graph.
  • Возможность импорта\экспорта настроек шаблона.
  • Наличие QuickStart и исходных PSD-файлов растровых изображений.
  • Проработанный дизайн для «типовых» страниц Joomla: материалы, категории, страница регистрации, контакты и так далее.
  • Улучшенная совместимость с расширениями от компании DJ-Extensions.com (например, DJ-Classifieds, DJ-MediaTools, DJ-MegaMenu).
  • Удобная административная часть шаблона.
  • Оперативная техническая поддержка.
  • Наличие документации.
  • Фреймворк и шаблоны переведены на русский язык.

Подробнее об этих и других возможностях Вы можете прочесть в статье «Обзор JM Job Listings. Шаблон каталога Joomla».

JM University для слабовидящих

Отличительной особенностью данного шаблона является то, что он позволяет сделать версию сайта для слабовидящих (на Joomla). Если такая возможность не нужна, то это можно отключить в настройках шаблона за несколько секунд. Несмотря на то, что шаблон ориентирован на создание сайтов образовательных организаций (школ, ВУЗов и т.д.), так как он является универсальным и гибко настраиваемым, он может применяться для создания фактически любого сайта.

Помимо этого, при покупке шаблона Вы получите лицензии на платные расширения DJ-MediaTools (галерея и слайд-шоу), DJ-MegaMenu (модуль меню с расширенными настройками) и DJ-Tabs (расширение для создания вкладок и аккардеон-слайдеров). Эти расширения также поддерживают рекомендации WCAG 2.0 (Section 508) для слабовидящих.

Настройки JM University аналогичны настройкам JM Job Listings, рассмотренных в предыдущей статье. Не будем повторять, а остановимся только на тех, что отличаются.

Основные настройки

На вкладке Основные настройки шаблона JM University (рисунок ниже) есть опции, которые, грубо говоря, позволяют создать сайт для слабовидящих на Joomla. Эти опции обведены на рисунке ниже синей рамкой. Обратите внимание, что активации данных опций не будет достаточно для создания полноценной «доступности» (от англ. accessibility) сайта для слабовидящих. Почему так, будем разбираться в данной статье ниже.

Шаблон Joomla для слабовидящих
Шаблон Joomla для слабовидящих

Ночной режим. Включает/отключает отображение переключателя ночного и обычного режимов на сайте. Переключатель, по умолчанию, появляется в верхней панели сайта (рисунок ниже).

Панель инструментов для слабовидящих
Панель инструментов для слабовидящих

На рисунке ниже, в верхней его части показан пример сайта в обычном режиме, а в нижнем – в ночном.

JM University
JM University

Высоко контрастный режим. Включает/отключает отображение переключателя между режимами контрастности:

  1. Высокий контраст чёрно-белый.
  2. Высокий контраст чёрно-жёлтый.
  3. Высокий контраст жёлто-чёрный.

На рисунке ниже показан пример каждого из режимов в порядке следования их в списке выше.

Как сделать версию сайта для слабовидящих
Как сделать версию сайта для слабовидящих

Переключатель ширины. Включает/отключает отображение переключателя между «резиновым» макетом страницы (растягивается на всю ширину окна браузера) и фиксированным макетом (его ширина задаётся в настройках шаблона на вкладке Построитель макета опция Ширина шаблона (в пикселях)). На рисунке ниже показан пример каждого из макетов (сперва резинового, а затем фиксированного). Ширина окна браузера не менялась (разрешение экран – 1920х1080).

Сайт школы для слабовидящих
Сайт школы для слабовидящих

Цветовые модификации

Опции на данной вкладке (рисунок ниже) аналогичны опциям, рассмотренных в предыдущей статье «Обзор JM Job Listings. Настраиваемый шаблон Joomla». Но есть и отличия. Добавлены настройки для DJ-Tabs (но нет для DJ-Classifieds) а также в области Модули были добавлены настройки для суффиксов CSS-класса модуля.

Сайт для слабовидящих на Joomla
Сайт для слабовидящих на Joomla

Например, задав цвета для Суффикс 1, Цвет шрифта для Суффикс 1 Суффикс 2 и Цвет шрифта для Суффикс 2 можно применить их для разных модулей даже на одной странице. Для этого в настройках модуля на вкладке Дополнительные параметры в поле Суффикс CSS-класса модуля введите « color1-ms» (без кавычек, но с пробелом перед суффиксом) (рисунок ниже). Где цифра «1» указывает на номер суффикса в настройках цветового модификатора. И тогда цвет фона модуля и цвет шрифта примут заданные вами значения.

Настройка модуля
Настройка модуля

Если Вас заинтересовал вопрос управления модулями Joomla, то ознакомьтесь с данной статьёй.

Как сделать версию сайта для слабовидящих

Рассмотрим основные рекомендации, которые помогут Вам сделать сайт более доступным для слабовидящих. Нашёл два авторитетных источника по данному вопросу:

  1. Web Content Accessibility Guidelines (WCAG) 2.0 (на английском языке).
  2. ГОСТ Р 52872-2012 Интернет-ресурсы. Требования доступности для инвалидов по зрению. Национальный стандарт российской федерации. Интернет-ресурсы. Требования доступности для инвалидов по зрению.

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

На основании «Web Content Accessibility Guidelines (WCAG) 2.0» приведу краткий перечень рекомендаций, которые стоит учесть для повышения доступности Вашего сайта людям с ограниченными возможностями (не только слабовидящих).

  1. Обеспечьте текстовым описанием любое не текстовое содержимое (фото, инфографика и т.д.), так чтобы его легко можно было трансформировать в другие «формы», удобные людям. Например, для печати крупным шрифтом, воспроизведения шрифтом Брайля, преобразователем текста в речь и так далее.
  2. Обеспечьте звуковое сопровождение для пояснения событий, происходящих на видео.
  3. Создавайте контент, который может быть представлен различными способами без потери информации или структуры (простой макет страницы).
  4. Предоставьте возможность управления аудио потоком (громкость, остановка, воспроизведение). Например, специально для Joomla 1.5-3.х есть расширение Screen Reader, которое обеспечивает озвучивание текста с поддержкой 51 языка, включая русский, английский, немецкий, французский.
  5. Обеспечьте возможность управления функциональностью сайта с клавиатуры. Обратите внимание, что такие расширения как DJ-MediaTools, DJ-MegaMenu, DJ-Tabs и Screen Reader поддерживают данную возможность.
  6. Предоставьте пользователям достаточное количество времени для прочтения и использования содержимого сайта. Например, не используйте автоматическую прокрутку слайдов без возможности остановить это и управлять процессом прокрутки.
  7. Не создавайте содержимое, которое может вызывать припадки (мигания\анимация объектов с частотой более чем три мигания в секунду).
  8. Предоставьте пользователям максимально возможное количество элементов навигации и поиска информации. Касательно возможностей поиска в Joomla Вы можете ознакомиться в этом цикле статей.
  9. Делайте текст содержимого читабельным и простым для понимания\восприятия.
  10. Проектируйте\создавайте сайт и его страницы так, чтобы он был интуитивно понятным и «предсказуемым». Например, элементы навигации и управления сайтом должны оставаться на всех страницах в одном и том же месте. Если они одинаковые для всех страниц, то и выглядеть, и называться, и работать должны одинаково.
  11. Помогите пользователям избежать ошибок или помогите исправить возникшие ошибки. Например, если пользователь ввёл в поле поиска запрос, состоящий из слишком малого количества символов, то стоит отобразить сообщение об ошибке (текстом) и пояснить, что именно сделано не так, и как надо сделать. Также стоит снабжать элементы интерфейса сайта текстовыми подсказками и описаниями.
  12. Обеспечьте максимальную совместимость Вашего сайта с текущими и будущими версиями браузеров и технологиями для людей с ограниченными возможностями.

Существует три уровня доступности информации для слабовидящих (по ГОСТ Р 52872-2012 и WCAG 2.0 (Section 508)):

  1. Уровень А - уровень минимальной доступности. Позволяет инвалиду по зрению обеспечить доступность к интернет-ресурсу без потерь информации.
  2. Уровень АА - уровень полной доступности. Позволяет инвалиду по зрению обеспечить доступность ко всем структурным элементам интернет-ресурса.
  3. Уровень ААА - уровень доступности специализированных интернет-ресурсов для инвалидов по зрению. Позволяет инвалиду по зрению обеспечить доступность к интернет-ресурсу с использованием специальных технологий этого ресурса, разработанных для людей с ограничениями по зрению.

В принципе, уровень А можно обеспечить без дополнительного программного обеспечения. Только изменив содержимое и стили (если необходимо).

Для тестирования сайта на соответствие рекомендаций WCAG 2.0 (Section 508) есть специальный сервис.

Если Вы решили сделать сайт для слабовидящих на Joomla, то рекомендую обратить своё внимание на такие расширения:

  • DJ-MediaTools. В статье «Image slideshow with WCAG and Section 508 support» (на англ.) можно ознакомиться с более подробным описанием, что именно сделано в расширении для обеспечения его доступности для людей с ограниченными возможностями.
  • DJ-MegaMenu. В статье «Mega Menu that follows WCAG and Section 508 released» (на англ.) можно ознакомиться с более подробным описанием того, что именно сделано в расширении для обеспечения его доступности для людей с ограниченными возможностями.
  • DJ-Tabs. Доступно управление элементами интерфейса с клавиатуры.
  • Screen Reader. Озвучивает текст страницы.

Также стоит посетить специальный раздел «Accessibility» на официальном сайте расширений Joomla. Там Вы найдёте дополнительные расширения для обеспечения доступности.

Настоятельно рекомендую ознакомиться с адаптивными, универсальными, готовыми, гибко-настраиваемыми шаблонами Joomla на русском языке, которые создавались с учётом рекомендаций WCAG 2.0 (Section 508).

Русификатор JM University

Скачать русификатор JM University.

 

Создание сайта для слабовидящих (и людей с другими ограничениями по здоровью) – весьма сложная и трудоёмкая задача. Для Joomla есть несколько расширений, в которые заложена поддержка рекомендаций WCAG 2.0 (Section 508). Но таких расширений очень мало. Думаю, что для других распространённых «платформ» для создания сайтов дела обстоят аналогично.

Также стоит учесть, что установка одного или нескольких расширений, с поддержкой рекомендаций WCAG 2.0 (Section 508) не решает проблему доступности сайта. Как видно из краткого перечня рекомендаций выше, работа должна быть комплексной – от проектирования сайта в целом, до постоянной работы над содержимым и интерфейсом в течение всего жизненного цикла веб-проекта. Иначе получится как с пандусами, на которые, часто-густо, заехать на инвалидной коляске без посторонней помощи нельзя.

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

Нужна комплексная работа над контентом в целом, дополнительное программное обеспечение и знание, понимание и применение рекомендаций, описанных в ГОСТ Р 52872-2012 и WCAG 2.0 (Section 508). При этом делать работу постоянно.

Гораздо проще обеспечить доступность для сайтов, где контента немного, он, в основном, текстовый и обновляется редко.

И тут возникает вопрос целесообразности\рентабельности. Данный вопрос – вопрос экономический, и он граничит с вопросами морали. Создание сайта для слабовидящих, увеличивает время\стоимость проектирования сайта, первичную разработку, доработку, тестирование и сопровождение. В итоге, владелицу сайта данные затраты могут не окупиться. Достаточно сложно, даже для существующего сайта, определить долю людей с ограниченными возможностями среди посетителей сайта. Например, в Яндекс.Метрике 2.0 (на 21.12.2015) такой возможности нет (сам искал и обращался в технические поддержки Яндекса). Возможно, можно было бы отслеживать Брайлевские дисплеи или специальные плагины в браузерах, например, Webvisum для Firefox. Но такой возможности я не нашёл.

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

Лично я считаю, что сайты для слабовидящих (и людей с другими ограничениями по здоровью) должны быть у всех государственных учреждений, потенциальными посетителями которых могут быть все жители страны. Это больницы, аптеки, сайты коммунальных служб, пенсионных фондов, служб спасения, правительственные сайты и так далее. За ними, на мой взгляд, должны следовать образовательные учреждения (от школ до ВУЗов).

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

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

 

Полезные ссылки: