Виджет доступности

Доступный интерфейс
для каждого пользователя

Универсальный виджет для слабовидящих. Подключается к любому проекту — Vanilla JS, React, Vue, Angular.

Смотреть демо ↓

Возможности

Всё для комфортного чтения

Шесть инструментов доступности, которые работают на любом сайте без изменения исходного кода.

Размер текста
A A
Озвучка страницы
Межстрочный интервал
→
Жирный текст
B B
Цветовые темы
Ц
Скрытие изображений

Демонстрация

Попробуйте прямо сейчас

Нажмите на кнопку ниже — и страница преобразится на ваших глазах.

Размер текста и межстрочный интервал

В виджете есть два степпера: «Размер текста» и «Межстрочный интервал». Нажимайте «+» и «−», чтобы увеличить или уменьшить параметр. Размер текста регулируется от 100% до 200% с шагом 10%. Межстрочный интервал — от 1.0 до 2.5.

Жирный текст включается тоггл-переключателем. Все три настройки работают вместе — можно задать любую комбинацию.

Цветовые темы

  • А
  • А
  • А
  • А
  • А
  • А

Шесть цветовых схем: стандартная, высокий контраст (чёрный/белый и белый/чёрный), тёплые тона и мягкая синяя. Тема применяется мгновенно.

Чтобы вернуть исходные цвета — выберите первый кружок или нажмите «Сбросить настройки».

Озвучка страницы

Нажмите «Озвучить страницу» — браузер зачитает весь текст вслух. Кнопка станет красной («Остановить»). Повторное нажатие останавливает воспроизведение.

Чтобы озвучить фрагмент — выделите текст мышью (или пальцем на мобильном), затем нажмите «Озвучить выделенное».

Скрытие изображений и сброс

Переключатель «Скрыть изображения» убирает все картинки на странице — текст остаётся, нагрузка на внимание снижается.

«Сбросить настройки» возвращает всё к исходному состоянию одним нажатием. Все настройки сохраняются автоматически — при следующем визите применятся сразу.

Подключение

Работает везде

Один виджет — четыре способа подключения.

HTML 
<!-- Connect before </body> -->
<script src="accessibility-widget.umd.js"></script>
<script>
  new AccessibilityWidget.AccessibilityWidget({
    position: 'bottom-right',
    locale: 'ru'
  });
</script>
TypeScript 
import { AccessibilityWidget } from 'accessibility-widget';

new AccessibilityWidget({
  position: 'bottom-right',
  locale: 'ru'
});
TSX 
import { AccessibilityWidgetComponent } from 'accessibility-widget/react';

export function App() {
  return (
    <>
      <AccessibilityWidgetComponent
        position="bottom-right"
        locale="ru"
      />
    </>
  );
}
Vue SFC 
<template>
  <AccessibilityWidgetComponent
    position="bottom-right"
    locale="ru"
  />
</template>

<script setup lang="ts">
import { AccessibilityWidgetComponent } from 'accessibility-widget/vue';
</script>