Доброго времени! Согласно федеральному закону ФЗ-419 от 01.12.2014,
6. Порядок обеспечения условий доступности для инвалидов по зрению официальных сайтов федеральных органов государственной власти, органов государственной власти субъектов Российской Федерации и органов местного самоуправления в сети «Интернет» устанавливается уполномоченным Правительством Российской Федерации федеральным органом исполнительной власти.
поэтому гос. учреждениям нужны сайты с версией для слабовидящих.
Исходный код - скрипт юкоза, написанный на jquery - переработан, дополнен, отлажен и улучшен. Скрипт не требует jquery.
Файлы:
- special.js
- /css/special.css
- specialstyle1.css
- /css/specialstyle2.css
- /css/specialstyle3.css
- html-блок
Листинг файла special.js
function set_cookie (name, value, expires, path, domain, secure) {
document.cookie = name + '=' + escape(value) +
((expires) ? '; expires=' + expires : '') +
((path) ? '; path=' + path : '; path=/') +
((domain) ? '; domain=' + domain : '') +
((secure) ? '; secure' : '');
}
function get_cookie ( cookie_name ) {
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
if ( results )
return ( unescape ( results[2] ) );
else
return null;
}
function delete_cookie (cookie_name) {
document.cookie = cookie_name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
}
function fz419settings() {
set_cookie('fz419settings', 'enable', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
set_cookie('fz419font', '2', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
set_cookie('fz419color', '1', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
url = window.location.href;
location.replace(url.replace('#', ''));
}
function fz419fontsizeone(){
document.getElementById('fz419font1').className = 'fz419fontActive';
document.getElementById('fz419font2').className = '';
document.getElementById('fz419font3').className = '';
set_cookie('fz419font', '1', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
url = window.location.href;
location.replace(url.replace('#', ''));
}
function fz419fontsizetwo(){
document.getElementById('fz419font1').className = '';
document.getElementById('fz419font2').className = 'fz419fontActive';
document.getElementById('fz419font3').className = '';
set_cookie('fz419font', '2', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
url = window.location.href;
location.replace(url.replace('#', ''));
}
function fz419fontsizethree(){
document.getElementById('fz419font1').className = '';
document.getElementById('fz419font2').className = '';
document.getElementById('fz419font3').className = 'fz419fontActive';
set_cookie('fz419font', '3', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
url = window.location.href;
location.replace(url.replace('#', ''));
}
function fz419disableimage(){
var anchor = document.getElementById('fz419enableimage');
anchor.className = anchor.className.replace(/\bfz419imageActive\b/,'');
document.getElementById('fz419disableimage').className += ' fz419imageActive';
var images = document.getElementsByTagName('img');
for(i = 0; i < images.length; i++) {images[i].style.display='none';}
set_cookie('fz419img', 'imgnone', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
url = window.location.href;
location.replace(url.replace('#', ''));
}
function fz419enableimage(){
var anchor = document.getElementById('fz419disableimage')
anchor.className = anchor.className.replace(/\bfz419imageActive\b/,'');
document.getElementById('fz419enableimage').className += ' fz419imageActive';
var images = document.getElementsByTagName('img');
for(i = 0; i < images.length; i++) {
images[i].style.display='inherit';
images[i].className=images[i].className.replace(new RegExp('(?:^|\\s)'+ 'none' + '(?:\\s|$)'), ' ');
}
set_cookie('fz419img', 'yes', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
url = window.location.href;
location.replace(url.replace('#', ''));
}
function fz419color1(){
set_cookie('fz419color', '1', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
url = window.location.href;
location.replace(url.replace('#', ''));
}
function fz419color2(){
set_cookie('fz419color', '2', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
url = window.location.href;
location.replace(url.replace('#', ''));
}
function fz419color3(){
set_cookie('fz419color', '3', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
url = window.location.href;
location.replace(url.replace('#', ''));
}
function fz419reset(){
set_cookie('fz419settings', 'disable');
url = window.location.href;
location.replace(url.replace('#', ''));
}
// start main code
// get cookies
var fz419cookies = new Array();
fz419cookies['settings'] = get_cookie ('fz419settings');
fz419cookies['font'] = get_cookie ('fz419font');
fz419cookies['color'] = get_cookie ('fz419color');
fz419cookies['img'] = get_cookie ('fz419img');
if (fz419cookies['settings'] == '' || fz419cookies['settings'] == null || fz419cookies['settings'] == 'disable') {
// hide settings area
//jQuery('#fz419area').css({display:'none'});
document.getElementById('fz419area').style.display = 'none';
} else {
// if enabled
// show settings area and hide activation button
//jQuery('#enablefz419').css({display: 'none'});
document.getElementById('fz419enable').style.display = 'none';
//jQuery('#fz419area').css({display: 'block'});
document.getElementById('fz419area').style.display = 'block';
// disabling images if imgnone is set
if (fz419cookies['img'] == 'imgnone') {
// https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load
window.onload = function() {
//adding class none to all images
// https://stackoverflow.com/questions/6304233/adding-a-class-to-img-tags-using-javascript
var images = document.getElementsByTagName('img');
var i;
for(i = 0; i < images.length; i++) {images[i].className += ' none';}
document.getElementById('fz419disableimage').className += ' fz419imageActive';
var anchor = document.getElementById('fz419enableimage')
anchor.className = anchor.className.replace(/\bfz419imageActive\b/,'');
var anchors = document.getElementsByTagName('a');
for(i = 0; i < anchors.length; i++) {anchors[i].style.background = "none";}
var divs = document.getElementsByTagName('div');
for(i = 0; i < divs.length; i++) {divs[i].style.background = 'none';}
var spans = document.getElementsByTagName('span');
for(i = 0; i < spans.length; i++) {spans[i].style.background = 'none';}
var bodies = document.getElementsByTagName('body');
for(i = 0; i < bodies.length; i++) {bodies[i].style.background = 'none';}
var tables = document.getElementsByTagName('table');
for(i = 0; i < tables.length; i++) {tables[i].style.background = 'none';}
var tds = document.getElementsByTagName('td');
for(i = 0; i < tds.length; i++) {tds[i].style.background = 'none';}
var trs = document.getElementsByTagName('tr');
for(i = 0; i < trs.length; i++) {trs[i].style.background = 'none';}
var lis = document.getElementsByTagName('li');
for(i = 0; i < lis.length; i++) {lis[i].style.background = 'none';}
var uls = document.getElementsByTagName('ul');
for(i = 0; i < uls.length; i++) {uls[i].style.background = 'none';}
}
} else {
// set active anchor fz419disableimg
window.onload = function() {
document.getElementById('fz419enableimage').className += ' fz419imageActive';
var anchor = document.getElementById('fz419disableimage')
anchor.className = anchor.className.replace(/\bfz419imageActive\b/,'');
}
}
// set font size for all elements, fontsize2 is default
var font_arr = new Array();
font_arr['1'] = new Array();
font_arr['1']['fontsize'] = '14px';
font_arr['1']['lineheight'] = '30px';
font_arr['1']['h1'] = '22px';
font_arr['1']['h2'] = '18px';
font_arr['1']['h3'] = '16px';
font_arr['2'] = new Array();
font_arr['2']['fontsize'] = '18px';
font_arr['2']['lineheight'] = '35px';
font_arr['2']['h1'] = '26px';
font_arr['2']['h2'] = '22px';
font_arr['2']['h3'] = '20px';
font_arr['3'] = new Array();
font_arr['3']['fontsize'] = '24px';
font_arr['3']['lineheight'] = '45px';
font_arr['3']['h1'] = '32px';
font_arr['3']['h2'] = '28px';
font_arr['3']['h3'] = '26px';
// set all elements font-size: and line-height as it is in font_arr
if (fz419cookies['font'] == '1' || fz419cookies['font'] == '2' || fz419cookies['font'] == '3' ) {
var tags_arr = new Array ('body', 'div', 'p', 'span', 'h1', 'h2', 'h3', 'a', 'table', 'td', 'tr',
'tbody', 'thead', 'header', 'footer', 'section', 'li', 'ul');
var h_tags_arr = new Array ('h1', 'h2', 'h3');
var inner_tags_arr = new Array ('span', 'a'); //these tags may be inside h1, h2 tags
var fz419area_arr = new Array ('#fz419area', '#fz419font1', '#fz419font2', '#fz419font3', '#fz419disableimage',
'#fz419enableimage', '#fz419color1', '#fz419color2', '#fz419color3', '#fz419color4');
for(var i = 0; i < tags_arr.length; i++) {
var el_arr = document.getElementsByTagName(tags_arr[i]);
for(var j = 0; j < el_arr.length; j++) {
el_arr[j].style.fontSize = font_arr[fz419cookies['font']]['fontsize'];
el_arr[j].style.lineHeight = font_arr[fz419cookies['font']]['lineheight'];
}
}
// set h1, h2, h3 elements font-size
for (i=0; i < h_tags_arr.length; i++) {
var h_arr = document.getElementsByTagName(h_tags_arr[i]);
for(var j=0; j < h_arr.length; j++) {
h_arr[j].style.fontSize = font_arr[fz419cookies['font']]['h1'];
// set font-size for inner tags using inner_tags_arr
for(var k=0; k < inner_tags_arr.length; k++) {
if (h_arr[j].innerHTML.indexOf(inner_tags_arr[k]) !== -1) {
var el_arr = h_arr[j].getElementsByTagName(inner_tags_arr[k]);
for(var m=0; m < el_arr.length; m++) {
el_arr[m].style.fontSize = '';
el_arr[m].style.lineHeight = '';
}
}
}
}
//var h2_arr = document.getElementsByTagName('h2');
//for(var i = 0; i < h2_arr.length; i++) h2_arr[i].style.fontSize = font_arr[fz419cookies['font']]['h2'];
}
// same work with fz419area elements: font-size:18px; line-height:35px;
for(var i = 0; i < fz419area_arr.length; i++) {
var el_arr = document.getElementsByTagName(fz419area_arr[i]);
for(var j = 0; j < el_arr.length; j++) {
el_arr[j].style.fontSize = font_arr[fz419cookies['font']]['fontsize'];
el_arr[j].style.lineHeight = font_arr[fz419cookies['font']]['lineheight'];
}
}
// reset active class from all
var anchor = document.getElementById('fz419font1')
anchor.className = anchor.className.replace(/\bfz419fontActive\b/,'');
var anchor = document.getElementById('fz419font2')
anchor.className = anchor.className.replace(/\bfz419fontActive\b/,'');
var anchor = document.getElementById('fz419font3')
anchor.className = anchor.className.replace(/\bfz419fontActive\b/,'');
// set active class to enabled
if (fz419cookies['font'] == '1') document.getElementById('fz419font1').className += ' fz419fontActive';
if (fz419cookies['font'] == '2') document.getElementById('fz419font2').className += ' fz419fontActive';
if (fz419cookies['font'] == '3') document.getElementById('fz419font3').className += ' fz419fontActive';
}
if(fz419cookies['color'] == '1') {
document.write('<link type="text/css" rel="Stylesheet" href="/css/specialstyle2.css" />');
}
if(fz419cookies['color'] == '2') {
document.write('<link type="text/css" rel="Stylesheet" href="/css/specialstyle1.css" />');
}
if(fz419cookies['color'] == '3') {
document.write('<link type="text/css" rel="Stylesheet" href="/css/specialstyle3.css" />');
}
} //if enabled
document.write('<link type="text/css" rel="Stylesheet" href="/css/special.css" />');
В скрипте подключаются css, которые расположены в папке /css (в корне). При необходимости нужно исправить пути.
Листинг /css/special.css
#fz419area {
color: #FFF !important;
background: #7ABBEA !important;
padding: 10px !important;
z-index:1000 !important;
font-size:14px !important !important;
width:98% !important;
font-weight: bold !important;
text-align: center !important;
}
#fz419font1:hover, #fz419font2:hover, #fz419disableimage:hover, #fz419enableimage:hover {
cursor: pointer !important;
padding:5px !important;
background: #000000 !important;
color: #FFF !important;
}
a#fz419font1, a#fz419font2, a#fz419font3, a#fz419disableimage, a#fz419reset, a#fz419enableimage, a#fz419disableimage {
color:#fff !important;
}
a#fz419color1, a#fz419color3 {
color: #000 !important;
}
#fz419font3:hover {
cursor: pointer !important;
padding:8px !important;
background: #000000 !important;
color: #FFF !important;
}
#fz419font1 {
padding:5px !important;
font-size:14px !important;
font-weight: bold !important;
}
#fz419font2 {
padding:5px !important;
font-size:18px !important;
font-weight: bold !important;
}
#fz419font3 {
padding:8px !important;
font-size:23px !important;
font-weight: bold !important;
}
.none {display:none !important;}
.yesimg {display:block !important;}
#fz419disableimage, #fz419enableimage {
padding:5px !important;
font-size:14px !important;
font-weight: bold !important;
}
.fz419imageActive {
color:#ffffff !important;
fontSize:14px !important;
background:#000000 !important;
}
.fz419fontActive {color:#ffffff !important; background:#000000 !important;}
#fz419color1,#fz419color1:hover {margin-left:1%;background:#FFFFFF !important;width:1%;padding:7px;border:soild 1px black;font-weight: bold; cursor: pointer;}
#fz419color2,#fz419color2:hover {margin-left:1%;background:#000000!important;color:#fff !important;width:1%;padding:7px;border:soild 1px black;font-weight: bold; cursor: pointer;}
#fz419color3,#fz419color3:hover {margin-left:1%;background:#9DD1FF !important;width:1%;padding:7px;border:soild 1px black;font-weight: bold; cursor: pointer;}
#fz419reset {margin-left:1%;background:#003064 !important;color:#fff !important;width:1%;padding:7px;border:soild 1px black;font-weight: bold; cursor: pointer;}
#fz419reset:hover {color:#E2E2E2 !important;}
.eye {background:none !important;display:inline-block;margin-right:25px;word-wrap: normal;}
.fz419panel {background: #333;}
.fz419button {border: 0;padding: 0 15px;background:none;font-size:1.2em; color:#fff;}
@font-face{
font-family: 'FontAwesome';
src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.eot?v=4.6.2');
src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.eot?#iefix&v=4.6.2')
format('embedded-opentype'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.woff2?v=4.6.2')
format('woff2'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.woff?v=4.6.2')
format('woff'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.ttf?v=4.6.2')
format('truetype'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.svg?v=4.6.2#fontawesomeregular')
format('svg');
font-weight: normal;
font-style: normal;
}
.fa {font-family: 'FontAwesome'; margin-right:8px;}
.fz419eye-icon:before {content:"\f06e";}
.fz419eye-icon-slash:before {content: "\f070";}
Листинг /css/specialstyle1.css
body {
background-color: #000 !important;
background: #000 !important;
}
a, p, span, li, ul, td, tr, table, div {
color: #fff !important;
}
p a, span a, li a, ul a, td a, tr a, table a, div, div a {
color: #fff !important;
}
header, footer, #header, #footer, #content, #body, div, span, td, section, header, aside, h1, h2, h3, h4, h5 {
background: #000 !important; color: #fff !important;
}
div img, span img {display:inline;}
a {
background: none !important;
}
Листинг /css/specialstyle2.css
body {
background-color: #ffffff !important;
background: #ffffff !important;
}
a, p, span, li, ul, td, tr, table, div {
color: #000 !important;
}
p a, span a, li a, ul a, td a, tr a, table a, div, div a {
color: #000 !important;
}
header, footer, #header, #footer, #content, #body, div, span, td, section, header, aside, h1, h2, h3, h4, h5 {
background: #ffffff !important; color: #000 !important;
}
a {
background: none !important;
}
div img, span img {display:inline;}
Листинг /css/specialstyle3.css
body {
background-color: #9DD1FF !important;
background: #9DD1FF !important;
}
a, p, span, li, ul, td, tr, table, div {
color: #063462 !important;
}
p a, span a, li a, ul a, td a, tr a, table a, div, div a {
color: #063462 !important;
}
header, footer, #header, #footer, #content, #body, div, span, td, section, header, aside, h1, h2, h3, h4, h5 {
background: #9DD1FF !important; color: #063462 !important;
}
div img, span img {display:inline;}
a {
background: none !important;
}
Листинг html-,блока
<div id="fz419area" style="display:none;">
<div class="eye">
Размер шрифта: <a onclick="fz419fontsizeone();" id="fz419font1">A</a> <a onclick="fz419fontsizetwo();" id="fz419font2">A</a> <a onclick="fz419fontsizethree();" id="fz419font3">A</a>
</div>
<div class="eye">Изображения<br />
<a onclick="fz419disableimage();" id="fz419disableimage">Выключить</a>
<a onclick="fz419enableimage();" id="fz419enableimage">Включить</a>
</div>
<div class="eye">
Цвет сайта <a onclick="fz419color1();" id="fz419color1">Ц</a> <a onclick="fz419color2();" id="fz419color2">Ц</a> <a onclick="fz419color3();" id="fz419color3">Ц</a>
</div>
<a onclick="fz419reset();" id="fz419reset"><i class="fa fz419eye-icon-slash"></i>обычная версия сайта</a>
</div>
Для работы скрипта необходимо добавить html-блок на страницы сайта, подключить special.js, указать правильные пути к файлам css в файле special.js
Иконка глаза - fontawesome http://fontawesome.io - подключается в special.css,