Пишем версию сайта для слабовидящих

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

~~ГОСТ Р 52872-2007~~

Теперь ГОСТ изменился: ГОСТ Р 52872-2012

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

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

Для изменения размера шрифта в код страницы добавлен следующий текст:


<style type="text/css">
#size1
{
   font-size:15px;
}
#size2
{
   font-size:20px;
}
#size3 {
   font-size:25px;
}
</style>
<script>cur_style=1;</script>
<strong>РАЗМЕР ШРИФТА</strong>:
<a href="#" name="re_size" onClick="document.getElementById('size'+cur_style).id='size1'; cur_style=1;" style="font-size:15px">A</a>
<a href="#" name="re_size" onClick="document.getElementById('size'+cur_style).id='size2'; cur_style=2;" style="font-size:20px">A</a>
<a href="#" name="re_size" onClick="document.getElementById('size'+cur_style).id='size3'; cur_style=3;" style="font-size:25px">A</a>

Далее нам нужно вставить между тегами <div id=»size1» name=»sf«></div> текст,размер которого требуется изменить. Сохранение размера шрифта после перезагрузки страницы делать не стал,было лень.

Далее поискав по интернету способы «окрашивания» в черно-белый цвет всех картинок на сайте через CSS, на сайте http://www.howtomake.com.ua/demo/krossbrauzernye-pravila-css3-demo нашел нужную мне информацию. Для этого в стилях для тэга img нужно прописать:

img {
   filter: grayscale(100%);
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

Но тогда получаем полную перекраску изображений на сайте. В итоге была найдена реализация php скрипта который мог бы переключать стили и запоминать их:

<?php
header("Content-type: text/css; charset: UTF-8");
$numberoftemplates = 2;

if (isset($_GET['template'])) {
    $template = $_GET['template'];
    if ((!is_numeric($template)) || ($template > $numberoftemplates) || ($template < 0)) { $template = 1; } else { $template = round($template); } } else { $template = 1; } //вывод ошибок, если нужен error_reporting(E_ALL); ini_set(‘display_errors’, 1); //template variables $css = array( 'header-background' => array(
                             2 => 'filter: grayscale(100%);
                                   -webkit-filter: grayscale(100%);
                                   -moz-filter: grayscale(100%);
                                   -ms-filter: grayscale(100%);
                                   -o-filter: grayscale(100%);
                                   filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);', 
                             1 => '', 
));
echo 'img{';
echo $css['header-background'][$template]; 
echo '};';

?>

Ну и в индексном файле добавлена ссылка на этот файл


<link rel="stylesheet" href="css/style.php<?php echo $template;?>" type="text/css" media="screen" />

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

<p id="switcher">
    <a href="index.php?template=2">ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ</a><br/>
    <a href="index.php?template=1">ОБЫЧНАЯ ВЕРСИЯ</a>
</p>

Ну и сам сайт,где все это используется:

df.tutaev.ru

НОВАЯ СТАТЬЯ НА ЭТУ ТЕМУ