Які внести правки на сайт, щоб він відповідав вимогам для людей з порушенням зору?
Існує така цікава штука, як "ДСТУ ISO/IEC 40500:2015 “Інформаційні технології. Настанова з доступності веб-контенту W3C (WCAG) 2.0”". Нажаль у вільному доступі саме цього документу я не знайшов та стало зрозуміло наступне:
- Веб-сайт має бути розроблений згідно специфікації w3.org.
- Веб-сайт має містити функціонал для відображення інформації людям із погіршенням зору.
- Інші норми, які регулють створення офіційних веб-сайтів.
Мене цікавить лише другий пункт, тому що веб-сайт по замовчуванню валідний але функціоналу для користування людям з погіршенням зору нажаль немає. Тому було вирішине швиденько зробити універсальне рішення на js(jquery) та css для можливості використання в будь-якому проекті.
Результат функіоналу:
- Монохромний режим відображення
- Збільшення та зменшення об'єктів
Реалізація функціоналу:
Звичайна вєрстка для відображення кнопочки та вспливаючого меню з використанням bootstrap. Даний код можна розмістити в любе зручне місце для коректного відображення. На превью запису - зображення містить саме цей код
<div class="vision-mode">
<button data-vision="mono" data-placement="left" data-toggle="tooltip" title="Версія для людей порушеннями зору" class="btn btn-outline-primary btn-sm"><i class="fa fa-eye"></i></button>
<div class="nav-zoom">
<button data-vision="mono" class="btn-link btn"><i class="fa fa-paint-brush"></i> Монохром</button>
<button data-vision="plus" class="btn-link btn"><b>A+</b> Збільшити</button>
<button data-vision="minus" class="btn-link btn"><b>A-</b> Зменшити</button>
<button data-vision="reset" class="btn-link btn text-center"><small>Скинути налаштування</small></button>
</div>
</div>
Трішки стилів, щоб все було гарно.
.vision-mode {
position:relative
}
.vision-mode:hover > .nav-zoom {
display: block;
opacity: 1;
transition: all .4s ease;
}
.vision-mode .nav-zoom {
position: absolute;
top: 100%;
right: 0px;
background: #fff;
border: 1px solid #ddd;
z-index: 1050;
min-width: 150px;
display:none;
}
.vision-mode .nav-zoom .btn {
width: 100%;
text-align: left;
}
body.vision img , body.vision svg{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
body.vision * {
color: #000000 !important;
font-weight: 700;
border-radius: 0 !important;
border-color: #000 !important;
-webkit-transition: 0s ease-in-out;
-moz-transition: 0s ease-in-out;
-ms-transition: 0s ease-in-out;
-o-transition: 0s ease-in-out;
transition: 0s ease-in-out;
fill: #000 !important;
background: #fff !important;
}
.btn-link {
color: #82ad2f;
}
.btn-link:hover {
color: #373737;
}
.vision-mode .nav-zoom .btn-link:last-child {
display: none;
}
Jquery код, який робіть всю магію. За мету я також ставив використання localStorage, щоб юзер обравши параметри міг переходити по сторінкам.
var zoomLevel = 1;
var updateZoom = function(zoom, set) {
if(set){
zoomLevel = zoom;
}else{
zoomLevel += zoom;
}
$('body').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')' });
return zoomLevel;
};
var vmono = localStorage.getItem('v-mono'),
vzoom = localStorage.getItem('v-zoom');
if(vmono && vmono == 'true'){
$('body').addClass('vision');
$('[data-vision="reset"]').addClass('d-block');
}else if(vzoom){
updateZoom(vzoom, true);
$('[data-vision="reset"]').addClass('d-block');
}
$('[data-vision]').on('click', function(e){
e.preventDefault();
var cur_zom = '';
if($(this).attr('data-vision') == 'mono'){
if(!$('body').hasClass('vision')){
$('body').addClass('vision');
localStorage.setItem('v-mono','true');
$('[data-vision="reset"]').addClass('d-block');
}else{
$('body').removeClass('vision');
localStorage.removeItem('v-mono');
}
}else if($(this).attr('data-vision') == 'plus'){
cur_zom = updateZoom(0.1, false);
$('[data-vision="reset"]').addClass('d-block');
if(cur_zom == 1){
localStorage.removeItem('v-zoom');
}else{
localStorage.setItem('v-zoom', cur_zom);
}
}else if($(this).attr('data-vision') == 'minus'){
cur_zom = updateZoom(-0.1, false);
$('[data-vision="reset"]').addClass('d-block');
if(cur_zom == 1){
localStorage.removeItem('v-zoom');
}else{
localStorage.setItem('v-zoom', cur_zom);
}
}else{
$('body').removeClass('vision');
localStorage.removeItem('v-zoom');
localStorage.removeItem('v-plus');
localStorage.removeItem('v-minus');
$('body').css({ zoom: 1, '-moz-transform': 'scale(' + 1 + ')' });
$('[data-vision="reset"]').removeClass('d-block');
}
});
Код максимально простий та читабельний, тому описувати тут немає що.