Делаю сайт школы-интерната.  Понадобилось запилить версию сайта для слабовидящих, подумал минутку, для такой мелочной задачи искать готовое решение не комильфо. Итак, поехали. Гост ГОСТ Р 52872-2012, но носит он на сколько я понял рекомендательный характер. Решил заморочиться с реальным увеличением читабельности сайта в режиме версии для слабовидящих. 

Посмотреть можно на internat-maleta.r3l0c.name

  • Версия для слабовидащих сохраняется после перезагрузки страницы
  • Настройки просмотра версии сайта для слабовидящих сохраняются после перезагрузки страницы

Спойлер(под bootstrap встало как надо): 

Версия для слабовидящих на сайт
 
Скрины с сайта:

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

Алгоритм.

Есть кнопка «Версия для слабовидящих». По клику устанавливается кука и происходил релоад страницы. Дальше js проверяет наличие куки(on|off) и если режим включен-показывает блок. В блоке есть кнопки -размер текста, цветовая схема, показывать картинки или нет. По клику на кнопки размера текста и цветовой схемы js берет стили из этих кнопок, и присваивает описанным в отдельном селекторе элементам. Код.

Кнопка «Версия сайта для слабовидящих»

<a href="[_[~[_[*id]]]]#" id="sv_on" class="btn btn-default"><strong>Версия для слабовидящих</strong></a>

Блок с выбором режимов просмотра

    
    
<a href="web/версия-сайта-для-слабовидящих-на-js(jquery).html#" id="sv_on" class="btn btn-default">
    <strong>Версия для слабовидящих</strong>
</a>

    
<div class="sv_settings text-center" id="sv_settings">
    <span>Размер шрифта
        <span class="fs-outer">
            <button class="btn btn-default fs-n" id="fs-n">А</button>
            <button class="btn btn-default fs-m" id="fs-m">А</button>
            <button class="btn btn-default fs-l" id="fs-l">А</button>
        </span>
    </span>

    <span class="mgl20">Цветовая схема
        <span class="cs-outer">
            <button class="btn btn-default cs-bw" id="cs-bw">А</button>
            <button class="btn btn-default cs-wb" id="cs-wb">А</button>
            <button class="btn btn-default cs-bb" id="cs-bb">А</button>
            <button class="btn btn-default cs-gb" id="cs-gb">А</button>
            <button class="btn btn-default cs-yg" id="cs-yg">А</button>
        </span>
    </span>

    <span class="mgl20">Изображения
        <span class="img-outer">
            <button class="btn btn-default" id="img-onoff"><span class="glyphicon glyphicon-picture"></span><span id="img-onoff-text"> Отключить</span></button>
        </span>
    </span>
</div>

Стили

    
.sv_settings{
    display: none;
    padding: 10px;
    min-height: 40px;
    font-size:22px;
    color:#333;
    background: white;
}
.sv_settings *{
    font-weight:bold;
}

.fs-outer button{
 display:inline-block;  
 background:white !important;
 color:black !important; 
 height:35px;
 width:35px;
 padding: 0;
}
.fs-n{
    font-size:14px;
}
.fs-m{
    font-size:18px;
}
.fs-l{
    font-size:22px;
}

.cs-outer button{
display:inline-block;  
height:35px;
width:35px;
padding: 0;
}

.cs-bw, .cs-bw:focus, .cs-bw:hover{
    color:black !important;
    background:white !important;
}
.cs-wb, .cs-wb:focus, .cs-wb:hover{
    color:white !important;
    background:black !important;
}
.cs-bb, .cs-bb:focus, .cs-bb:hover{
    color: #063462 !important;
    background: #9dd1ff !important;
}
.cs-gb, .cs-gb:focus, .cs-gb:hover{
    color: #4d4b43 !important;
    background: #f7f3d6 !important;
}
.cs-yg, .cs-yg:focus, .cs-yg:hover{
    color: #a9e44d !important;
    background: #3b2717 !important;
}

Ну и собсно кучка JS кода с использованием JQuery

    
$(document).ready(function(){
//sv_settings
var selector='#content, #content *, .navbar, .navbar *, .nav, .nav*, .container,  .container *, body';
    //-------------
    $('.fs-outer button').click(function(){
        $(selector).css('font-size',$(this).css('font-size'));
        $.cookie('font-size',$(this).attr('id'));
        $('.fs-outer button').removeClass('active');
        $(this).addClass("active");

    });
    
    $('.cs-outer button').click(function(){
        $(selector).css('color',$(this).css('color'));
        $(selector).css('background',$(this).css('background'));
        $.cookie('cs',$(this).attr('id'));
        $('.cs-outer button').removeClass('active');
        $(this).addClass("active");

    });
    
    $('.img-outer button').click(function(){
        if ($.cookie('img')!='on'){
            $('img').css('display','none');
            $.cookie('img','on');
            $('#img-onoff-text').text(' Включить');
            $(this).addClass("active");
        } else
        {
            $('img').css('display','block');
            $.cookie('img','off');
            $('#img-onoff-text').text(' Выключить');
            $(this).removeClass("active");
        }
    });
    
    if ($.cookie('sv_on')=='true'){
        $('#sv_on').addClass('active');
        $('#sv_settings').css('display','block');
        if ($.cookie('font-size')!==null){
          $('#'+$.cookie('font-size')).click();
        }
        if ($.cookie('cs')!==null){
          $('#'+$.cookie('cs')).click();
        }
        
    }
    
    
    $('#sv_on').click(
    function(){
    if ($.cookie('sv_on')!='true'){
    $.cookie('sv_on', 'true');
    if ($.cookie('font-size')=="null"){
       $('.fs-n').click(); 
    }
    if ($.cookie('cs')=="null"){
       $('.cs-bw').click(); 
    }
    }
    else
    {
       $.cookie('sv_on', 'false'); 
    }
    location.reload();
    }
    );
    
});

На гитхабе: https://github.com/r3l0c/site-dlya-slabovidyashith/