Создание версии сайта для слабовидящих в WordPress — это важный шаг к удобству и доступности вашего сайта для всех пользователей. Особенно это актуально для тех, у кого возраст сказывается на зрении.
Оптимальный размер шрифта имеет большое значение для комфортного чтения контента. Слишком мелкий шрифт может создать неудобства и затруднить восприятие информации, а слишком большой шрифт может быть не всем по вкусу.
Для обеспечения комфортного чтения слабовидящими пользователями, мы создадим специальную версию сайта. По сути, это будет обычный переключатель размера шрифта. Слабовидящие пользователи могут увеличивать текст по своему усмотрению для более удобного чтения.
Версия для слабовидящих WordPress
Мы реализуем функцию, основанную на темной теме для сайта, которая позволит нам изменять размер шрифта и другие элементы, чтобы обеспечить лучшую читаемость для слабовидящих.
Этот способ не ограничивается только WordPress — он будет работать на любом сайте, так как использует скрипт переключателя, который сохраняет выбранные настройки даже после перезагрузки страницы или переходов по сайту.
Это делает функцию удобной и применимой в различных ситуациях. Мы добавим новый класс к элементу Body, через который будем управлять стилями для улучшения читаемости.
Шаг 1: Подключение скрипта
Для начала нам необходимо подключить скрипт к WordPress. Есть специальная функция, которая позволяет это сделать правильно.
Также вы можете добавить в файл footer.php (нижнюю часть страницы), но это следует использовать только в крайних случаях.
<script>
// скрипт переключения размера шрифта
const wsfontModeToggle = document.getElementById('font-mode-toggle');
const body = document.querySelector('body');
if (localStorage.getItem('font-mode') === 'true') {
body.classList.add('font-mode');
}
function wstoggleFontMode() {
if (body.classList.contains('font-mode')) {
body.classList.remove('font-mode');
localStorage.setItem('font-mode', 'false');
} else {
body.classList.add('font-mode');
localStorage.setItem('font-mode', 'true');
}
}
wsfontModeToggle.addEventListener('click', wstoggleFontMode);
</script>
Шаг 2: Вывод переключателя
Нам необходимо вывести наш переключатель в том месте сайта, где вы хотите его увидеть. Это может быть в верхнее меню, в сайдбаре, внутри статьи или где угодно.
В зависимости от темы и структуры сайта, определите оптимальное место для размещения переключателя, чтобы пользователи могли легко находить и использовать его.
В этом коде SVG — это иконка «глаз». Как в демо просмотре.
<div id="font-mode-toggle" data-ws-tooltip="Версия для слабовидящих"> <svg viewBox="0 0 32 19" xmlns="http://www.w3.org/2000/svg"><path d="M31.5 9.1c-.3-.4-7-8.9-15.5-8.9S.8 8.8.5 9.1c-.2.2-.2.5 0 .7.3.4 7 8.9 15.5 8.9s15.2-8.5 15.5-8.9c.2-.1.2-.5 0-.7zm-15.4 8.2c-4.2 0-7.7-3.4-7.7-7.7 0-4.2 3.4-7.7 7.7-7.7s7.7 3.4 7.7 7.7c0 4.3-3.4 7.7-7.7 7.7zM1.7 9.5c1-1.2 4.5-5 9.1-6.9-2.1 1.6-3.5 4.1-3.5 7 0 2.6 1.1 4.9 2.9 6.5-4.3-2-7.5-5.5-8.5-6.6zm20.7 6.3C24 14.2 25 12.1 25 9.6c0-2.7-1.2-5.2-3.2-6.8 4.3 2 7.5 5.5 8.5 6.6-1 1.2-3.9 4.4-7.9 6.4z" class="st0"/><path d="M16.1 6c-.2 0-.3 0-.5.1.1.3.3.6.3.9 0 1-.8 1.8-1.8 1.8-.5 0-1-.2-1.3-.5-.2.5-.3 1-.3 1.5 0 2.1 1.7 3.7 3.7 3.7 2.1 0 3.7-1.7 3.7-3.7-.1-2.2-1.7-3.8-3.8-3.8z" class="st0"/></svg> </div>
Шаг 3: Управление стилями
Приступаем к самой сложной части — адаптации сайта для слабовидящих. Для этого мы будем использовать новый класс body.font-mode, чтобы переопределить стили на странице. Простыми словами, мы применяем все необходимые стили только через класс body.font-mode. Это позволит нам легко изменить элементы на странице по нашему усмотрению.
Для примера я использовал стандартные классы темы WordPress и прописал соответствующие стили. Вы можете проверить и посмотреть на результат. Однако, вероятно, потребуется некоторая корректировка в зависимости от вашего сайта и его темы.
Стили переключателя
#font-mode-toggle {
cursor: pointer;
display: inline-block;
position: relative;
vertical-align: middle;
margin-left: 22px;
}
#font-mode-toggle svg {
fill: #333;
width: 32px;
}
#font-mode-toggle::after {
content: attr(data-ws-tooltip);
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 7px 13px;
border-radius: 5px;
font-size: 14px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
font-size: 12px;
min-width: 150px;
}
#font-mode-toggle:hover::after {
opacity: 1;
visibility: visible;
}
body.font-mode #font-mode-toggle svg {
fill: #c1088a;
}
Стили для корректировки в WordPress
body.font-mode .entry-content p {
font-size: 22px;
}
body.font-mode {
font-size: 18px;
}
body.font-mode h1 {
font-size: 43px;
}
body.font-mode h2 {
font-size: 37px;
}
body.font-mode h3 {
font-size: 33px;
}
body.font-mode p {
font-size: 18px;
}
/* sidebar */
body.font-mode .widget-title {
font-size: 27px;
}
/* head menu */
body.font-mode .main-navigation ul {
font-size: 16px;
}
/* title post, page */
body.font-mode .page-title, body.font-mode h2.entry-title {
font-size: 43px;
}
Easy Font Resize – размер шрифта для слабовидящих
Этот плагин предоставляет простой и автоматический способ увеличения шрифта на вашем сайте. Вы можете легко выбирать, какие элементы увеличивать. К примеру, таблица, список, теги заголовков и прочее.
После установки плагина он добавляет специальную панель внутри каждой статьи, где есть кнопка с плюсом. При нажатии на эту кнопку вы можете увеличить шрифт на заданный размер.