Версия для слабовидящих через общие настройки  не работает - Вопрос от Евгения Калараш - uВопросы

Версия для слабовидящих через общие настройки не работает – Вопрос от Евгения Калараш – uВопросы

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

Хорошего эффекта можно добиться

без исправления верстки всего сайта

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


Такая панель хорошо реализована на уже упоминавшемся выше сайте ПФРФ.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сейчас ищут техподдержку:  Как можно связаться с путиным по интернету

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

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

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

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

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

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

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

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

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

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

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

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


На некоторых сайтах хорошо реализована панель для настроек (

) или адаптивная версия (

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

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

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

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

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

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

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

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

Версия для слабовидящих через общие настройки не работает – вопрос от евгения калараш – uвопросы

Здравствуйте! Версия для слабовидящих через общие настройки  на сайте нашей образовательной организации  не работает. Галочку убрала в окошке – включать при загрузке, пробовала через другой браузер заходить на сайт, кнопка не активна. Прошу оказать помощь. Спасибо.

Сейчас ищут техподдержку:  Не можете войти в админку WordPress? (6 способов решить эту проблему)

Версия сайта для слабовидящих не работает – вопрос от олег кочетов – uвопросы

На каких страницах не работает? На главной работает. С шаблона удалить код:

<style>
#hpvgd,.h-mdiv,.h-mdiv2,.h-ldiv,.h-rdiv {background:#EAEAEA; color:#6D6D6D;}
#hpvgd {width:100%; z-index:100; width:100%; border-bottom:2px solid rgb(230,230,230);}
.h-mdiv {display:none; position:relative; margin:auto; text-alegn:center;}
.h-mdiv2 {display:none; position:fixed; margin:auto; text-alegn:center; width:400px; height:200px;}
.h-ldiv {float:left; padding:7px 10px 7px 0px;}
.h-rdiv {position:absolute; top:7px; right:0px; text-align:right;}
.h-ni {display:none !important;}
a.hcmaf {color:red; margin-left:5px; font-size:20px; font-weight:bold;}
a.h-anl {color:#2a72cc;}
a.h-al {color:#ED664B;}
.h-fi {font-weight:bold; border-radius:50%; padding:0px 8px; margin-right:5px; font-size:19px;}
.h-background-1 {color:#fff !important; background:#000 !important;}
.h-background-2 {color:#000 !important; background:#fff !important;}
</style>
<script src=”/js/uhpv-full.min.js”></script>
<script>
var uhe = 2,
lng = ‘ru’,
has = 0,
imgs = 1,
bg = 1,
hwidth = 0,
bgs = [‘1′,’2’],
fonts = [’17’,’19’,’21’];
$(document).ready(function(){uhpv(has)});
</script>

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

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

Завершение

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

P.s. Берегите зрение.

Кнопка версия для слабовидящих не работает и не увеличивает – вопрос от марина берман – uвопросы

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

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

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

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

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

Настройка

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

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

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

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

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

Сейчас ищут техподдержку:  Служба поддержки Яндекс Такси для водителей и клиентов

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

Подготовка…

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

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

Положение кнопки

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

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

Цвет для кнопки

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

Шрифт

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

В моём случае я выбрал 2 размера, это 20 пикселей и 24 пикселя. Что-бы выбрать несколько вариантов одновременно, нажмите клавишу Strg на клавиатуре и мышкой на размеры которые хотите что-бы отображались в панели для слабовидящих.

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

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

Заключение

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

, при поддержке ЦБРФ.

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

Это, например:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

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

Adblock
detector