рони,
прищурьте глаза и попробуйте прочесть список. :) Нельзя так делать, это равноценно как построить для колясочника пандус с препятствиями. |
laimas,
сменил расцветочку. |
Цитата:
Кстати, такой цвет как подобран, как раз для слабовидящего, это приговор. |
В большинстве согласен с laimas.
Можно еще добавить, что совсем слабовидящие пользуются экранными читалками, для использования которой сайт совсем никуда не годится. (Нужны атрибуты aria). А есть люди которые не могут в силу разных причин пользоваться мышью, и используют клавиатуру, для перемещения по сайту. И для них совсем никуда не годится делать кнопки с помощью div, без задания реакцию на нажатие кнопок.... Но как решение задачки, вот такой код <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #fff;
color: #000;
font: 400 1rem/1.25rem sans-serif;
}
.blok {
max-width: 480px;
}
.knopka {
width: 100%;
padding: 5px;
border: 1px solid #8b00ff;
text-align: center;
margin: 10px;
cursor: pointer;
text-decoration: none;
color: #9400d3;
}
.knopka:hover {
width: 100%;
padding: 5px;
border: 1px solid #000;
text-align: center;
margin: 10px;
cursor: pointer;
text-decoration: none;
color: #8b00ff;
}
.vibran{
text-decoration: underline;
color: #8b00ff;
}
</style>
<style>
.fon{
background-color: #fff;
color: #000;
}
.chrift_osnovnoi{
font-family: sans-serif;
}
.razmer_osnovnoi{
font-size: 1rem;
}
</style>
<script>
let lnkfon = null;
let lnkchrift = null;
let lnkrazmer = null;
let mystyle = {fon: 'base', chrift: 'base', razmer: 'base'}
let head = document.querySelector('head')
function store () {
localStorage.mystyle = JSON.stringify(mystyle)
}
function setstyle (style) {
const est = document.createElement('style');
est.innerHTML = style;
head.appendChild (est);
return est;
}
function changefon (val) {
if (lnkfon) {
head.removeChild (lnkfon)
lnkfon = null
}
if (val == 'drugoi') {
lnkfon = setstyle('.fon{background-color: #000;color: #fff;}')
}
mystyle.fon = val
store()
}
function changechrift (val) {
if (lnkchrift) {
head.removeChild (lnkchrift)
lnkchrift = null
}
if (val == 'drugoi') {
lnkchrift = setstyle('.chrift{font-family: serif;}')
}
mystyle.chrift = val
store()
}
function changerazmer (val) {
if (lnkrazmer) {
head.removeChild (lnkrazmer)
lnkrazmer = null
}
if (val == '15') {
lnkrazmer = setstyle('.chrift{font-size: 1.5rem;;}')
} else if (val == '20') {
lnkrazmer = setstyle('.chrift{font-size: 2rem;;}')
}
mystyle.razmer = val
store()
}
if (localStorage.mystyle) {
mystyle = JSON.parse(localStorage.mystyle)
if (mystyle.fon != 'base') changefon (mystyle.fon)
if (mystyle.chrift == 'base') changechrift (mystyle.chrift)
if (mystyle.razmer != 'base') changerazmer (mystyle.razmer)
}
</script>
</head>
<body class="fon chrift razmer">
<div class="blok">
<div class="knopka knopka1 vibran">Основной фон</div>
<div class="knopka knopka2">Смена фона</div>
<div class="knopka knopka3 vibran">Основной шрифт</div>
<div class="knopka knopka4">Другой шрифт</div>
<div class="knopka knopka5 vibran">Основной размер</div>
<div class="knopka knopka6">Увеличить размер * 1,5</div>
<div class="knopka knopka7">Увеличить размер * 2</div>
<div class="tekst"><br><br>
ОБ ОРГАНИЗАЦИИ<br><br>
Деятельность нашей организации направлена на оказание разного рода помощи малоимущим, социально незащищенным
слоям населения.
?<br><br>
На сегодняшний день открыты приюты, предназначенные для инвалидов и престарелых граждан, лиц, ведущих
бродяжнический образ жизни, а так же для людей, оставшихся без средств к существованию и не имеющих крова над
головой.<br>
ЦЕЛЬ ДЕЯТЕЛЬНОСТИ:<br><br>
минимализация бродяжничества в Новосибирске и Новосибирской области
ОСНОВНЫЕ ЗАДАЧИ:<br><br>
социальная и психологическая адаптация граждан через проживание в центре восстановления личности;<br>
восполнение жизненно важных потребностей;<br>
развитие в людях чувства сострадания, взаимовыручки, единства, милосердия, любви к ближним;<br>
восстановление социального статуса, восстановление социальных – трудовых навыков, трудоустройство.<br>
Я знаю, что есть люди, которым нужна помощь,<br>
и мы в силах оказать её.<br><br>
Директор АНО "ТВОЙ ДОМ"<br>
Наталья Петровна Першина
</div>
</div>
<script>
const body = document.querySelector("body");
const knopka1 = document.querySelector(".knopka1");
const knopka2 = document.querySelector(".knopka2");
const knopka3 = document.querySelector(".knopka3");
const knopka4 = document.querySelector(".knopka4");
const knopka5 = document.querySelector(".knopka5");
const knopka6 = document.querySelector(".knopka6");
const knopka7 = document.querySelector(".knopka7");
let fun_knopka1 = () =>{
changefon ('base')
knopka1.classList.add("vibran");
knopka2.classList.remove("vibran");
}
knopka1.addEventListener("click", fun_knopka1);
let fun_knopka2 = () =>{
changefon ('drugoi')
knopka1.classList.remove("vibran");
knopka2.classList.add("vibran");
}
knopka2.addEventListener("click", fun_knopka2);
let fun_knopka3 = () =>{
changechrift ('base')
knopka3.classList.add("vibran");
knopka4.classList.remove("vibran");
}
knopka3.addEventListener("click", fun_knopka3);
let fun_knopka4 = () =>{
changechrift ('drugoi')
knopka3.classList.remove("vibran");
knopka4.classList.add("vibran");
}
knopka4.addEventListener("click", fun_knopka4);
let fun_knopka5 = () =>{
changerazmer ('base')
knopka5.classList.add("vibran");
knopka6.classList.remove("vibran");
knopka7.classList.remove("vibran");
}
knopka5.addEventListener("click", fun_knopka5);
let fun_knopka6 = () =>{
changerazmer ('15')
knopka5.classList.remove("vibran");
knopka6.classList.add("vibran");
knopka7.classList.remove("vibran");
}
knopka6.addEventListener("click", fun_knopka6);
let fun_knopka7 = () =>{
changerazmer ('20')
knopka5.classList.remove("vibran");
knopka6.classList.remove("vibran");
knopka7.classList.add("vibran");
}
knopka7.addEventListener("click", fun_knopka7);
</script>
</body>
</html>
|
voraa,
как решение, это имеет большой минус потому, что такое сопровождать, так лучше повеситься. :) Всех этих fun_knopka и forEach не должно быть и близко. |
Где то я видел в инете готовое решение, разработанное в колабе с врачами, с уже подключенными библиотеками, чуть ли не texttospeech там был, стили подгружались из внешних файлов. Я думаю если от автора не требуется самописное решение, то лучше погуглить.
|
Вложений: 2
Спасибо за участие в обсуждение. Буду пробовать применить на свой проект.Рони как всегда отдельное спасибо. Сейчас начну делать то что ты предложил.
То что я выложил в код это был просто шаблон, я не могу весь когда выложить так как там черт ногу сломит. Я делаю сайт для благотворительно организации, бесплатно. По мере своих сил и умений, благо люди помогают, спасибо. И я читал и изучал вопрос что нужно и как нужно делать сайт для слабовидящих, там большая пачка ГОСТов Вот как предварительный вариант выглядит см. скриншоты. |
Ops,
Я видел эти решение они очень корявые, то есть если их вставлять то может все не очень хорошо местами выглядеть, проще саму попробовать, и тем более некоторые платные |
laimas,
то есть то что предложил voraa, лучше не пробовать использовать? |
Я понял что допустил ошибку когда предложил шаблон. Так как все было сделано для этого шаблона, но у меня при нажатие на кнопку много каких стилей будет меняться что бы подогнать верстку и что бы все выглядело хорошо.
Можно как то сделать что бы вот это функция (таких будет 5) записалась в localStorage и если мне что то потребуется изменить какие либо стили у какого либо блока я мог просто записать в эту функцию let ikonka_1 = () => {
shapka_versia_sv_nastroiki_ikonka_1.classList.add("podherkivanie");
shapka_versia_sv_nastroiki_ikonka_2.classList.remove("podherkivanie");
body.classList.add("style1");
body.classList.remove("style2");
shapka_versia_sv.classList.add("style1");
shapka_versia_sv.classList.remove("style2");
shapka_versia_sv_nastroiki.classList.add("shapka_versia_sv_nastroiki_teni");
navigatsia_osnovnoi_blok.classList.add("style1");
navigatsia_osnovnoi_blok.classList.remove("style2");
console.log("работает1");
}
shapka_versia_sv_nastroiki_ikonka_1.addEventListener("click", ikonka_1);
|
| Часовой пояс GMT +3, время: 06:18. |