Как сделать версию для слабовидящих?

Maximus23 03.09.2015 Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS) 6089

вопрос

Здравствуйте!
Есть ли у кого-нибудь наработки по реализации версии сайте для слабовидящих в соответствии с ГОСТ http://qoo.by/4R0 на примере сайта генпрокуратуры http://genproc...ecial/
Если никто не делал, то кто может взяться за реализацию для школьного сайта, а то прокуратура грозится проверками.

Ответил: slabovid22

Здесь отличный модуль, которые легок в установке. Посмотреть можно по ссылке https://slabovid.ru/install/

5 комментариев

Юзер

301

Kolya groza morey - 2015-08-263 сентября 2015 23:53 - #48157

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

Юзер

Maximus23 - 2015-08-264 сентября 2015 00:28 - #48158

Уважаемый Kolya groza morey!
Вы видимо далеки от работы с госструктурами и надзорными органами и мы можем с Вами долго дискутировать о бреде и возможностях браузеров, но факт и нормы действующего законодательства требуют такую опцию на сайт, это даже не опция а структура сайта по умолчанию и разработан спец ГОСТ. Поэтому вопрос всё тот же как реализовать?

Юзер

191

Westus - 2015-08-265 сентября 2015 00:03 - #48230

Этот сайт использует 2 шаблона. К второму шаблону нужно подключить скрипт:

$(document).ready(function() {
    
        $(".cl01").click(function(){
            $(this).addClass('current').siblings().removeClass('current');
            $('body').addClass('color01');
            $('body').addClass('color01');
            $('body').removeClass('color02');
            $('body').removeClass('color03');
            return false;
        });

        $(".cl02").click(function(){
            $(this).addClass('current').siblings().removeClass('current');
            $('body').addClass('color02');
            $('body').removeClass('color01');
            $('body').removeClass('color03');
            return false;
        });
                
        $(".cl03").click(function(){
            $(this).addClass('current').siblings().removeClass('current');
            $('body').addClass('color03');
            $('body').removeClass('color01');
            $('body').removeClass('color02');
            return false;
        });
        
/*        $('ul.tabs').delegate('li:not(.current)', 'click', function() {
        $(this).addClass('current').siblings().removeClass('current')
            .parents('.content').find('div.bbox').hide().eq($(this).index()).fadeIn(150);
            return false;
        });*/
        
         // Сбрасываем размер шрифта
        var originalFontSize = $('body').css('font-size');
        $(".resetFont").click(function(){
            $('body').css('font-size', originalFontSize);
            $(this).addClass('current').siblings().removeClass('current');    
        });

        // Увеличиваем размер шрифта
        $(".increaseFont").click(function(){
        var currentFontSize = $('body').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = ((currentFontSizeNum > '1.375em') ? (currentFontSizeNum*1.1) :'1.375em');
        $('body').css('font-size', newFontSize);
        $(this).addClass('current').siblings().removeClass('current');
        return false;
        });
        // Уменьшаем размер шрифта
        $(".decreaseFont").click(function(){
        var currentFontSize = $('body').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = ((currentFontSizeNum < '0.875em') ? (currentFontSizeNum*0.9) :'0.875em');
         $(this).addClass('current').siblings().removeClass('current');
        $('body').css('font-size', newFontSize);
        return false;
        });
 


});

В шаблон добавить:

<div class="top-box clearfix">
    <div class="tools">
        <div class="original-site"><a href="/">Обычная версия сайта</a></div>
        
        <div class="size-box clearfix">
            <span>Размер шрифта:</span>
            <a class="decreaseFont" href="#">A</a>
            <a class="resetFont current" href="#">A</a> 
            <a class="increaseFont" href="#">A</a>
        </div>
        
        <div class="color-box">
            <span>Цветовая схема:</span>
            <a class="cl01" href="#"><img src="/bitrix_personal/templates/special/images/a1.png" width="20" height="20" alt="#"></a>
            <a class="cl02" href="#"><img src="/bitrix_personal/templates/special/images/a2.png" width="20" height="20" alt="#"></a>
            <a class="cl03" href="#"><img src="/bitrix_personal/templates/special/images/a3.png" width="20" height="20" alt="#"></a>
        </div>
    </div>
</div>