Универсальный виджет для слабовидящих. Подключается к любому проекту — 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>