1. Главная страница » Компьютеры » B accessibility для joomla 3

B accessibility для joomla 3

Автор: | 16.12.2019

Дата публикации: 2017-01-24

От автора: вне зависимости от базовой платформы, каждый из сайтов госучреждений обязан соответствовать нынешним законодательным нормам. В частности, эти интернет-площадки должны предусматривать в своем составе версию для слабовидящих пользователей. Платформа Joomla не предполагает подобной опции по умолчанию, поэтому решением задачи станет шаблон Аccessibility для сайта госучреждений.

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

Интересная закономерность отмечается в том, что большинство госучреждений создали свои веб-представительства именно на базе движка от Joomla. Скорее всего, это связано с тем, что данная CMS считается одной из самых простых и удобно редактируемых, поэтому программисты решают не усложнять себе жизнь и разрабатывают сайты именно на ней. Изначально версии для слабовидящих движок Joomla не предусматривает, однако, шаблон accessibility позволяет и людям с плохим зрением получать нужную информацию.

Какой должна быть версия сайта для слабовидящих?

Что такое accessibility? Данный термин был придуман в качестве обозначения доступности веб-страниц для людей с ограниченными возможностями. Если речь идет о accessibility именно в контексте веб-интерфейса, тогда львиную долю этой категории пользователей занимают больные, страдающие заболеваниями зрительного аппарата. К примеру, если человек болеет дальтонизмом, то общедоступная цветовая гамма помешает ему четко и равномерно воспринимать информацию.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Согласно нормам российского ГОСТа, отличительными чертами визуальной составляющей версии сайта для слабовидящих должны быть:

монохромная черно-белая расцветка;

отсутствие ярко выраженных графических элементов и графики как таковой.

То есть, грубо говоря, версия web accessibility для сайта должна представлять собой набор веб-страниц, на которых содержится лишь текст, написанный понятным крупным шрифтом, а также удобная и понятная навигация.

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

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

Создание версии для слабовидящих на Joomla своими руками

Если вы являетесь рукастым специалистом в работе на CMS Joomla и постоянно проходите интернет-курсы по совершенствованию навыков в веб-разработке, то можете попробовать создать переключатель версий сайта самостоятельно. По сути, аналоговый вариант представляет собой не что иное, как дополнительную таблицу стилей CSS. Грубо говоря, все, что вам нужно — это отредактировать текущую версию таблицы стилей под нормы ГОСТа и залить в ядро сайта JavaScript, с помощью которого получилось бы переключать шаблоны между готовыми CSS-файлами.

Читайте также:  Ezidri ultra fd1000 цена

То есть порядок действий должен быть примерно следующим:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Вносите в нынешний CSS id, который позволит движку его определять.

Копируете таблицу стилей и корректируете ее согласно требованиям ГОСТ (убираете изображение, увеличиваете шрифт, изменяете фон).

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

Пишете код скрипта с помощью функции look() с указанием пути к другому файлу CSS.

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

Если после проделанных операций ваш шаблон accessibility не работает, то лучше верните базовую версию сайта и загрузите на нее готовый шаблон со встроенным accessibility settings согласно приведенной ниже инструкции.

Пошаговая инструкция по установке готового шаблона

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

Шаг 1. Скачиваете шаблон и плагин

Шаблон представляет собой ту самую картину сайта, которая будет находиться перед людьми со зрительными отклонениями, а благодаря плагину Template Switcher пользователи смогут переключаться с одной версии на другую.

Шаг 2. Разархивируете и устанавливаете файлы

По отдельности установите каждый файл. Установка плагина производится в админке Joomla, в разделе «Менеджер расширений». Не забудьте его активировать.

Шаг 3. Устанавливаете шаблон

Делается это также в админке, в разделе «Менеджер шаблонов». После того как установка будет завершена, вы увидите список загруженных шаблонов, среди которых нужно выбрать Accessibility.

Шаг 4. Донастраиваете шаблон

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

Шаг 5. Настраиваете плагин

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

Шаг 6. Создаете специальный модуль

Это необходимо, чтобы кнопка-переключатель отображалась на сайте. Создать модуль можно в разделе «Расширения» — «Менеджер модулей» в админ-панели. Модуль должен состоять из html-кода, который будет представлять собой путь к альтернативной версии сайта. Не забудьте активировать модуль.

Шаг 7. Создаете еще одну кнопку

И последний шаг — это создание аналогичной кнопки, чтобы пользователи могли вернуться к стандартной версии сайта. Сохраняем изменения, и на этом настройку шаблона accessibility можно считать завершенной.

Надеемся, сегодняшняя информация по настройке android accessibility была для вас полезна. Поделитесь ссылкой на статью в социальных сетях, чтобы и ваши знакомые почерпнули для себя что-то новое. Подпишитесь на наш блог, если вы еще до сих пор этого не сделали. До скорой встречи!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Автор: Эдуард Бунаков · Опубликовано 11 апреля 2017 · Обновлено 23 февраля 2019

Joomla модуль для слабовидящих, это продолжение серии уроков по созданию версии сайта для слабовидящих разными способами и для разных движков (cms).

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

Теперь немного конкретизируем и рассмотрим вариант установки модуля для слабовидящих на joomla-сайт.

Читайте также:  Ipoe и pppoe разница

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

Joomla модуль для слабовидящих B-Accessibility

Достаточно не плохое решение, долгое время пользуется популярностью и самые важные возможности такие как,

  1. изменение размера шрифта
  2. регулировка контрастности
  3. навигация с помощью клавиатуры
  4. массовое подчеркивание ссылок
  5. изменение размера любых тегов добавленных администратором сайта

реализованы в данном расширении.
Найти и скачать модуль B-Accessibility можно на официальном сайте joomla.org .

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

Пропустим моменты скачать и установить, а разберем сразу внутренние параметры.

Основные настройки модуля для слабовидящих B-Accessibility

  1. Боковая панель инструментов — отвечает за расположение панели инструментов с настройками для слабовидящих. Возможность показать панель слева


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

2. Позицию иконки можно показать сверху или снизу. Имеется ввиду позицию по отношению к самому модулю, который появляется при нажатии на саму иконку.

3. Затем идет настройка размера самой иконки.

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

5. И последняя настройка — это значение уменьшения или увеличения шрифта. Начальное значение установлено в 2px. Другими словами- при каждом нажатии на увеличение/уменьшение, значение будет меняться по 2 пикселя в каждую сторону.

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

Следующая настройка «привязка к пунктам меню». Для полноценной работы лучше всего привязать модуль ко всем страницам.

Настройка шрифта Awesome модуля для слабовидящих B-Accessibility

Во многих современных шаблонах joomla предустановлена возможность использования специальных иконок и самыми популярными являются иконки сервиса awesome. К слову сказать, все эти иконки редактируются как обыкновенный шрифт.

Вот и данный модуль не является исключением.

По умолчанию все настройки установлены в положении «да». Можно оставить так, но если данные параметры работать не будут, или они не подходят по каким-то причинам, можно их отключить, но в этом случае вместо иконки будет отображаться текст из языковой константы.

Настройка сообщения модуля B-Accessibility

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

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

Joomla модуль для слабовидящих замена иконки на шрифт

Рассмотрим вариант когда иконки Awesome не работают или администратор решил их отключить самостоятельно. Как было уже сказано выше, в этом случае вместо иконки будет выводиться информация из языкового файла модуля, а это название самого модуля.

Влезать в html код нет смысла, в joomla есть отличная возможность, переопределение констант (расширения/менеджер языков/переопределение констант).

Все необходимые параметры показаны на скриншоте.

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

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

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

Читайте также:  970 Чипсет материнские платы

Сохраняем изменения и наблюдаем результат. Конечно, по умолчанию текст будет намного меньше размером, но в стилях модуля можно все легко поправить.

Joomla модуль для слабовидящих B-Accessibility имеет свои стили и чтобы отредактировать нужные, необходимо открыть файл со стилями в любом редакторе.

http://ваш_сайт/modules/
mod_baccessibility/
asset/css/style.css

Я увеличил только размер шрифта в строке 59 (font-size: 18px) и в строке 87 поменял отступ чтобы не было прилипания (right: -75px;).

Все изменения в стилях будут идентичны как для текста, так и для иконки.

По мере обновления модуля, стили могут меняться и номера строк могут не совпадать. На этот случай просто задайте вопрос в комментариях.

Модуль версии для слабовидящих Joomla

Mod ST Vision для Joomla 3 — это модуль, который добавляет на сайт возможность переключения между обычной версией и версией сайта для слабовидящих. Достаточно корректно работает с большинством шаблонов Joomla.

Простая установка и настройка. Модуль не нарушает работу основной версии сайта и не требует вмешательства в код шаблона.

Соответствует стандартам WCAG 2.0 (W3 Web Content Accessibility Guidelines), WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications), ГОСТ Р 52872-2012

Подробнее о требованиях к версии для слабовидящих читайте в материале Модуль версии для слабовидящих с озвучиванием текста

Модуль обеспечивает в режиме для слабовидящих четыре цветовых схемы — черно-белую, бело-черную, темно-синим по голубому и зеленым по коричневому. Имеется возможность включать и отключать изображения на сайте, изменять размер шрифта, регулировать межстрочный интервал и кернинг. Размер шрифта может масштабироваться от 100% до 200%.

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

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

Переход в режим для слабовидящих осуществляется при клике на кнопку, которая отображается на сайте после установки модуля.

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

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

  1. Верх — 60, Право — 1 (кнопка будет находиться в правом верхнем углу сайта, с отступом от верхнего края 60 px).
  2. Низ — 10, Лево — 10 (кнопка будет находиться в левом нижнем углу сайта, с отступами 10 px).

Модуль протестирован с несколькими популярными шаблонами Joomla.

  • Helix3 Фреймворк шаблона: Helix 3
  • Helix Ultimate Фреймворк шаблона: Helix Ultimate
  • Astroid Фреймворк шаблона: Astroid
  • T3 BS3 Blank Фреймворк шаблона: T3
  • JA Purity III Фреймворк шаблона: T3

Для более тонкой настройки версии для слабовидящих под конкретный шаблон предусмотрено поле CSS код на вкладке Код пользователя. В примере ниже показаны дополнительные настройки для шаблона JA Purity III

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

0 руб

STANDART

990 руб

  • Модуль Mod ST Vision
  • Полный функционал
  • Озвучивание текста в режиме для слабовидящих

ОФОРМИТЬ ЗАКАЗ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *