Универсальный виджет для слабовидящих. Подключается к любому проекту — Vanilla JS, React, Vue, Angular.
Возможности
Шесть инструментов доступности, которые работают на любом сайте без изменения исходного кода.
Демонстрация
Нажмите на кнопку ниже — и страница преобразится на ваших глазах.
Регулируйте размер текста, чтобы увеличить или уменьшить шрифт.
Диапазон — от 100% до 200% с шагом 10%. Масштабируются все тексты на странице, включая заголовки и подписи.
Регулируйте расстояние между строками от 1.0 до 2.5.
Увеличенный интервал облегчает чтение при дислексии и слабом зрении.
Меняйте начертание всех шрифтов и повышайте контрастность букв для упрощения восприятия текста при нарушениях зрения.
Выбирайте любую из представленных цветовых схем: стандартная, высокий контраст (чёрный/белый и белый/чёрный), тёплые тона и мягкая синяя.
Нажмите «Озвучить страницу» — браузер начнёт зачитывать весь текст вслух. Кнопка станет красной и изменит текст на «Остановить озвучку». Повторное нажатие останавливает воспроизведение.
Нажмите «Озвучить выделенное» — кнопка начнёт пульсировать фиолетовым, перейдя в режим ожидания. Выделите нужный текст мышью (или пальцем) — озвучка запустится автоматически. Режим остаётся активным: можно выделять следующие фрагменты без повторного нажатия. Нажмите кнопку ещё раз, чтобы выйти из режима.
Скрывайте или отоюражайте изображения на странице — текст остаётся, нагрузка на внимание снижается.
Подключение
Один виджет — четыре способа подключения.
<!-- Connect before </body> -->
<script src="accessibility-widget.umd.js"></script>
<script>
new AccessibilityWidget.AccessibilityWidget({
position: 'bottom-right',
locale: 'ru'
});
</script>import { AccessibilityWidget } from 'accessibility-widget';
new AccessibilityWidget({
position: 'bottom-right',
locale: 'ru'
});import { AccessibilityWidgetComponent } from 'accessibility-widget/react';
export function App() {
return (
<>
<AccessibilityWidgetComponent
position="bottom-right"
locale="ru"
/>
</>
);
}<template>
<AccessibilityWidgetComponent
position="bottom-right"
locale="ru"
/>
</template>
<script setup lang="ts">
import { AccessibilityWidgetComponent } from 'accessibility-widget/vue';
</script>