Версия для слабовидящих — различия между версиями

Материал из Школьный портал: справочника
Перейти к: навигация, поиск
(Текущая реализация)
(Текущая реализация)
Строка 2: Строка 2:
  
 
В настоящее время по запросу устанавливается модуль, реализующий версию для слабовидящих, обладающую следующими свойствами:
 
В настоящее время по запросу устанавливается модуль, реализующий версию для слабовидящих, обладающую следующими свойствами:
- крупный шрифт,
+
* крупный шрифт,
- высокий контраст,
+
* высокий контраст,
- отсутствие декоративных фоновых картинок,
+
* отсутствие декоративных фоновых картинок,
- подсказки о том, как увеличивать шрифт с клавиатуры и другими способами,
+
* подсказки о том, как увеличивать шрифт с клавиатуры и другими способами,
- резиновый макет,
+
* резиновый макет,
- независимость от текущей темы оформления,
+
* независимость от текущей темы оформления (независимый HTML/CSS. То есть все украшательства из текущей темы оформления для обычной версии не будут показаны),
- действует только для пользователей, перешедших по ссылке "Версия для слабовидящих"
+
* действует только для пользователей, перешедших по ссылке "Версия для слабовидящих". Остальные одновременно будут видеть обычную версию.
- действует на всём сайте пока не будет нажата ссылка "Вернуться к обычной версии" в шапке сайта
+
* действует на всём сайте пока не будет нажата ссылка "Вернуться к обычной версии" в шапке сайта
- сохраняется включенной при переходе между страницами и при закрытии/открытии браузера
+
* сохраняется включенной при переходе между страницами и при закрытии/открытии браузера
в версии 2015-06-07:
+
* панель управления видом версии для слабовидящих,
- добавлена панель управления видом версии для слабовидящих,
+
* 3 цветовых схемы на выбор,
- 3 цветовых схемы на выбор,
+
* 3 способа отображения изображений (цветные, ч/б, выключены),
- 3 способа отображения изображений (цветные, ч/б, выключены),
+
* убрать форматирование материалов (например, цвет или гарнитура шрифта),
- убрать форматирование материалов (например, цвет или гарнитура шрифта),
+
* подсказка по горячим клавишам для масштабирования страницы за ссылкой "Масштаб",
- подсказка по горячим клавишам для масштабирования страницы убрана под ссылку "Масштаб",
+
* настройки вида сохраняются при переходе между страницами и при закрытии/открытии браузера,
- настройки вида сохраняются при переходе между страницами и при закрытии/открытии браузера,
+
* усовершенствование CSS для оформления элементов страницы, свёрстанных в расчёте на цветное отображение (например, не допускается белое на белом).
- усовершенствование CSS для оформления элементов страницы, свёрстанных в расчёте на цветное отображение (например, не допускается белое на белом).
+
 
в версии 2015-06-10:
 
в версии 2015-06-10:
- разрядка межбуквенная
+
* межбуквенная разрядка
- междустрочный интервал, 3 варианта
+
* междустрочный интервал, 3 варианта
- усовершенствование CSS, в том числе для альтернативных фонов
+
* усовершенствование CSS, в том числе для альтернативных фонов
  
 
Пример: http://school57.tgl.ru
 
Пример: http://school57.tgl.ru

Версия 00:43, 22 июня 2015

Текущая реализация

В настоящее время по запросу устанавливается модуль, реализующий версию для слабовидящих, обладающую следующими свойствами:

  • крупный шрифт,
  • высокий контраст,
  • отсутствие декоративных фоновых картинок,
  • подсказки о том, как увеличивать шрифт с клавиатуры и другими способами,
  • резиновый макет,
  • независимость от текущей темы оформления (независимый HTML/CSS. То есть все украшательства из текущей темы оформления для обычной версии не будут показаны),
  • действует только для пользователей, перешедших по ссылке "Версия для слабовидящих". Остальные одновременно будут видеть обычную версию.
  • действует на всём сайте пока не будет нажата ссылка "Вернуться к обычной версии" в шапке сайта
  • сохраняется включенной при переходе между страницами и при закрытии/открытии браузера
  • панель управления видом версии для слабовидящих,
  • 3 цветовых схемы на выбор,
  • 3 способа отображения изображений (цветные, ч/б, выключены),
  • убрать форматирование материалов (например, цвет или гарнитура шрифта),
  • подсказка по горячим клавишам для масштабирования страницы за ссылкой "Масштаб",
  • настройки вида сохраняются при переходе между страницами и при закрытии/открытии браузера,
  • усовершенствование CSS для оформления элементов страницы, свёрстанных в расчёте на цветное отображение (например, не допускается белое на белом).

в версии 2015-06-10:

  • межбуквенная разрядка
  • междустрочный интервал, 3 варианта
  • усовершенствование CSS, в том числе для альтернативных фонов

Пример: http://school57.tgl.ru

Пример версии 2015-06-07: http://school46.tgl.ru

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

Простое временное решение (без патча)

В текущей версии (5.2.1) задачу можно решить, разместив в произвольном блоке следующий HTML-код.

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

<style type="text/css">#sp_zoom button { padding: 4px 10px; font-size: 120%; }</style>

<script src="/sp/jquery/js/jquery-1.4.4.min.js" type="text/javascript"></script>

<script>
var sp_current_zoom = 1.0;

function sp_zoom()
{
    $('body').css({
		zoom: sp_current_zoom,
		transform: 'scale(' + sp_current_zoom + ')',
		'transform-origin': '0 0',

		'-moz-transform':        'scale(' + sp_current_zoom + ')',
		'-moz-transform-origin': '0 0',

		'-webkit-transform':     'scale(' + sp_current_zoom + ')',
		'-webkit-transform-origin': '0 0',

        '-o-transform-origin': '0 0'
    });
}

$(function(){
	$('#sp_zoom_plus').click(function()  { sp_current_zoom += 0.1; sp_zoom(); });
	$('#sp_zoom_minus').click(function() { sp_current_zoom -= 0.1; sp_zoom(); });
	$('#sp_zoom_reset').click(function() { sp_current_zoom =  1;   sp_zoom(); });
});

</script>

<div style="text-align: center; margin: 12px 20px; font-size: 12pt; background-color: #fff; color: #000; padding: 8px; border: 2px solid black;">
<div style="font-weight: bold; margin-bottom: 3px;">Версия для слабовидящих.</div>
Размер шрифта:
<div style="margin-top: 4px" id="sp_zoom">
<button type="button" id="sp_zoom_plus">+</button>
<button type="button" id="sp_zoom_minus">−</button>
<button type="button" id="sp_zoom_reset">Сброс</button>
</div>
</div>

Руководство в картинках:

Customblock.png

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

  • Ctrl +
  • Ctrl −
  • Ctrl и вращение колеса мыши
  • Жест "свести/раздвинуть 2 пальца" на сенсорных экранах или тач-панелях

Также можно рассказать, что в ОС Microsoft Windows, начиная с 7, есть прекрасная полноэкранная лупа, вызываемая сочетанием клавиш Win +/− (соответственно увеличить и уменьшить). Она сделает весь компьютер доступным, а не только один ваш портал.

В Apple Mac OS X лупу включает Ctrl и вращение колеса мыши.

Для браузеров есть расширения, решающие задачу доступности сайтов, например: