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


Содержание материала:

Версия для слабовидящих

Установите сами на свой сайт за 5 мин

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

Предварительный просмотр

Наши клиенты

В качестве примеров представлены сайты наших клиентов

Инструкция по вставке на WIX сайт

1. Предаврительно получить ссылку на шаге 1

2. Заходим в редактор сайта

3. В левой панели нажимаем на «+» и выбираем «Кнопка», далее выбираем любую понравившуюся кнопку и перетаскиваем себе на сайт.

4. В настройках кнопки пишем название «Версия для слабовидящих» и нажимаем «Добавить ссылку»

5. В появившемся окне выбираем «Веб-адрес» и открыть «В текущем окне»

В поле «Добавьте веб-адрес (URL)» вставляем ссылку полученную ранее

6. Написать нам для включения нужного шаблона.

Готово!

Инструкции

Инструкции по установке сервиса «Версия для слабовидящих» на ваш сайт
(Необходимо выбрать инструкцию соответствующую способу создания вашего сайта)

Часто задаваемые вопросы

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

Если отображается только верхняя панель?

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

Не удалось соединиться с сайтом

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

решит проблему.
Если у вас не получается установить его самостоятельно, то свжитесь с нашей службой поддержки.

Раньше сайт отображался нормально, а теперь нет, текста не видно.

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

Куда делась кнопка «обычная версия»?

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

Установили баннер, но он отображается только на главной странице ?

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

Стоимость

Для безналичной оплаты

от 5000 ₽

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

  • Неограниченная версия
  • Бесплатная настройка
  • Техническая поддержка 1 месяц
  • Бесплатная установка баннера
  • Возможность перенести на другой сайт/домен

При оплате через робокассу

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

  • Лицензия на 1 год
  • Бесплатная настройка
  • Техническая поддержка на 1 год
  • Бесплатная установка баннера
  • Возможность перенести на другой сайт/домен

Для безналичной оплаты

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

  • Лицензия на 3 года
  • Бесплатная настройка
  • Техническая поддержка на 1 год
  • Бесплатная установка баннера
  • Возможность перенести на другой сайт/домен

Если имеются вопросы по оплате, то пишите на [email protected]

Владелец сервиса

Курочкин Владимир Александрович

ИНН 701734919832, ОГРН 316703100086783

Как с нами связаться?

По вопросам оплаты и заключения договора:

Somewhere Somewhere, Mauritius + 230 5 8268494 [email protected]


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

Модуль joomla для слабовидящих (видеоурок)

Вы смотрите: 1000+ видеоуроков » Создание сайтов » CMS » Joomla » Модуль joomla для слабовидящих (видеоурок)

Как установить и настроить joomla модуль для слабовидящих B-Accessibility в CMS Joomla — смотрите в уроке Эдуарда Бунакова.

Joomla модуль для слабовидящих B-Accessibility его настройки и возможности отображения в виде иконки и простого шрифта, а также изменение внешнего вида. © Эдуард Бунаков.

Ваши ссылки: скачать видео

Информация о видео

Источник: Суперадминистратор Joomla.
Автор: Эдуард Бунаков.
Формат видео: MP4.
Продолжительность: 00:16:00
Размер архива: 75 MБ.

Нравится информация? Расскажите о ней в своей социальной сети!

Вам также может понравиться

Ошибки при переходе с HTTP на HTTPS (урок WordPress)

Оптимизация изображений сайта (урок сайтостроения)

Суффикс CSS класса модуля CMS Joomla (видеоурок)

Правильное обновление Joomla (видеоурок)

Базовый курс joomla 3 версия (видеокурс)

Базовый курс WordPress (видеокурс)

Оставить комментарий X

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

  • видеоуроков и видеокурсов;
  • семинаров и тренингов;
  • интенсивов;
  • записей вебинаров;
  • скринкастов.

и другого обучающего видео.

Навигация по архиву

Ещё интересное видео
Модуль «JL mp3 player» mp3-плеера для Joomla (видеоурок)

Как установить и настроить модуль «JL mp3 player» на сайте Joomla — смотрите в видеоуроке Сергея Патина. Свойства модуля «JL mp3 player» полная поддержка кодировки utf-8; автозапуск треков; возможность случайного воспроизведения; мультиязычность; CSS скины плеера позволяют изменить дизайн плеера на 100%. «Этот плеер отличается от аналогов тем, что работает на html5, т.е. не требует установленного […]

Заголовок H1 в Joomla и способы его вывода на странице (видеоурок)

Как управлять заголовками H1 в CMS Joomla без установки дополнительных расширений — смотрите в видеоуроке Эдуарда Бунакова. Некоторые пользователи не вникая в суть оптимизации сайта, порой не обращают на это внимание, а те кто знает, что данный заголовок в теге h1 должен обязательно быть, не могут найти способ его вывода на странице. И пользуются по […]

Правильное обновление Joomla (видеоурок)

Как правильно обновить CMS Joomla и не потерять настройки — смотрите в видеоуроке Эдуарда Бунакова. «В данном видео показано, как правильно использовать возможности joomla при обновлении системы и копировании базового шаблона для сохранения настроек.» © Эдуард Бунаков Информация о видео Источник: Суперадминистратор Joomla. Автор видео: Эдуард Бунаков. Формат видео: *.mp4 Продолжительность: 00:09:29 Размер архива: 40,4 […]

Версия для слабовидящих для школьных сайтов

В соответствии с Приказом 483 от 30.11.2015 Минкомсвязи, требуется доработка сайтов органов власти, самоуправления и т.д. с целью повышения доступности информации для инвалидов по зрению. Т.е. требуется версия сайта для слабовидящих.

Из нашего опыта в ОУ наиболее распространены сайты, созданные на CMS Joomla, WordPress и конструкторе ucoz.

Ниже представлены варианты доработки сайтов для joomla версий от 1.5 до 3.хх, WordPress, ucoz.

Все решения опробованы и достаточно работоспособны.

Для JOOMLA

Для joomla 1.5 необходимо Скачать архив

Для joomla 2.5-3 скачиваем этот архив

Инструкция по установке.

1. Распаковываем архив и копируем файлы blind.png и noblind.png в папку сайта images

2. Устанавливаем плагин templateswitcher.zip

3. Устанавливаем шаблон для слабовидящих accessibility.zip, предварительно в файле index.php в строке 77 заменяем a564 на названием своего шаблона сайта

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

Самый простой: создаем модуль Произвольный HTML-код, вставляем в него картинку blind.png и вставляем ссылку на картинку http://название сайта/?template=accessibility

5. Осталось расставить меню в версии для слабовидящих. Для этого в модулях находим модули с меню, создаем их копию и ставим в свободные места шаблона: position-1-vi, position-2-vi (для гоизонтального меню), left-vi для вертикального меню

Решение проблемы неработающих кнопок в joomla 1.5

Возможно при переходе в версию для слабовидящих у вас не будут работать кнопки: причина в конфликте jquery. Одно из решений: установите плагин plg_jqueryeasy_j15rus.zip из архива и, в параметрах плагина, установите Включить jQuery

Для WordPress

Воспользуйтесь бесплатным плагином Comfortable Reading

Обратите внимание, что бесплатный плагин не полность соответствует ГОСТу: он не умеет включать-выключать изображения. Для полного соответствия требуется приобретение Premium версии, стоимостью 700 рублей.

Для сайтов на конструкторе UCOZ

Инструкция по установке здесь

Примеры сайтов на Joomla (Джумла)


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

Joomla хороша тем, что имеет довольно простой код шаблонов. Многие вещи можно отредактировать, зная лишь HTML/CSS. Хорошая платформа для начинающих пользователей CMS. Она не идеальна, панель управления и схема добавления модулей на сайт специфические, но привыкнуть можно быстро. Движок пользуется популярностью у госучреждений – на нём создано множество солидных официальных сайтов госструктур и других серьёзных проектов. Это говорит о многом – гибкости, относительной надёжности и удобстве администрирования больших сайтов.

Топ-пост этого месяца:  Node js EventEmitter запуск событий, описание методов и классов

Относительным недостатком можно считать тяжеловесность – движок неповоротлив, требует нормального хостинга, особенно после плотного обвеса модулями. Шаблоны для Joomla недорогие, как и разработка готовых сайтов с обслуживанием – это тоже факторы популярности. Каких-то характерных черт, присущим сайтам на Joomla, не существует. Внешний вид зависит от шаблона, который, как правило, идёт в комплекте с пакетом модулей, оптимизированных под отображение в ячейках дизайна. Теперь давайте переходить к примерам готовых сайтов на Joomla.

Примеры Joomla-сайтов:

  1. Afalina-spb.ru – сайт компании.
  2. Mining-media.ru – сайт журнала.
  3. Gpntb.ru – сайт государственной библиотеки РФ.
  4. Gorskie.ru – новостной портал.
  5. Spbu.ru – сайт университета.
  6. Gymnasium.tversu.ru – сайт гимназии.
  7. Dineviresort.ru – сайт агентства недвижимости.
  8. Prjaga.ru – портал о вязании.
  9. Turkistan.ru – сайт-обозреватель.
  10. Kinoart.ru – сайт киножурнала.

Afalina – сайт компании по производству санитарно-гигиенической продукции

Afalina-spb.ru – сайт-визитка компании, которая производит полотенца, салфетки, губки и прочее в таком духе. Дизайн уместный для тематики – спокойные оттенки фиолетового и розового цветов придают лёгкость всей конструкции. Увы, шаблон не адаптивный. Структура классическая – слайдер с продукцией в шапке, под ним общие сведения, далее идут категории продукции, ротатор брендов клиентов и футер самого обычного оформления. Логотип удачный, под его цвет и шрифт выстроен остальной дизайн сайта.

Шрифты используются самые простые, есть некоторые претензии к форматированию текста в материалах – сплошная простыня, картинки разного размера, прайс в виде таблицы отображается кривовато. Кроме того, сайт ощутимо лагает – явно проблемы на хостинге. Есть страницы с контактами, вакансиями, FAQ. Раздел с отзывами пустует. Сайт разработала сторонняя компании (в футере видно эту информацию) и, видимо, не довела дело до ума. Оптимизация хромает, хостинг дешёвый, оформление материалов посредственное. В плане информативности сайт нормальный, но недоработки видны невооружённым глазом.

Горная промышленность – сайт журнала

Mining-media.ru – мощный сайт нишевого СМИ в формате новостного портала. Дизайн серьёзный, адаптивный. Тёмная шапка контрастирует с чистой, светлой областью для публикаций. Миниатюры новостей отлично выделяются на фоне. Слайдер с анонсами статей, лента партнёров, видеовставки, краткое содержание свежего номера, сайдбар с виджетами и акценты приятного красного оттенка в важных местах – всё выполнено качественно, подано информативно. Страницы открываются быстро, форматирование материалов на хорошем уровне. Есть личный кабинет подписчика.

Есть раздел с книгами из отрасли и репортажами с выставок. Навигация, несмотря на огромное количество контента, удобная, материалы грамотно структурированы по категориям. Портал имеет 2 локализации – русскую и английскую. Солидно – все публикации качественно переведены, как и положено приличному СМИ. Есть быстрый поиск по сайту и архив, дающий доступ к номерам журнала вплоть до 1994 года. Раздел «О журнале» содержательный, в нём выложена информация для партнёров, подписчиков, об издательстве и прочее. Очень хороший пример реализации новостного портала на Joomla.

Сайт государственной публичной научно-технической библиотеки России

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

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

Новостной портал еврейских общин

Gorskie.ru – ещё один пример крупного новостного портала, хорошо демонстрирующий функциональный потенциал Joomla. Дизайн обычный, чистый, можно сказать, классический для новостных сайтов. Синий и чёрный акценты контрастируют чистым белым фоном и серым шрифтом публикаций. Читать удобно, ничего не режет глаз. Дизайн адаптивный. Структура навигации простая – всё очевидно подано. Две колонки публикаций и сайдбар на главной странице выглядят насыщенно, но при этом легко читаются. Портал имеет 3 локализации – русский, иврит и английский. Единственный недочёт – в русской версии шаблона не перевели кнопку «Read More».

Портал работает вальяжно – видно, что мощности хостинга не хватает для плавной обработки запросов посетителей. Сайт массивный, тяжёлый, материалов десятки тысяч. Использовано множество плагинов. К примеру, есть отдельный раздел для заказа авиабилетов и бронирования отелей. Реализация хорошая. Огромный раздел с видео, отсортированного по источникам, впечатляет размахом. Кнопки социалок размещены только в шапке и футере, примечательно, что в публикациях их нет. У сайта есть телеграмм-канал, о чём кричит баннер под шапкой. В целом, портал реализован на высоком уровне, но ему не хватает скорости работы.

Сайт Санкт-Петербургского государственного университета

Spbu.ru – ещё один пример сайта солидного госучреждения. Корпоративный сайт, по сути. Смесь визитки и новостного портала. Дизайн адаптивный, вполне приличный, хотя слайдер крупноват, а белый шрифт меню на фоне выбранных изображений не очень хорошо читается. Зато в мобильной версии всё отлично – выпадающее чёрное меню удачно контрастирует с белым, чётким шрифтом. Красные акценты элементов добавляют живости дизайну. Структура сайта сложная, но понятная – найти информацию легко.

Разделов множество – для студентов, пресс-центр, абитуриентам, вакансии, анонсы событий, новости и прочее полезное. Локализация по английскому и китайскому языкам придаёт веса университетскому сайту. Публикации отлично форматированы, легко читаются, есть кнопки социалок – всё хорошо подогнано, свежо смотрится. Футер немного перенасыщен ссылками разной длины, что выглядит немного сумбурно. Есть версия для слабовидящих. Хороший образец сайта на Joomla.

Сайт академической гимназии

Gymnasium.tversu.ru – образовательный сайт гимназии, созданной на базе Тверского государственного университета. Создан на базе современного адаптивного шаблона со множеством эффектов вроде затухания, анимации появления элементов и прочих. Дизайн чистый, свежий. Красные, синие и зелёные акценты придают живости, не перегружая при этом глаза. Шрифты читаются неплохо, но им не хватает чёткости, их верхушки в некоторых местах съедаются форматированием (особенности стилей шаблона либо неудачная регулировка межстрочных интервалов), они слегка теряются среди цветных элементов.

Материалов множество – сайт явно полезен для аудитории. Выложена фотогалерея за все годы существования гимназии. Расписания, информация для поступления, новости, методички, документы, отклики в СМИ и многое другое присутствует. Качество публикаций ожидаемо высокое. Контакты в шапке, контрастные ссылки социалок и подписка на ленту RSS позволяют быстро подключиться к экосистеме учебного заведения. Приятно, что сайт работает быстро. В целом, проект оставляет приятное впечатление, мелкие недочёты теряются на фоне общего высокого качества реализации.

Denivi Resort – сайт агентства недвижимости

Dineviresort.ru – визитка риэлтора в современном адаптивном дизайне. Главная страница выполнена в удобном формате лендинга. Шапка слишком крупная, изображение с эффектом пикселизации смотрится неплохо, но видео в маленьком окошке на фоне неуместно. Лучше бы его поставили в хедер на весь экран. Цветовая схема подходящая – оттенок синего а-ля морская волна созвучен тематике. Логотип посредственный – буквы плохо читаются, они не чёткие. В целом, структура и размещение элементов в шапке неудачное. Зато всё остальное в порядке – сочные фото, красочные описания, красивый слайдер-гармошка, видеоролики и ссылки на аренду апартаментов.

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

Наша пряжа – портал о вязании

Prjaga.ru – серьёзный портал на тему вязания. Дизайн хорошо подогнан под чёткое отображение элементов. Стилизован под пряжу и строчку нитками – отлично подходит. Он адаптивный, причём, мобильная версия корректно отображает элементы. Качественная работа. Есть личный кабинет, пользователи могут оставлять свои публикации. Блоговая лента с «рецептами» одежды смотрится нормально, несмотря на разные размеры миниатюр изображений – здесь это не режет глаз.

Записи отформатированы нормально, содержательные, с хорошими иллюстрациями. Структура портала состоит из большого количества категорий новостной ленты – платья, штаны, перчатки и т. д. Перемещаться между ними удобно. Ссылки на социалки и YouTube-канал на виду в сайдбаре и внутри публикаций. Есть быстрый поиск по сайту. В целом, проект выполнен просто, информативно и со вкусом. Наверняка, пользуется популярностью у целевой аудитории.

Казахстан – страна тюрков

Turkistan.ru – сайт обо всём, что связано с Казахстаном. Традиции, культура, обзор достопримечательностей, новости, блог, легенды, мифы – тут собрано всё о стране. Дизайн простой, имеет фиксированную ширину – не адаптивный. Визуально ничего особенного из себя не представляет – не раздражает, но и не привлекает. Главное – удобно читать, ничего в обрамлении не отвлекает внимание, хотя шрифты мелковаты. Много проблем с отображением миниатюр новостей, картинок либо нет (битая ссылка), либо они растянуты, склеены с текстом и т. д.

Топ-пост этого месяца:  TypeScript tuple как применяется тип данных кортежи для хранения набора значений

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

Искусство кино – сайт журнала

Kinoart.ru – сайт журнала, посвящённого кинематографу. Выполнен качественно. Дизайн контрастный, хорошо сделан, но на любителя. Адаптивный, мобильная версия подогнана хорошо. Чёрно-белое классическое кино, напоминает о временах Чарли Чаплина и Мерилин Монро. Есть подписка, анонсы выпусков, мероприятий, множество качественно оформленный публикаций, возможность заказа билетов на сеансы кино в популярных кинотеатрах Петербурга и Москвы. Используется небольшое количество ненавязчивых эффектов.

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

Итоги

Joomla позволяет создавать разнообразные типы сайтов, но особенности движка таковы, что выгоднее всего делать блоги, порталы и прочие типы сайтов с большим количеством контента и пользовательских публикаций. Магазины и лендинги встречаются реже. Тем не менее, шаблоны есть под всё – вопрос лишь в удачной адаптации отображения контента в модулях.

Очевидно, движок пользуется популярностью у госорганизаций – вы видели примеры мощнейших порталов солидных образовательных учреждений. Нюанс лишь в качественном хостинге и обеспечении безопасности. Joomla имеет среднюю устойчивость к атакам, но проблемы решаются настройками и плагинами. Стоит ли использовать эту систему? Да, как и WordPress, она хорошо подходит роль первой CMS новичкам.

Как сделать сайт доступным для незрячих и слабовидящих?

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

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

Когда задумались о доступности?

В 1996 году был создан Консорциум Всемирной Паутины (World Wide Web Consortium, W3C), и на одной из встреч был предложен черновик гайдлайнов для улучшения доступности веба. Инициатива получила поддержку таких крупных спонсоров, как Microsoft, IBM, Adobe, и сейчас все популярные браузеры имеют настройки доступности и поддержку разметки WAI-ARIA для предоставления возможности полноценного использования Интернета людям с физическими ограничениями (нарушения работы органов зрения и опорно-двигательного аппарата).

Сейчас существуют руководства для веба с целью повышения доступности контента: международный стандарт WCAG2.0 для пользователей с различными ограничениями здоровья (зрение, слух, моторика и т.д.) и российский национальный стандарт доступности веб-ресурсов для инвалидов по зрению ГОСТ Р 52872-2012. Они разрабатывались для людей с нарушениями здоровья, однако использование тех же принципов повысит уровень комфорта в работе с сайтом и для здоровых людей. Ведь люди могут просто устать или же читать сайт с маленького телефона с тусклым экраном, на котором плохо виден текст.

Экология доступности

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

1. Масштабируемая верстка

(5.1.7.7 ГОСТ Р 52872-2012: размер шрифта текста может быть изменен в пределах 200 процентов без применения вспомогательных технологий таким образом, что пользователю не нужно прибегать к горизонтальной прокрутке для прочтения строки при режиме отображения страницы во весь экран).


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

В качестве удачного примера использования масштабируемой верстки можно привести сайт Центрального Банка РФ. Масштаб сайта можно увеличить в браузере не только до 200%, но и до 500% без появления горизонтальной прокрутки.

На скриншоте: увеличение масштаба до 200%. Полосы прокрутки нет

2. Достаточная контрастность текста и фона

(5.1.7.3 ГОСТ Р 52872-2012: Визуальное отображение текста и изображения текста имеет коэффициент контрастности не менее 4,5:1).

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

Контрастность текстов можно проверить с помощью чекеров контрастности, например Colour Contrast Analyser, или расширений для браузера, например “Contrast Ratio Checker” для Chrome. Существуют даже онлайн-чекеры контрастности, не требующие установки на компьютер.

На сайте Пенсионного Фонда РФ основной текст имеет достаточную контрастность, 14:1.

Для дополнительного текста (подсказок, рекламных материалов) требования к контрастности чуть менее строгие.

3. Возможность работать с сервисом с помощью клавиатуры

(5.2.1.1 ГОСТ Р 52872-2012: Всей функциональностью контента можно управлять через интерфейс клавиатуры без каких-либо ограничений по времени нажатия на клавишу, за исключением случаев, когда вызываемая функция требует ввода с помощью других устройств, зависящего от направления движения пользователя, а не только от конечной точки. Это не запрещает и не должно препятствовать предоставлению возможностей ввода с помощью мыши и других способов в дополнение к клавиатуре).

Переключение между клавиатурой и мышкой — временны́е затраты, которые можно минимизировать, если корректно работает TAB и ENTER. Многие из нас пользуются клавиатурой для навигации, даже не задумываясь над этим.

Люди с нарушениями здоровья могут не пользоваться мышкой из-за проблем с мелкой моторикой. А незрячие люди могут пользоваться экранными дикторами — программами для озвучивания текста на экране. В таких случаях важно, чтобы на сайте корректно работал фокус (при нажатии на кнопку TAB выделялась следующая ссылка/кнопка, а также в строке состояния браузера отображалась ссылка, куда будет совершен переход).

Работа с клавиатурой на сайте хорошо реализована на сайте Госуслуг.

Госуслуги: при нажатии кнопки TAB фокус переключается последовательно на каждую кнопку/ссылку.

Если посмотреть на сайты иностранных коллег, например на сайте банка Barclays реализована возможность пропустить повторяющиеся элементы (верхнее меню) при управлении с клавиатуры. Она включается только по клавише TAB.

На скриншоте видно, что пропускается все сквозное верхнее меню и идет переход сразу к первой кнопке на странице.

Это ускоряет доступ к нужному контенту при управлении с клавиатуры при просмотре сайта.

Как можно заметить, большая часть требований — технические, относящиеся к верстке сайта.

Но об “экологии верстки” стали задумываться только недавно. Хотя о доступности веб-контента для лиц с ограничениями здоровья говорили еще в 1994 году, бурное развитие веба привело к тому, что сейчас хорошо сверстанные сайты с учетом рекомендаций для комфортного чтения — скорее исключения или “правила хорошего тона” серьезных веб-студий.

Что делать, если с версткой сайта все плохо? Панель комфортного чтения!

Хорошего эффекта можно добиться без исправления верстки всего сайта. Например, на многих государственных сайтах используется такое решение, как “Панель для слабовидящих”, которая решает вопрос с контрастностью и размером шрифта. С помощью нее можно добавить функции, которые удовлетворят потребности людей с ограниченными возможностями — например, возможность настроить отображение цвета на сайте поможет людям с дальтонизмом, а увеличение интервалов между буквами и строчками, а также настройка шрифта с засечками — людям с дислексией, для которых рядом стоящие буквы меняются при чтении местами.
Такая панель хорошо реализована на уже упоминавшемся выше сайте ПФРФ.

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

Панель комфортного чтения на сайте Росбанка.

В 2020 году такая панель появилась и на сайте ВТБ.

Панель комфортного чтения на обновленном сайте ВТБ.

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

Панель комфортного чтения на сайте ПФРФ (с примененной настройкой контрастности)

Для установки подобной панели не обязательно иметь доступ к исходному коду сайта. Существуют подобные плагины и для популярных CMS, которые может установить практически каждый без особенных затрат, поскольку установка плагина осуществляется либо автоматически, либо требует не слишком трудоемких манипуляций пользователя с готовым скриптом. Например, можно использовать плагин Comfortable Reading (для WordPress и Joomla).

Пример настройки сайта с помощью плагина Comfortable Reading

Есть панель — нет проблем? Все не так просто!

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

1. Ограниченный функционал

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

Пример: сайт Генпрокуратуры РФ. Имеются настройки размера шрифта и три варианта цветовой схемы.

2. Отдельная версия сайта для слабовидящих

Версия для слабовидящих находится на отдельном URL. Также на ней может отсутствовать часть контента по сравнению с обычной версией. Это не самое удачное решение, поскольку нужно поддерживать две отдельных версии сайта, что ведет к дополнительным затратам. Такой вариант используется, например, на http://kremlin.ru/.

Топ-пост этого месяца:  Подписано, упаковано, доставлено как использовать тег address в HTML 5.2

3. Проблемы работы с экранным диктором

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

О проблемах работы интернет-банков и мобильных приложений с экранным диктором компания USABILTIYALB подробно рассказывала на банковском завтраке в сентябре 2020 года.

4. Версию для слабовидящих сложно найти даже зрячему человеку

Например, используются очень бледные, незаметные иконки, как на сайте Счетной палаты РФ:

Смогли бы вы сразу заметить иконку, если бы она не была выделена на скриншоте?

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

Пример нестандартной иконки

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

Заключение

Мы видим, что развитие юзабилити и доступности на данный момент идет не столько со стороны бизнеса, сколько со стороны государства. Проблемы доступности активно обсуждаются и решаются в банковской сфере, при поддержке ЦБРФ.

1 января 2020 года вступил в силу Федеральный закон № 419-ФЗ «О внесении изменений в отдельные законодательные акты Российской Федерации по вопросам социальной защиты инвалидов в связи с ратификацией конвенции о правах инвалидов», и большинство государственных сайтов добавили версию для слабовидящих. Однако на некоторых из них такая версия отсутствует.

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

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

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

Загрузка настройщика тем. Пожалуйста, подождите.

    • Контраст
    • Обычный режим
    • Ночной режим
    • Высокий контраст чёрно-белый режим1
    • Высокий контраст чёрно-желтый режим1
    • Высокий контраст желтый-чёрно режим1
    • Макет
    • Фиксированный макет
    • Широкоформатный макет

    • Шрифт
    • Уменьшить шрифт
    • Шрифт по умолчанию
    • Увеличить шрифт
  • Главная
  • Видео
  • Как сделать режим для слабовидящих в Joomla 2.5 — 3.x

Как сделать режим для слабовидящих в Joomla 2.5 — 3.x

  • Если при включенной «версии для слабовидящих» при нажатии любого пункта меню сайт возвращается в «обычную версию» — в настройках шаблона для слабовидящих выберите пункты меню для отображения
  • Если на версии 2.5 не нажимаются кнопки : скачиваем ЭТО и между тегами в ВАШЕМ шаблоне ИСПОЛЬЗУЕМОМ В ДАННЫЙ МОМЕНТ ПО УМОЛЧАНИЮ вписываем

Мастерская Joomla 10

Здравствуйте, дорогой коллега!

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

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

Содержание выпуска:

1. Все пропущенные мета-тэги на одной странице.

2. Версия сайта для слабовидящих.

3. Расписание занятий / мероприятий / выступлений.

4. Как добавить скрипты в шапку сайта для отдельных страниц.

5. Как одна бесплатная программа увеличила мою эффективность в 4 раза?

1. Пропущенные мета-тэги на одной странице

Стандартное решение этой задачи — это пройтись по каждому материалу и категории и вручную прописать все мета-тэги.

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

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

Но есть хорошие новости. Нашел расширение, которое в плане мета-тэгов делает все идеально.

А именно:

  • com_osmeta_free_1.3.0.zipХиты: 1533Размер: 295 Kb

2. Версия сайта для слабовидящих

Последние полгода очень часто приходят вопросы: «Как сделать версию сайта для людей с ограниченными возможностями?»

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

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

Требования к версии для слабовидящих

Требования доступности для инвалидов по зрению описываются в ГОСТ Р 52872-2012.

Вот основные из них:

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

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

Joomla CMS — лучшее решение для образовательных организаций

Joomla — одна из популярнейших систем управления сайтом, которая отлично подойдёт для создания сайта школы, колледжа или детского сада.

Почему Джумла?

Одна из самых популярных бесплатных CMS

На Joomla работает более 27% сайтов в доменной зоне RU и более 30 миллионов по всему миру

Управлять содержимым сайта очень легко

Все функции и возможности системы управления сайтом доступны на понятном вам языке

Богатый выбор шаблонов и расширений

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

Надежная система безопасности

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

Как создать сайт на Джумла?

Скачать CMS

Ссылку для скачивания последней версии Джумлы, а также описания изменений в каждой новой версии вы найдёте здесь.

Установить CMS

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

Настроить сайт

Настройка предполагает подбор и установку шаблона и необходимых расширений, техническую SEO-оптимизацию сайта: активацию ЧПУ, SSL-сертификата, кэширования данных на сервере, GZIP-сжатия данных и т. д.

Наполнить сайт контентом

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

Готовые решения для быстрого создания сайта

Полезные модули и плагины для Joomla

Илья (Шаблон ST Sity)

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

Кирилл (Шаблон ST Sity)

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

Мухаммад (Шаблон SI-School 3)

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

Антон (Шаблон для слабовидящих)

Купил шаблон для слабовидящих, все настроил поставил. Работает круто! Спасибо Вам.

Версия для слабовидящих — Joomla

Для государственных учреждений требуется наличие версии для слабовидящих, большинство сайтов данной тематики на Joomla, ну и просто понадобилось мне реализовать такую возможность на CMS Joomla 1.5 (это относится и к новым версиям Joomla, проверял). Вот это я опишу.

Решение не моё, а взято с форума http://joomlaforum.ru/index.php/topic,293660.0.html, но там код был написан с ошибками, которые были найдены и исправлены.

Что необходимо для выполнения задачи?
1. CSS для слабовидящих (здесь это рассматриваться не будет)
2. Код смены CSS в заголовке сайта
3. Код в модуле

  1. Использовать сессии — пишется в базу
  2. Использовать куки — пишется в браузере, на стороне клиента

Я выбрал сессию, поэтому её и опишу.

Первое что надо сделать — найти в каком файле объявляется таблица стилей (css). Таблиц может быть несколько, выбирать нужно ту, которая описывает нужные нам стили и которую мы будем править, для слабовидящих.

Установка версии для слабовидящих на сайт Joomla

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

Тип: услуга

Состав работ:

  1. Создание полной резервной копии сайта (в целях безопасности)
  2. Установка шаблона для слабовидящих
  3. Установка кнопки (модуля) переключения версий
  4. Настройка стилей (модуля) переключения версий
  5. Тестирование и сдача работы

Объём работы: 3,5 нормо-часов

Стоимость: 4200 руб.

Срок: 2-3 рабочих дня

Для решения задачи необходимо:

  • доступ в панель администратора сайта с правами SuperUser
  • доступ в панель управления хостинга (или FTP)
Добавить комментарий