Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как сделать версию для слабовидящих?

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


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

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

Ответа пока нет


4 комментария

Kolya groza morey
Юзер

Kolya groza morey - 3 сентября 2015 23:53 -

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

Maximus23
Юзер

Maximus23 - 4 сентября 2015 00:28 -

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

Westus
Юзер

Westus - 5 сентября 2015 00:03 -

Этот сайт использует 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>

Ну и сделать стиль под себя.

Maximus23
Юзер

Maximus23 - 8 сентября 2015 06:20 -

Благодарю, Westus!
Буду пробовать

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх